This is my favorite feature to psd2css Online so far. So powerful and so easy to use. Now you can design your web page with Photoshop, include some thumbnail images for an image gallery or slide show, convert it to HTML with psd2css Online and get a fully functional, professional image gallery without writing a line of code - Free!
Here are the example files:
http://psd2cssonline.com/tutorials/lightbox/index.html
http://psd2cssonline.com/tutorials/lightbox/lightbox.psd
And here is the video tutorial:

Add it to a Wordpress page?
Now that I have a working gallery thanks to PSD2CSS...
I would love to know how to paste my gallery into a post on my wordpress blog.
Wouldn't that be great ? !
How would one do that I wonder?
( I want to get my gallery on to my wordpress blog somehow some way!!)
how do you change the type from Image_of_?
Hi Shaun,
First let me say that this is a great service you have here! The only problem I am having is trying to figure out how to change the type that goes with each image in the lightbox.
I went to the site you mentioned in an earlier post and figured out how to change the opacity and opacity color, but I just don't see where you can change the type that shows up with images. anytime I try to delete the Image_of_ I get Undefined of Undefined. What I am trying to do is put a unique description with each portfolio piece Image in the llightbox. Can you help me figure out what code I need to alter?
I want it to be more like this site
http://www.debbyrivera.com/printdesign.html
Thanks!
Slide Show Images
Hi, other then creating a lightbox, does psd2css able to create a slideshow?
I want to try making my website background able to change..
I'm really impressed with
I'm really impressed with how user friendly you have kept this for those that really only know Photoshop/Gimp... Almost every other service of this nature, including CMS's quickly become too complicated for non-developers to understand. <a href="http://www.diet-plans.com/">diet plans</a>.
Regards,
It seems to me different and
It seems to me different and interesting thing that there will be no coding for image gallery of custom designed web page...It can be helpful for <a href="http://www.webdevforums.com">website design</a>,thx for sharing all that,video is informative one,last but not the least good to see the links which u mentioned!
about "_lbthumb"
Hi
I m new here. I ve been using your service on psdcssonline for few days. And i appreciate it.
But i don t know I ve got a problem with these _lbthumb code. I followed your explication about the way to publish the diaporama but i couldn t get it. can someone help me
Hey Jo.mike - Can you post
Hey Jo.mike -
Can you post your PSD somewhere and put a link in this thread? We can try it and see what's going on. Thanks.
--
Shaun
psd file
Hei Shaun
Here is the link to my psd and html files
Thanks
http://psd2cssonline.com/?link=uploads/527418454/index.html&zip=uploads/527418454/psd2css.zip
Hi jo.mike - We don't put
Hi jo.mike -
We don't put the original PSD file in the zip so I still don't have access to the PSD file.
And that is our hosted version of the page for you - so of course we don't have the big versions of the JPG files that you need to make _lbthumb work. You need to download the zip file, and add your big JPG files (named to match each _lbthumb), then host it somewhere yourself. So for example, you have a 3_lbthumb layer in there on one page - you'll need to add the 3.jpg file to the code so your server can serve it up.
Let me know if that doesn't make sense.
Thanks.
--
Shaun
Hi Shaun the problem was
Hi Shaun
the problem was solved. It was the filename extension. It should be .jpg not .jpeg
:)
Doh! I have got to start
Doh! I have got to start reading posts newest to oldest :)
Glad you found it! Thanks.
--
Shaun
Hi Shaun Thanks for the
Hi Shaun
Thanks for the explication. actually i m not good on this css coding.
I did what u said. I downloaded the zip file and put the file on a folder where i had my .jpg file.for exemple, i have a 3.psd-layer (3_lbthumb) and 3.jpg file on this folder.
strangely some diaporama is shown on internet-explorer, i m using maxthon browser normally.
do i need to put the file on a ftp program to view it on the net.
how can u get the psd file. i think it s to big to send it via mail
thanks.
Hi - If you can't email it,
Hi -
If you can't email it, there are a number of free file hosting sites where you upload a (potentially large) file, and they provide a link to it that you can email or post. Then I can download it from there.
Here is an article on some of them:
http://www.smashingapps.com/2008/08/28/5-best-free-file-hosting-services-to-store-your-files.html
Thanks.
--
Shaun
Scrolling
Is there a way to get the thumbnails in a mini scroll box with the scroll bar underneath rather than all the images in that box? thanks
cv
Hhhm... You could do that by
Hhhm... You could do that by editing the generated code by hand, but it wouldn't be trivial. It would be a container layer for a much larger layer that contained the thumbnails. psd2css Online won't put a larger layer inside a smaller layer by default though.
you might want to take a look at the _scrollcontent and _scrollframe features however - it would probably be easier to remove the javascript that makes that move automatically and add a 'overflow: auto' to the generated CSS. That would probably create the effect you're looking for.
--
Shaun
Text
Do you have any plans of adding text to this image gallery? I know there are other things that allow you to add a title and teaser, but what about a larger description? Say for example your an artist so you want to add a name and teaser to get folks to click on the thumbnail of a painting. Then you want to be able to add more text and explain your technique or the medium you used etc. Are there any plans for this?
Thanks!
Debee
Hi Debee
The light box plugin already has support for lots of customization. That plugin is called the jQuery lightBox plugin and was written by Leandro Vieira Pinho. The documentation for how to customize it is here:
http://leandrovieira.com/projects/jquery/lightbox/
Click on the 'Extend' tab.
Let me know if I can be of any help getting any of that to work. Thanks.
--
Shaun
same issue please help
I can't get the customization Debee was asking for to work at all.
I can modify the opacity and color of the background , but what I would really like to do is remove the "Image _of_" type and replace it with unique type for each image in the lightbox much like this link
http://www.debbyrivera.com/printdesign.html
Could you please explain how I would go about doing this?
I know I need to modify some code, but I am not sure what code to change. the only thing I have been able to change the code to say is undefined of Undefined instead of Image _ of _.
Please help me out if you can Shaun.
Thanks
description and group images
Im also trying to get rid of the image .. of .. text in the bottom.
Also i would like to know if there is a way to group images instead of 1 big group.
On the web its said to add [groupname] to the rel="lightbox" line but i can only find a class="lightbox" line and that doesnt work