Ambiera ForumDiscussions, Help and Support. |
|
|
|||||
|
I added a lightbox effect to a WP gallery using Leandro Vieira Pinho's jQuery Lightbox method and thought I'd let you know how I did it. 1. Downloaded his zip at http://leandrovieira.com/projects/jquery/lightbox/ 2. Installed his 'css', 'js' and 'images' directories into my project folder. 3. Added the following inside the head tags of my page <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('a[@rel*=lightbox]').lightBox(); }); </script> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> 4. And in the wsp_slideshow.js file, changed the for loop in the wsp_slideshow constructor to... for (var i=0; i<imageArr.length; ++i) { // Adding the 'href' for the lightbox method var aElem = document.createElement('a'); aElem.setAttribute('href',imageArr[i] ); aElem.setAttribute('rel','lightbox'); maindiv.appendChild(aElem); var imgelem = document.createElement('img'); imgelem.src = imageArr[i]; imgelem.style.position = 'absolute'; imgelem.style.top = '0'; imgelem.style.left = '0'; imgelem.style.display = i == 0 ? 'block' : 'none'; aElem.appendChild(imgelem); this.images.push(imgelem); } 5. Make sure the css for my 'body' tag had the body at 100% width and height for it to work correctly on IE, otherwise it was fine on Chrome and Firefox. 6. Change the 'zIndex' ordering to make sure the last shown image is always behind the current image. I changed a bit of the code in the wsp_slideshow.prototype.gotoNextFrame = function() method from this... this.images[this.currentFrame].style.display = 'block'; this.images[this.lastShownFrame].style.display = 'block'; to this this.images[this.currentFrame].style.display = 'block'; this.images[this.currentFrame].style.zIndex = 1; this.images[this.lastShownFrame].style.display = 'block'; this.images[this.lastShownFrame].style.zIndex = 0; It can be seen on my wife's site at www.annekellyart.com. She made the entire site herself with Website Painter which she loves using. I just add small functionality now and again. Happy coding |
|