0

all my nodes have an image added to them (uploaded the usual way when creating new content for a content type), so when the viewer is viewing the node they can see the image inline with the text.

It's styled to look nice, but the image is small, and sometimes a user might want to see the details of the image more clearly (however we still want to keep it small on the page by default).

So I was thinking it would be nice for the user to be able to click the image and have the image get larger (possibly as a pop-up or overlay) on the page.

My research led me to Lightbox2 and so I installed that module. I enabled it and when into the settings in the configuration page and made sure it's loading on all pages. I also made sure the setting for 'Automatic Image Handling' > 'Image Node Settings' was set to 'Lightbox'. [I actually tried all of the options available there]. I then cleared the cache as usual.

It seemed all too simple no doubt. And indeed I went to one of my nodes and clicked on the image and nothing happened.

Can someone please help me configure Lightbox2 correctly to achieve my objective? (or perhaps give me an alternative solution).

Thanks!

1

Colorbox and lightbox are the famous modules for this, once you done with all configuration, go to Content type Manage display settings tab and render the image in lightbox. it will automatically shows up in the popup. http://i.imgur.com/KA69Iqu.png

1

Are your images inside the node's body? (Ex: added them using CKeditor or some other Wysiwyg editor) or did you added them as an image field?

It doesn't work out of the box if they are inside the nodes body. Works out of the box only if they are an image field, I believe.

According to the readme.txt file you need to add rel="lightbox" to your <a>

    ADDING LIGHTBOX FUNCTIONALITY TO YOUR IMAGES
--------------------------------------------
No Grouping
===========
Add rel="lightbox" attribute to any link tag to activate the lightbox.
For example:
<a href="images/image-1.jpg" rel="lightbox">image #1</a>
<a href="images/image-1.jpg" rel="lightbox[][my caption]">image #1</a>

Optional: To show a caption either use the title attribute or put in the second
set of [] of the rel attribute.

With Grouping
==============
If you have a set of related images that you would like to group, follow step
one but additionally include a group name between square brackets in the rel
attribute. For example:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip][caption 2]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip][caption 3]">image #3</a>

No limits to the number of image sets per page or how many images are allowed
in each set. Go nuts!

If you have a set of images that you would like to group together in a
lightbox, but only wish for one of these images to be visible on your page, you
can assign the "lightbox_hide_image" class to hide the additional images.  For
example:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]" class="lightbox_hide_image">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]" class="lightbox_hide_image">image #3</a>

Slideshow
=========
This is very similar to the grouping functionality described above.  The only
difference is that "rel" attribute should be set to "lightshow" instead of
"lightbox".  Using the same example as above, we could launch the images in a
slideshow by doing:

<a href="images/image-1.jpg" rel="lightshow[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightshow[roadtrip][caption 2]">image #2</a>
<a href="images/image-3.jpg" rel="lightshow[roadtrip][caption 3]">image #3</a>
  • thanks for the detailed reply. I was looking for the other answer provided below. In my case I didn't want to have to use 'rel' because that would require my authors to have to use it too - and html is not their thing. so the content type setting was the right solution for me. – Sage Oct 28 '15 at 23:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.