Image Gallery with Jquery Lightbox 3 of 3
Host Unlimited Websites For .88 ! bit.ly Unlimited Hosting, Free Domain, MySQL, PHP, CGI, SSL, FTP, Stats, 0 google adwords, E-Commerce Included, Dreamweaver Ready, 30 Day money back guarantee This is part 3 here is the link to part 2: www.youtube.com In this tutorial by James at 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 bit.ly This is a great tutorial for learning how to postion elements and for using image gallery scripts. Follow me on Twitter: www.twitter.com My RSS feed for Dreamweaver Tutorial updates: www.dreamweavertutorial.co.uk
May 19th, 2012 at 4:53 am
Thank you! This helped me understand how to position thumbs and create my own slideshow..I don’t like to just copy and paste code, I like to know what is goin on… so thanks!
May 19th, 2012 at 5:41 am
THANK YOU SO FUC#ING MUCH!!!!!!! I’VE BEEN TRYING TO CREATE THIS TYPE OF PHOTO GALLERY FOR MONTHS!!!!!!! DOING ENDLESS GOOGLE SEARCHES AND YOUTUBE SEARCHES FOR TUTORIALS. THANK YOU AGAIN DUDE YOU FUC#ING ROCK!!!!!!!!
May 19th, 2012 at 5:59 am
the html file or the link? because I have no link right now.. I haven’t published it yet! I don’t want to do that before the whole website is finished 🙂 But I can send you the “html” file, with the images in it, and you can see what’s wrong?
May 19th, 2012 at 6:13 am
No the picture size can be whatever you want it to be within reason. If you have not fixed it then upload your page to the web and ill tell you what the problem is. – James
May 19th, 2012 at 6:52 am
I think maybe I found the problem! Do the large pictures need to be 500 x 300 ? because my pictures are way bigger! ^^
May 19th, 2012 at 7:12 am
Okay, I can try that! Thanks! :)
May 19th, 2012 at 7:23 am
Hi Chris, go to my website and look for the written tutorial of the same name. There are full code examples for you to copy and paste. Check for errors based on the code on the site
May 19th, 2012 at 8:02 am
Everything worked perfect until the “lightbox-screen” (I copied everything you did, and past it where you did) but when I browse my site, and press an image, it just opens up normal (I don’t have the option to push next or “close” etc… It’s like nothing happened! But everything else worked perfect so thank you! Put if you know what I could have done wrong, please let me know:)
May 19th, 2012 at 8:35 am
love ur tuts.. but how do you play asf videos coz i have bben trying check on the internet there are no sources.thanks…..
May 19th, 2012 at 9:03 am
Hey james! I have been viewing your videos for quite a while now! I think they are the best areound youtube! thanx James!
May 19th, 2012 at 9:42 am
If you wanted to use escape key to close the large image, how would you approach that ?
Thanks in advance
May 19th, 2012 at 10:25 am
look at the code generated on screen and copy it. its just a path to the images its html already, its not dreamweaver code. Just like if i asked you to find your start up icon for your favourite game like COD4, how would you find the start up icon in your computer? maybe, c drive/users/programfiles/activision/cod4. well its the same with the images.
May 19th, 2012 at 10:55 am
Great video but you know when you link the big image with the tumbnail ones right how do you do it in php or html if you are not using DW
May 19th, 2012 at 11:35 am
Really neat video thanks a lot! But every thing works smoothly until previewing and opening the lightbox for the first time! i think it is down to the folders i downloaded being inside my own website folders as i was hoping i could use this as a page on a website i am making! if this is right could you try and explain how i can fix this problem in a simple way?! thanks alot
May 19th, 2012 at 11:45 am
they mate and have a litter of little lightbox galleries but other than that, probably not much else happens.
May 19th, 2012 at 12:33 pm
what if you have more than one gallery on the same page?
May 19th, 2012 at 1:06 pm
hi you can go into the lightbox JS file inside of dreamweaver and click inside of the open file and go to EDIT>FIND AND REPLACE. then type in ‘opacity’ you can adjust the opacity which is currently set to 0.8 and just to the left of that you can set a background color. – James
May 19th, 2012 at 1:22 pm
Good video. Is there a way to display the images without making the background go dark? Example, I have a design made in Fireworks that I want to use. The layout is a white box on a black background. There is a white line towards the bottom that separates the thumbs from the main pictures that will display in the large space. Is this possible using Jquery with the images showing up in the space? Like I can do in Flash.
May 19th, 2012 at 2:16 pm
AMAZING VIDEO
U GOT ONE MORE SUBSCRIBER 🙂
THX MAN
May 19th, 2012 at 2:56 pm
Thanks alot mate for this USEFUL video, really helped me
but i have one question , if i have a large image , how can i make it fit to screen when i click the pic ? i mean i dont want the large image to go farther than the browsers window, hope u get it, and thanks again
May 19th, 2012 at 3:06 pm
thnks i will appreciate i am designing the real website in the backround so please that is not the original i am playing around as i have no experience in web site creation i have been studying html online and with different tutorials i am now onto php and mysql. so it will be a while before the real site is up and running. thanks for the comments appreciated .
May 19th, 2012 at 4:01 pm
Hey, yeah i had a look at your floating menu. looks pretty cool.
yes you can get them to auto revolve but you will have to set an interval and will need to know a bit of javascript to do that. If i get a chance ill write some code but it wont be for a few weeks. website looks good glad you got the floating menu to work ok and good to see you made some icons for it too.
James
May 19th, 2012 at 4:47 pm
thamks a lot great tutorials i set up the floating nav bar on my web page i haven’t finishe all the pages yet but you can check it out.. on my web design page in the small thumbnails i have set up a j query light-box/.i am busy doing the light box gallery. is it possible to do the gallery so it plays automatic when you click on a thumbnail. thanks and keep up the tutorials.