calling fancybox using jquery .click function
Solution 1
I think its getting overly complicated.
jQuery(document).ready(function($) {
$("a.group").fancybox({
'frameWidth': 300,
'frameHeight': 300
});
});
That should be all the javascript you need. Then you should move the title and the grouping onto the a tag.
<ul id="images">
<li><a class="group" rel="group" href="images/2_large.jpg" title="MOMA NY #1"><img src="Images/3.jpg" alt="MOMA NY #1"/></a></li>
<li><a class="group" rel="group" href="images/1_large.jpg" title="MOMA NY #2" ><img src="Images/3.jpg" alt="MOMA NY #2"/></a></li>
<li><a class="group" rel="group" href="images/3_large.jpg" title="MOMA NY #3" ><img src="Images/3.jpg" alt="MOMA NY #3"/></a></li>
<li><a class="group" rel="group" href="images/4_large.jpg" title="MOMA NY #4" ><img src="Images/4.jpg" alt="MOMA NY #4"/></a></li>
</ul>
Is that what you were looking for?
Solution 2
I've never used fancybox before, but from just looking at your code, I think the line that calls fancybox needs to be fixed from
$("a.group").fancybox({
to this:
$(this).fancybox({
Sorry, I haven't tested this... but I believe that was your problem.
Solution 3
Some might find this useful when you need an attribute of the link that gets clicked.
//html:
<a href="#popup" id="lnk_0">Create a new product w/ this image</a>
<div style="display:none;"><div id="popup"><h1>This is popup text.</h1></div></div>
//jquery:
$("a[href='#popup']").fancybox({
'onStart': function(selectedArray, selectedIndex, selectedOpts)
{
alert(selectedOpts.orig.attr('id'));
}
});
Comments
-
DanC almost 2 years
I am trying to customise fancybox so that when one of the 4 images displayed on the page is clicked, this is the one that loads up in the fancybox window.
To do this I want to use the jquery .attr function to pass the image src (as a variable) to the main image holder.
My current jquery code is:
jQuery(document).ready(function($) { $("a.group").click(function() { var image = $(this).attr("name"); $("#largeId").attr({ src: image}); $("a.group").fancybox({ 'frameWidth':966, 'frameHeight': 547, 'hideOnContentClick': false, 'overlayOpacity': 0.85, 'callbackOnShow': function() { $("#container ul#thumbnails li a").click(function(){ var largePath = $(this).attr("title"); $("#largeId").fadeOut("fast").hide(); $("#largeId").attr({ src: largePath }); $("#largeId").fadeIn("slow");return false; }); $("#container ul#thumbnails li a").click(function(){ $('.active').removeClass('active'); $(this).addClass("active"); }); } }); }); });
The HTML for the main page images is:
<ul id="images"> <li><a id="one_image" class="group" href="#hidden" title="images/1_large.jpg"><img src="Images/1.jpg" alt="MOMA NY #1" title="MOMA NY #1" /></a></li> <li><a class="group" href="#hidden" title="images/2_large.jpg"><img src="Images/2.jpg" alt="MOMA NY #2" title="MOMA NY #2" /></a></li> <li><a class="group" href="#hidden" title="images/3_large.jpg"><img src="Images/3.jpg" alt="MOMA NY #3" title="MOMA NY #3" /></a></li> <li><a class="group" href="#hidden" title="images/4_large.jpg"><img src="Images/4.jpg" alt="MOMA NY #4" title="MOMA NY #4" /></a></li> </ul>
For the Fancybox window:
<div id="main_image"> <img id="largeId" src="" alt="" title="" /> </div>
-------EDIT----------
just so you know, this mostly works if I get rid of the click function at the start, the functions within the fancybox call all work fine.
-
Jesta over 14 yearsIm pretty sure you can control all of that in the GET parameters on the URL. I added an example into the above.