I just found out this trick to make your WordPress image upload automatically shown in Lightbox. In order for this trick to works, you need to install NextGen Gallery plugin into your WordPress installation. This doesn’t mean we upload the image into NextGen Gallery, then show the gallery in the post.

Normally, when after we uploaded image to WordPress we are going to see this dialog:

After added the image into Post, we are going to see this added into editor:

<a href="http://sodeve.net/wp-content/uploads/2012/10/ec2.8.png">
  <img src="http://sodeve.net/wp-content/uploads/2012/10/ec2.8-300x178.png"
  alt="" title="ec2.8" width="300" height="178"
  class="aligncenter size-medium wp-image-2980" />
</a>

In above code, whenever a visitor clicked the thumbnail, the page will load the image in full size. Which is bad, because when the visitor wants to continue reading, he/she needs to go back to the page.

To make the image shown in lightbox, we just need to add class shutterset_set_X into the image. Please change the X into a number. This way you can group the images in lightbox accordingly.

<a href="http://sodeve.net/wp-content/uploads/2012/10/ec2.8.png"
class="shutterset_set_1">
  <img src="http://sodeve.net/wp-content/uploads/2012/10/ec2.8-300x178.png"
  alt="" title="ec2.8" width="300" height="178"
  class="aligncenter size-medium wp-image-2980" />
</a>

That’s all folks! If the trick is useful, please share it away. If it doesn’t work on your blog, drop a comment and we’ll see what we can do.

Cheers!

Incoming Search

css, javascript, wordpress