If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
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.
This 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.
Post Tags: lightbox js , wordpress-plugin
Stumble it!
20 responses so far ↓
1 Paul Escobedo (28 comments.) // Oct 31, 2007 at 12:05 pm
I love this. Do you think that we would be able to use this and still have it linked to a website?
2 Dave Smith (445 comments.) // Oct 31, 2007 at 12:20 pm
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 Paul Escobedo (28 comments.) // Oct 31, 2007 at 12:57 pm
Thank you I appreciate the help.
4 Scott Ficek (40 comments.) // Oct 31, 2007 at 7:52 pm
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 Dave Smith (445 comments.) // Oct 31, 2007 at 7:55 pm
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 Boston Condo Guy (2 comments.) // Nov 1, 2007 at 8:28 am
On a similar note, do you have a favorite plugin for caching home pages to increase overall load time of your blogs?
7 Dave Smith (445 comments.) // Nov 1, 2007 at 9:16 am
Never heard of it. What is the advantage? Especially since most blog home pages are changing daily.
8 Boston Condo Guy (2 comments.) // Nov 1, 2007 at 10:53 am
The WP-Cache plugin for instance. Just wanted to get your thoughts on something like this.
9 Dave Smith (445 comments.) // Nov 1, 2007 at 11:01 am
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 Eric Blackwell (42 comments.) // Nov 4, 2007 at 5:43 am
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 justin (1 comments.) // Nov 8, 2007 at 12:59 pm
Very cool plugin. I could see using this on a property listings site too.
12 Scott Ficek (40 comments.) // Nov 9, 2007 at 8:14 pm
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 Dave Smith (445 comments.) // Nov 9, 2007 at 8:58 pm
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 Scott Ficek (40 comments.) // Nov 9, 2007 at 9:03 pm
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 Dave Smith (445 comments.) // Nov 9, 2007 at 9:56 pm
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 Scott Ficek (40 comments.) // Nov 9, 2007 at 9:59 pm
Good thought. I will check it out.
17 Uncle Jack (1 comments.) // Nov 25, 2007 at 1:21 am
I’m going to try the plug in on my worst mls photo of the day posts.
18 Saint Croix (1 comments.) // Jan 26, 2008 at 10:50 am
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 Rick (1 comments.) // Mar 5, 2008 at 10:04 am
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 Dave Smith (445 comments.) // Mar 5, 2008 at 3:01 pm
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.
Leave a Comment