Layer 4 copy
doc
tut
blog
forum
doc
tut
blog
forum
home

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:
http://psd2cssonline.com/tutorials/lightbox/index.html
http://psd2cssonline.com/tutorials/lightbox/lightbox.psd

Doesnt work for me

Hello.
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.

Why You Should Own a Pair of Womens Boat Shoes Nike Zoom Lifesty

Every mother knows how challenging it is to get children to go to shoe shops and have them measured up and fitted for shoes. If you’re a busy mother with kids in tow, you’ll probably struggle to find the hours needed to take your children to have your kids’ feet measured at the local high street shoe store. Not to worry though, independent shoe retailer Shoes On takes away all the hassle. By visiting you at your house and taking care of all things ‘shoes’ and helping you organize <A href="http://www.nikezoom2outlet.com/Nike-Zoom-LeBron-Retro-Basketball-Shoes-VII-White-view-65">Nike Zoom LeBron Retro Basketball Shoes VII White</A> shopping for shoes need never be the same again! Buying shoes is traditionally done during your visit to the high street, but many people have discovered it certainly does not guarantee satisfaction. When you go to your local shoe shop, a surprising number of hours can be spent traveling, looking for a parking space and trawling the shops to find what you’re looking for. When you do finally find a pair you like no doubt you’ll be served and ‘fitted’ by a young, poorly trained shoe fitter, whom you’ll have to trust to fit shoes for your precious child’s growing feet. On top of all that you are restricted by the store’s business hours and more often than not the merchandise is out of stock. Not ideal for Mums with busy schedules! It is for reasons such as these that Sam and Lynne of Shoes On launched their new venture in May 2008. Shoes On is more than just an on-line shop. Apart from providing a resolution to shoe fitting and shopping issues, the two busy Mums hit upon the concept of Shoe Parties as a great way to bring shoes and friends together. Sam and Lynne know just how tough things can get when shopping for ladies and children’s shoes in terms of inconvenience and poor fitting. Shoe Parties are the perfect tonic - great fitting shoes at a convenient place and time to suit you – what else could busy mums want? Finally shoes needn’t be a chore both for the kids and the Mums. What Is a Shoe Party? A shoe party conducted by Shoes On allows you and your child to browse and try on footwear right in the comfort of your own home. With Shoe Parties, you can have your friends over for coffee and cake and, dare I say, a glass of wine..! So you and your friends relax while a friendly expert takes care of measurements and fitting. Mums too will enjoy a wide selection of fashionable footwear for all occasions. So try them on, show them off to your friends and compare notes! What You Get When You Host Shoe Parties In addition to making shoe shopping and fitting easier for yourself and your kids, Shoe Parties give you much more. If you host a party, you get the extra benefit of receiving 10% of sales as a discount off any pair of shoes you buy. The average Shoe Party turnover is ?450 approximately which would equate to ?45 off your shoes bill! So if you are in Warwickshire, Derbyshire, Staffordshire or Worcestershire or surrounding areas, you can call Shoes On and schedule a Shoe Parties with Sam and Lynne. If you’re not in these areas you could be the sort of person we are looking for to join us and spread the good news! We have Shoes On Affiliates and Area Managers <A href="http://www.nikezoom2outlet.com/">lebron james shoes</A> available countrywide, so why not <A href="http://www.nikezoom2outlet.com/Nike-Zoom-Kobe-Basketball-Shoes-IV-Black-White-Red-view-41">Nike Zoom Kobe Basketball Shoes IV Black White Red</A> them to find out more? A Heartwarming Shoe Shopping Experience When you attend a Shoes On Shoe Parties, you not only get an opportunity to shop for shoes in the luxury of your own home and save yourself the time and hassle of going to shoe shops. You can also relax knowing your children will get the right fit for their growing feet. Plus, you have a great excuse to spend quality time with your friends and family in the knowledge they will be getting quality, great fitting shoes too! So make sure you schedule your next Shoe Party with Sam and Lynne now, have friends over at your house, share a heartwarming round of drinks and stories, and most importantly, shop for perfect fitting shoes for all occasions in a setting that’s familiar, cozy and warm. <A href="http://www.nikezoom2outlet.com/Nike-Zoom-LeBron-Retro-Basketball-Shoes-Soldier-IV-Orange-White-Gray-view-105">Nike Zoom LeBron Retro Basketball Shoes Soldier IV Orange White Gray</A>

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!

Super

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!!)

me too

I have the same prob. I managed to make the _lbthumb though it doesnt't seem to work through wordpress. I can press on the thumb and the pic. (at least the effects pop up) but there is no pic. just a white box. hmm?

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

copyright (c) 2009 psd2css Online, Inc.

 

 

User login

Become a Fan of our Facebook Page

Need help or have a question?
support@psd2cssonline.com

| Privacy | Terms of Use |

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

Syndicate content