Lightbox your way to a quicker load

I like big photos. I like them to fill as much of the space on the screen as possible. On an individual post the page size by K isn’t too bad with large images. But when there are 5 to 10 posts on the home page all with images on them, it can bloat the size of your home page and make it very slow to load.

tucson ostrichThis is where the compromise comes in. About a month ago I installed Lightbox JS v2.03.3 Plugin which allows me to display a small image on the blog post which becomes a much larger image when clicked. The advantage. Only the small image is actually a part of the post keeping the page size much smaller. The large images is stored on the server and a link connects it with the smaller image. The end result, the home page is smaller, loads faster.

Ways you can use Lightbox JS to keep your readers coming back and entertained.

  • Put only a portion of a picture on the post complete picture on click
  • Ask a question in the first image answer it in the second
    (make sure you put all text that appears in the images in the post as well)
  • Display a small graph or chart which is much larger and easier to read when clicked.

It is easy for your blogs home page to experience some bloat if you have some large images in the posts displayed on the home page.

Another reason I like this plugin. I can make the image even larger than would fit in the post area. The plugin turns the background screen black making it easier to view the images. It has good navigation. Click on the black the window closes. If there is another image in the set mouse to the right and click, back mouse to the left click. Here is an example post with several images using a couple of the techniques outlined above. Have you Got a Question about Tucson Real Estate. Don’t read the post just click on the images to see this plugin in action. Notice how just the tip of Snoopy’s nose is in the first image but the full shot in the larger. (okay, I held your hand on that one).

The process is a little more time consuming, but the results can be stunning and open up new possibilities for your blog or website.

You can create gallery pages with a table of the thumb images and linking them in the code so they are in a group for next and previous viewing. Or you can set each image separate so only that image is viewed when it is clicked.

I’m experimenting on a couple of sites right now with different size thumb images in a table which display in larger format. One example of this is found at Tucson Custom Home Builder Here you see rather large thumbs in a table. Click on the first image and it opens up and you can then view all the images in the table.

More than just a single blog post you might want to focus on a particular historical location or subdivision and create a gallery page with images linked to a blog post. This lets you provide more images and information than you would in a typical post. You can set these up as pages on your site instead of posts.

I’m not one for reinventing the wheel so I have a sample code snippet I keep which I copy and past then change the image names in the code along with the title and alt tags as well as the align=”” for location. This cuts down on the typing considerably and I don’t have to remember the specific syntax.

I’m still looking for a program to create batch thumbs that I like. For now I’m doing it all manually for each image. This part is time consuming. I’m sure I’ll find a way to make the process go faster as I intend to do more of these kinds of pages on the various sites.

There are a lot of different lightbox plugins. I tried many of them before picking this one for size and functionality.

