Hello folks,
i'm getting a portfolio site together for a family member and have put together quite a bit of the functionality, although i'd like to modify one part of the Gallery as it currently exists. I've posted the URL below in the example field.
Where i have the image galleries under both 'Work' and 'Archive' sections, the larger image (which updates on the left) currently allows users to navigate to the previous and the next image in the gallery depending on whether they click on the left or the right of the big image.
What i'd like to try and do, if it's possible, is open up a Lightbox style enlargement of the image instead. So by selecting the larger image to the left, a user would be presented with an translucent overlay with a larger version of the image.
I don't know if this is something that's conceivable at this stage, as i can't find any documentation involving shoehorning something like this functionality in now?
2 answers
point
Yes. Since you are using jQuery, I would recommend fancyBox which is a lightBox alternative for jQuery. On the page there is a set of instructions for use, but basically it will come down to adding the script files and then adding the following to one of your script files:
Update: My code was incorrect. It's been a while and I didn't run it. Here is code that should work. But, your click is currently being handled by your other plugin, so you might want to catch that and stop it otherwise you might get both to run.
$(document).ready(function () {
$('.image-wrapper.current a').fancybox();
});
Fancybox handles the click processing, you just need to attach it to the item apparently.
- Thanks for this info, Ktash! Unfortunately i think i'm missing out on something when i try and implement the Fancybox functionality? I've tried to include the content within my 'Work' HTML page, by adding links to the two fancybox .js script files which i've uploaded to my test area, and by adding the script you posted above after the existing thumbnail script i had in there already. I've also added the CSS to the document as inline content. The original thumbnail gallery still seems to be working now, but the actual fancybox overlay isn't appearing (i've only tried to include the anchor on the first image of the feet/bathplug). Is it possible that i'm making one or more simple mistakes here, or would i perhaps need to try and disable the older existing thumbnail jquery gallery functionality to allow fancybox to run?
- Updated my answer. Should work better now.
- Thanks for the feedback Ktash! i've tried to implement that but it seems to open the larger image in a blank page. Might this be what you've mentioned regarding a click being handled by the previous script?
points
Or colorbox is a great lightbox plugin for jQuery too
- Thanks Dan! I've downloaded this to try out as well :D
