Layer 4 copy

Upload your PSD file...

Take a quick look at the Guidelines to see how to prepare your PSD file


Please wait - we are now uploading and converting your file...


Wait! You can upload your PSD, but you aren't logged in! If you submit now, you won't get any of the cool Unlimited features. You'll just get plain XHTML and CSS DIVs. Create a new account to use all the great Unlimited features free for 2 weeks.

Image Gallery in your Custom Designed Web Page with No Coding!

Image Gallery in your Custom Designed Web Page with No Coding!

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:

Doesnt work for me

I did everything like on the video, but it does not work. Images are not clickable.
I even download ur .psd file and upload it, - the same, doesnt work at all.

Cannot see controls (prv, next, close)

Hi - answered my own question on where to put the files, but now have the gallery working and cannot see the controls for next, previous, close, loading, etc. They are working, as I can hover over the area and click the controls, but they are not visible. Any help is appreciated! Thanks again.

Incorporate gallery into Drupal Website

Hi - I would like to add this feature to a Drupal-based website. Where do I need to add the jpeg files so the application can read them? Right now, I convert the psd file, save the zip file, upload to my server and extract the files there. I am not clear on where the jpeg files need to be added. Thanks!


Really You r so good .. just one question here regarding joomla temp . can i name my blocks X_User1 or X_Top etc .. ?

But really good Job Bro ..

Some Things I Learned

...that might help other newbie non-coders like me!

Don't use apostrophe's in your image names or layer names. "I'm no Angel..." won't be recognized, but "Im no Angel..." will.

There seems to be a limit on the number of characters you can use for a layer name. I found that some of my longer ones were truncated in the code, causing the lightbox not to work.

This can be fixed easily enough by hand by adding the missing characters to the class="NameOfLayer_lbthumb"and adding the link code to your full sized image, the class="lightbox", and the border="0" to your formatting

Shaun is God.

My goodness don't you dare shutdown this site. EXCELLENT! EASY! I LOVE YOU!

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


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="">diet plans</a>.

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="">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"

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.


psd file

Hei Shaun

Here is the link to my psd and html files


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.



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.


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

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:




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

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.



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?



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:

Click on the 'Extend' tab.

Let me know if I can be of any help getting any of that to work. Thanks.


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

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.


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

copyright (c) 2009 psd2css Online, Inc.



User login

Become a Fan of our Facebook Page

Need help or have a question?

| Privacy | Terms of Use |

copyright (c) 2008, 2009, 2010, 2011 psd2css Online, Inc.
Patent Pending

Syndicate content