Comments

  1. I love this. Do you think that we would be able to use this and still have it linked to a website?

  2. Paul,

    Yes, I found a site for Lightbox2 which will work on a web site that is not a blog. It isn’t as simple since you have to put code in place in the CSS stylesheet and make reference to files in the header, but it can be done on a site that is not a blog. Here is the link: http://www.huddletogether.com/projects/lightbox2/

  3. Thank you I appreciate the help.

  4. Dave-
    Have you thought about Paint Shop Pro for creating thumbnails. It has a file batch process capability. You can save scripts to process. I have not used it for thumbnails, but I use it all the time.

  5. Scott,

    I don’t have a copy of it. So far my issue has been different sizes of images and a mix of landscape and portrait images being made into different size thumbs.

    I downloaded a couple of thumbnail programs but found them more complicated than doing it by hand.

    I have fireworks and Photoshop elements as well as Capture NX. I’m sure one of those can do it.

    Let’s see where did I put that spare time. . .

  6. On a similar note, do you have a favorite plugin for caching home pages to increase overall load time of your blogs?

  7. Boston,

    Never heard of it. What is the advantage? Especially since most blog home pages are changing daily.

  8. The WP-Cache plugin for instance. Just wanted to get your thoughts on something like this.

  9. Anybody want to weigh in on WP-Cache or others plugins like it?

    I really have no experience other than I’ve heard of serious issues with the WP-Cache program before.

    But this one is totally out of my frame of reference.

  10. I will test out the cache plugin later today…and send back a report…never had experience with it either, but happy to check it out.

    As for the Lightbox, I like it…May I point out the obvious–click on the ostrich to get the full effect…

    I still cut mine out the old fashioned way…by hand, but I am looking for a more efficient alternative as well. Fireworks is it for now…

  11. Very cool plugin. I could see using this on a property listings site too.

  12. Dave-
    Was cruising WordPress.org for some tool that would allow me to list all my posts on one page (I am always looking to link to a post)….but that is another discussion.

    Found this plug-in. Not sure if it could help your above thumbnail situation. http://wordpress.org/extend/plugins/alakhnors-post-thumb/

  13. Scott,

    I’m now using a gallery to display images using thumbs. I’ll write about this week.

    If you want your posts in the sidebar, then check out this post on Archives in your sidebar.

  14. Actually, I should have been more clear. When I post, I like to reference my other (older) posts where appropriate in the body of the new post. With about 75 posts currently on my site and the admin tool only showing 15 at a time (using Manage/posts), I get frustrated clicking next page all the time looking for that one post that I want to reference.

    I was hoping someone else had written a plug-in for the admin tool that allowed me to get 100 posts displayed at a time.

    Maybe I just need to tweak that admin code a little bit (in my spare time)!

    Thanks.

  15. Scott,

    Why not just use Contextual Related Posts Plugin and let the plugin take care of it for you?

    If I want to reference a post myself. I just look at my archive page till I find the post. It is much faster than using the admin page.

  16. Good thought. I will check it out.

  17. I’m going to try the plug in on my worst mls photo of the day posts.

  18. Dave,
    here is what you are looking for to make thumbs fast and clean. This is easy to use ( hence the name) fast, and clean. It does batch like sliced bread.

    http://www.fookes.com/ezthumbs/index.php?2.6

    I have to make huge amounts of thumbs because my clients always want something to click on and get a ” full screen” shot.
    I never give them full screen because it takes way too long, and they would complain that it is now slow. I work hard at explaining the lesser of evils when creating their web pages. Light box Is a java script, and even if you are a JS guru, it will slow down. However it offers the best way to display a large format with out clutter.

    Hope this helps.

  19. Thanks for the plugin, I have a blog that I publish a lot of pictures on and I’d like for the main page to load quickly.

    I was wondering, if I’m using thumbnails for my pics.. does that take as much time to load for my visitors as a larger (non-thumb) image?

  20. Rick,

    No it doesn’t. The page will load much quicker with those thumbs.

    Another thing you can do to make your homepage of the blog load quicker is to limit the number of posts shown on the homepage. If you have a lot of large images in posts you might consider a limit of 5 to 7 posts displayed on the home page.

    I see some blogs with 50 posts on the home pages and they take a very long time to load with images.

  21. I am not familiar with lightbox, but my developer turned me on to viva zoom and it has worked really well for me. I am still new to the blog world so I rely on him for info to certain plug ins. I have not run into loading issues from the amount of photos. Viva Zoom resizes them for the page automatically. I hope this helps.

    Tim Daviss last blog post..The Video I sent to Our Realtors Today

  22. I use W3 Total Cache. Seems to work perfectly. I jumped over to it when I saw that Matt Cutts uses it on his blog. 🙂

  23. Dan,

    What the heck are you talking about? You should read this post. It has nothing to do with cache programs.

    Dave

  24. Dave,
    I read the post AND the comments. I was responding to your comment, “Anybody want to weigh in on WP-Cache or others plugins like it?”

  25. Dan,

    I’ve been on the road for a couple of days so had to get back to this post. Now I see what you were commenting about and WP-Cache. It really isn’t what the post is about but a question from another reader. And did you notice this post was from 2007? My question was about WP -cache as I wasn’t familiar with it back then, and W3 Total Cache I don’t believe even existed back then.

    When your comment came in I re-read the entire post (but did so from the editor where I couldn’t see the comments) and found no reference to a cache program, thus my question on did you read the post.

    Maybe a reference to the comment left would have helped (especially since it is over 4 years old and many, many posts and comments have flowed over the dam since.)

    Glad you are still finding value in these old posts.

    Dave