Image Gallery with jQuery Lightbox 1 of 3

Check out these great Hostgator Hosting Plans!
http://bit.ly/HostgatorHostingSale




Here is the link to part 2:

http://www.youtube.com/watch?v=Jyl86HZJ5Hg

In this tutorial by James at http://www.dreamweavertutorial.co.uk we will be installing a custom image

gallery with a layered alpha transparent polorioid effect background image.

We will create the free image gallery with minimal html and css and then attach the image gallery to

the jquery lightbox plugin which will animate a larger image into the center stage of your website.

Your website visitors can then click through the images as if they were a slideshow gallery or peruse

the images individually.

The image gallery is available for a free download, here is the link to the Dreamweaver Tutorial EXERCISE FILES:

http://bit.ly/lightbox-gallery-files



This is a great tutorial for learning how to postion elements and for using image gallery scripts.

Follow me on Twitter:

http://www.twitter.com/dreamweaverman


My RSS feed for Dreamweaver Tutorial updates:

http://www.dreamweavertutorial.co.uk/feed.xml

Category:

Howto & Style

Tags:

• create image gallery
• free image gallery
• image gallery
• image gallery download
• image gallery script
• image gallery tutorial
• jquery image gallery
• jquery slideshow gallery
• js image gallery
• photo image gallery
• dreamweaver tutorial

[keeezz]

how do you add multiple jquery library on the same document...I was trying to add the lavaLamp and the carousel together but when I do one works and the other doesn't whats the order of the jscript files???

[DreamWeaverTutorial]

@keeezz i have never tried to use them together and they may not be compatible. But if you try to do it then dont use two copies of the jquery library just embed one library and then the script for each tutorial. - good luck.

[pimpmerkley]

Hi James,great tutorial and thank you for doing this.I did change link in lightbox.js file so it pics up lightbox pictures from a different folder and all works now just fine.

There is only one problem left. I have J query s3 slider ( also from your tutorial ). I use it as in your tutorial on a main page - photos changing every 4 seconds. Now, when I added lightbox script to the head, s3 slider won't work and only lightbox seems to be working properly. Do you know what is the problem?

[DreamWeaverTutorial]

@pimpmerkley these two scripts probably wont work together on the same page because of conflicts. I suggest that you don't use the slider on the same page as the lightbox.

[LastJoust]

@DreamWeaverTutorial Great tutorial, I followed everything and it worked almost perfectly. However when I click on the images, the javaquery loading effect, prev and next and close buttons are not seen, the close button is a mere X icon.Any way to fix this?

[DreamWeaverTutorial]

@LastJoust hi, this can happen if you don't place the images folder in the same place that the script is looking for it. you can either move the images folder to the same place written in the js file or write down the path to the images folder with the buttons in change the path in the javascript file. if you dont know how to do this then if you have it online, I will tell you the paths from examining your site. - James

[pimpmerkley]

Hi again, any reason why btn-close.gif , ico-loading.gif are not being displayed? . I did change links in jquery.lightbox-o.6.js and point it out to containing folder but only next button is being displayed. What am I doing wrong?

this the web I build thanks to you tutorials : have a look on gallery. fininteriorsltd co uk

[pimpmerkley]

@DreamWeaverTutorial OKAY I FIGURE IT OUT,

I took out this script - script type="text/javascript" src="js/jquery.js"></script , and it works!

[pimpmerkley]

@DreamWeaverTutorial

okay... that's too bad. So what you r saying is that it is impossible to have multiple j.s elements on one page? Or is it just too complicated to achieve?

Another thing, both chrome and safari have problems with displaying all lightbox elements when viewing photos( I have '?' when close or image name should be. Firefox has no problem with it. Do you know what that could be? Sorry to bother but since you have the best tutorials online I just have to aks:)