100
Lost something?
Who writes here?

Arian Simon

Web Designer - Business Owner - Entrepreneur who makes happy little mistakes.

Read more about me

BLOG POST

How To Make Beautiful Image Popup Functions (WordPress Lightbox Plugins & CSS Tutorial Link)

If you have images on your website you sometimes don’t want them to take over all available space.

However if you make them too small, your website visitors may not be able to view them at their full glory (or read the text on your image). So how do you make them small and space saving while not destroying your viewer’s experience?

The answer are image popups – so called lightboxes.

Click on following image to see my lightbox doing work:

Wordpress Lightbox Plugin

How To Implement Image Popup Functions

You have two options. Either you can implement your image popup functions through WordPress lightbox plugins (I guess Joomla and Typo3 have lightbox plugins too) or you can do it manually via CSS or Javascript. Plugins are definitely the easier option and if you are new to web design I highly recommend using this option.

Free WordPress Lightbox Plugins

Definitely the easier option. I use them myself on CreateTopNotchWebsites.

Here is a list of great free WordPress Lightbox Plugins:

Premium WordPress Lightbox Plugins

If you seek premium designed lightboxes with one or two extra features I recommend following plugins:

  • Lightbox Evolution – Beautifully designed, lot’s of sales and great ratings.
  • Popuppress – A feature rich popup solution which also includes lightboxes for images. Includes views tracking.
  • iLightBox – Supports videos as well. Beautiful design templates, social sharing icons for images and more. Definitely cool for photographers.
  • JackBox – Social sharing icons and retina ready. An alternative to iLightBox.

Do It Yourself Tutorial

If you don’t want to use plugins you can also create your own lightboxes on click or even on hover. I found this really cool tutorial on CSS image hover popups. The only downside is that it most likely needs a lot of tweaking to work perfectly on mobile devices.

Here is the link:

Wrapping Up

Image popups aka lightboxes provide a great way to use space saving image sizes while not reducing your viewer’s viewing experience. You can either use plugins to implement lightboxes, or build them on your own via CSS (or javascript).

Cheers,
Arian

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest