PDA

View Full Version : simplegallery.js to work with jquery.fancybox.js



bennylondon
01-29-2009, 08:04 PM
Hello Everyone,

First post here - so please forgive the complete nuuubnesss.

I really love the simplegallery.js (http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm)
I have it working fine.

What I would really love to do is get it working with a lightbox. So that when you see an image you like you can click on it, which then opens the lightbox thingy and pauses the movie. Then you close the image and hey presto it continues... All sounds good so far..

One I have found that I also really like is jquery.fancybox.js from http://fancy.klade.lv/


This is my code in the head so far:

<script type="text/javascript">
jQuery(document).ready(function($) {
$("#gallery").fancybox({ 'zoomSpeedIn': 0, 'zoomSpeedOut': 0, 'overlayShow': true });

</script>

<script type="text/javascript">
var mygallery=new simpleGallery({
wrapperid: "gallery", //ID of main gallery container,
dimensions: [400, 265], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
["flash/photo1.jpg", "flash/photo1.jpg", "facebox"],
["flash/photo2.jpg", "flash/photo1.jpg", "facebox"],
["flash/photo3.jpg", "flash/photo1.jpg", "facebox"],
["flash/photo4.jpg", "flash/photo1.jpg", "facebox"]
],
autoplay: true,
persist: false,
pause: 2500, //pause between slides (milliseconds)
fadeduration: 500, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
},
onslide:function(curslide, i){ //event that fires after each slide is shown
//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
}

})

</script>

I fiddled with line 136 of simplegallery.js and changed it to:

var layerHTML=(imgelement[1])? '<a href="'+imgelement[1]+'" rel="'+imgelement[2]+'">\n' : ''

The idea was that the "rel" could invoke the lightbox...

It seems like it wants to try and open the image above the movie, but then just opens the image in a window on it's own.

Any ideas?