i'm having a php code used with jscarousel 2
http://www.egrappler.com/jquery-contentthumbnail-slder-v2-0-jscarousel-v2-0/
to display items from the database as a carousel and having links like this
<a id="addtocart" product="<?php echo $productID; ?>" href="#addDiv" >add</a>
and a hidden div
<div style="display:none">
<div id="addDiv" style="width:300px; height:250px; background-color:#969;">test</div>
</div>
and another link just for testing and it's not inside the carousel just like the previous one
the problem is : links inside the carousel don't show the fancybox while the other link outside the carousel shows the fancybox i've tried this
$(document).ready(function(e) {
$("a#addtocart").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
$(document).on("click","a#addtocart",function(){
$(this).fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
});
any help please ?
What exactly do you want to do? I think the problem is, you are working with IDs. Maybe you should add the "click" event you are using to a class. Every ID may be in a html document just once, so you can just have one element with the ID addtocart.
add
Try this jQuery:
$(document).ready(function(e) {
$("a .fancybox").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
$(document).on("click","a .fancybox", function() {
$(this).fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
When you use the dot (.) instead of the hashkey (#) you are able to use classes instead of ids.
If that does not help you, you can find an implementation of jCarousel and Fancybox right here: http://www.mccran.co.uk/examples/jcarousel/
the solution :
just used this code at the end of the document.ready
$("a.add_to_cart").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
and worked normally but after document.ready makes it doesn't work
Related
I created an attribute called "youtube" (text field only) on magento. In this text field I put youtube video urls like (www.youtube.com/embed/nk_FpiXp-3s) etc...
So my issue is I`m trying to php echo this attribute "youtube" inside my html href code.
<a class="various fancybox.iframe" href="<?php echo $_product->getAttributeText('youtube')?>">Youtube (iframe)</a>
but it seems to break the page. Also my fancybox script.
<script>
var $j = jQuery.noConflict();
$j(".various")
.attr('rel', 'gallery')
.fancybox({
openEffect : 'none',
closeEffect : 'none',
nextEffect : 'none',
prevEffect : 'none',
padding : 0,
margin : [20, 60, 20, 60] // Increase left/right margin
});
</script>
Any tips guys ?
It's custom attribute inside of a custom block. The block on product page is working fine so the issue is on php echo.
Thanks!
Sorry for the missing (?>) but it seems to not be working.
Hello Check below code may be help you
$_product->getData('youtube');
OR
$attributes = $_product->getAttributes();
$attributes['youtube']->getFrontend()->getValue($_product);
Use the code below
<?php echo $_product->getYoutube(); ?>
Given that your PHP is totally invalid, by never closing the <?php tag. Perhaps you want something more like (split over multiple lines for legibility):
<a
class="various fancybox.iframe"
href="<?php echo $_product->getAttributeText('youtube') ?>">
^^^---missing
Youtube (iframe)</a>
I found the solution...
html:
<?php $_product = $this->getProduct(); ?>
<?php if($_product->getVideobox()): ?>
<a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/<?php echo $_product->getVideobox(); ?>">video<a/>
<?php endif; ?>
script:
<script>
var $j = jQuery.noConflict();
$j(".fancybox")
.attr('rel', 'gallery')
.fancybox({
openEffect : 'none',
closeEffect : 'none',
nextEffect : 'none',
prevEffect : 'none',
padding : 0,
margin : [20, 60, 20, 60] // Increase left/right margin
});
</script>
Videobox = attribute code
this is link to active fancyBox
<a class="demo-select fancybox.ajax" id="select-demo-vdo" href="<?php echo Yii::app()->createUrl("/admin/default/listProgram",array("user_id"=>$user_id));?>">select demo video</a>
<input type="text" id="demo-video-id" name="demo_video" value="" />
AND This is My Script
<script type="text/javascript">
jQuery.noConflict();
$(document).ready(function() {
$(".demo-select").fancybox({
maxWidth : 900,
maxHeight : 900,
fitToView : false,
width : '80%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
});
});
</script>
In List program view
foreach($lists as $file){
echo "<a href='#' class='thumbnail' onClick='selectVideo($file->id)'>";
echo "$file->name";
echo "</a>";
}
<script type="text/javascript">
function selectVideo(id){
$("#demo-video-id").val(id);
parent.jQuery.fancybox.close();
}
</script>
Problem is:: demo-video-id was updated But FancyBox not close. How to fix this. Thanks
Just use $.fancybox.close();.
fixed Problem layout before active jquery has facybox script and layout show in facybox has script too. Must delete script in layout was showed in facybox.
I'm trying to get fancybox to open a php file; the file contains this code <?php echo "hi"; ?>.
Now when I set the image href attribute to a jpeg file it loads fine. But when I set it to a php file it doesn't load. Can I have help trying to get it to load a php file.
<a class= "fancyimg" href="http://mydomain.com/jquery.fancybox-1.3.4/count.php" ><img src="http://mydomain.com/jquery.fancybox-1.3.4/fancyimg2.jpg">
Here is part of my code
<script type="text/javascript">
$(document).ready(function() {
$(".fancyimg").fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
</script>
Use type attribute of fancybox as below to open php file.
$(".fancyimg").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'type' : 'iframe',
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
you can use something like this :
$(".fancyimg").click(function() {
$.fancybox.open({
href : $(this).attr("data-id"),
type : 'iframe',
padding : 5
});
});
and instead of href="http://mydomain.com/jquery.fancybox-1.3.4/count.php" put your link in a custom attribute called data-id like this :
<a class= "fancyimg" href="#" data-id="http://mydomain.com/jquery.fancybox-1.3.4/count.php" ><img src="http://mydomain.com/jquery.fancybox-1.3.4/fancyimg2.jpg"></a>
I have a scroller maked with a plugin called simplyscroll.js in jquery. Inside It I scroll many images loaded at runtime using a database. I want to apply at every image a fancybox of the image with some text loaded by database:
(The text that I wanto to load is inside $img['txt'])
code:
<ul id="scroller2">
<?php
$qry_img= $db->query("SELECT * FROM image_prodotti;");
while( $img = $qry_img->fetch_array() ){
echo '<li class="new"><img src="img/prodotti/caricati/'.$img['url'].'" alt="" /></li>';
?>
</ul>
<script type="text/javascript">
$(document).ready(function(){
$("a.fancy").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : true
});
});
</script>
There would be three possible ways to do it :
First (the easiest and simplest) - Add a title attribute to the <a> tag and set $img['txt'] as its value:
<ul id="scroller2">
<?php
$qry_img= $db->query("SELECT * FROM image_prodotti;");
while( $img = $qry_img->fetch_array() ){
echo '<li class="new"><img src="img/prodotti/caricati/'.$img['url'].'" alt="" /></li>';
?>
</ul>
You don't need to do any modification to your script. Notice that with this option, the title will show up as tooltip when you hover the thumbnail.
Second - Set $img['txt'] as the value of the alt attribute in the thumbnail (<img> tag) :
<ul id="scroller2">
<?php
$qry_img= $db->query("SELECT * FROM image_prodotti;");
while( $img = $qry_img->fetch_array() ){
echo '<li class="new"><img src="img/prodotti/caricati/'.$img['url'].'" alt="'.$img['txt'].'" /></li>';
?>
</ul>
Then add the API option 'titleFromAlt':true to your script :
$(document).ready(function(){
$("a.fancy").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : true,
'titleFromAlt' : true // NEW
}); // fancybox
}); // ready
Third - Depending on the amount of text, you may prefer to store $img['txt'] in a hidden <div> just right after the <a> tag; then set its content as the fancybox title once it is opened :
<ul id="scroller2">
<?php
$qry_img= $db->query("SELECT * FROM image_prodotti;");
while( $img = $qry_img->fetch_array() ){
echo '<li class="new"><img src="img/prodotti/caricati/'.$img['url'].'" alt="" /><div style="display: none;">'.$img['txt'].'</div></li>';
?>
</ul>
Then use this script to fetch the contents of the hidden <div> :
$(document).ready(function(){
$("a.fancy").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : true,
'titlePosition' : 'over', // NEW
'onStart' : function(currentArray,currentIndex){
var obj = currentArray[ currentIndex ];
this.title = $(obj).next('div').html();
}
}); // fancybox
}); // ready
NOTE : this is for fancybox v1.3.2 +
I've included the js and css files, in the frontend all is loaded correctly, but when I click on
Upload
nothing happens, not receiving any error in firebug.
Basically, I can't upload files. Even if the uploadify option "auto" is set to "true".
How to repair this? What can be wrong?
My code:
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.imgareaselect.min.js"></script>
<script type="text/javascript" src="/js/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="/js/uploadify/swfobject.js"></script>
<script type="text/javascript" src="/js/uploadify/jquery.uploadify.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("a.group").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'width': 500,
'height' : 400,
'overlayShow' : false
});
});
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$("#file_upload").uploadify({
"uploader": "/js/uploadify/uploadify.swf",
"script": "/uploadify/upload",
"cancelImg": "/img/uploadify/cancel.png",
"scriptData": {'type': 1},
'removeCompleted' : true,
'folder': '/uploads',
"auto": true,
"multi": false,
"onComplete": function(event, ID, fileObj, response, data) {
},
'onError': function (event, ID, fileObj, errorObj) {
alert(errorObj.type + ' Error: ' + errorObj.info);
}
});
});
</script>
<input type="file" id="file_upload" name="file_upload" />
Upload
Thanks
I would assume - since your using jQuery that the code should be as follows:
<script type="text/javascript">
$().ready(function() {
$('#upload').click(function() {
$('#file_upload').uploadifyUpload();
});
});
</script>
Upload
This would be more in line with the way jQuery usually works.
Shouldn't that be the onclick event?
Upload
If auto is set to true the files should upload automatically as soon as they are selected so you don't even need an upload link/button. Just put this inside your document ready function.
$("#file_upload").uploadify({
'uploader' : '/js/uploadify/uploadify.swf',
'script' : '/js/uploadify/uploadify.php',
'cancelImg' : '/js/uploadify/cancel.png',
'folder' : '/some_folder',
'fileExt' : '*.jpg;*.jpeg;*.gif;*.png',
'auto' : true});
Is it possible you need to use a complete form tag?
To get the multipart/form-data generated automagically you can do:
<?php $this->Form->create('Document', array('type' => 'file')); ?>
I don't know if uploadify requires a form tag but it seems logical that if the demo here shows a complete form tag that your test script should have one also -
http://uploadify.wdwebdesign.com.br/
This is the 3.0 demo - which might be newer than your version but the code on both demos shows a complete form. Again, your code as shown does not.
maybe you can try this:
href="javascript:$('#custom_file_upload').uploadifyUpload($('.uploadifyQueueItem').last().attr('id').replace('custom_file_upload',''))
from the offical demo
uploadifyupload