Question

Lightbox only showing one image

  • 18 August 2021
  • 3 replies
  • 156 views

I have built a small blog site and have one issue left to fix. How to make the Lightbox, that opens when clicking on an image when reading blog posts, display all the images in that post, not just the one single image which is what is set now. I prefer to input the posts in WP basic editor and am not sure what widget to use in Elementor’s Single Post Blog Template, but I don’t want it to show on the page, just open/show all images in post when needed. It is a photography blog and most posts have multiple images on same topic. Thanks in advance.


3 replies

Userlevel 6
Badge +1

You need to use the Image Carousel widget (under General) to get your desired result.

Image Carousel Widget

Then follow the numbered steps as illustrated below. The fields/options that are numbered are important for achieving the result you desire.
Step 1 will take you to the media library to create a gallery; select the images for your particular post (CMD or CTRL + click to select multiple images randomly or SHIFT + click to select a block of images).

 

 

Once you’ve created your widget, you may want to save it as a global widget, since it seems you’ll be needing it for all your [similar] posts. Once you drag the global widget in to another post, unlink it and change the images to suit your post. The other settings will remain the same.

Hope that helps.

Thanks Simon for spending time replying. 

The Image Carousel widget (under General) I think is the right widget, thanks again, but it didn’t work for my site’s design / structure. I am assuming you meant for me to place the Image Carousel widget in each post, but I was wanting to use a widget in my Elementor Single Post Blog Template to Dynamically create a multiple image Lightbox of all images (of course each image set as Media Links) placed in each post. My site has no saved Elementor Pages (nor any Pages shown in WP Dashboard under Pages for that matter), only Elementor Templates and Basic Wordpress Editor created posts, I don’t want to edit/create posts in Elementor. Before I either turn off Elementor Lightbox and use a Plugin in WP Basic Editor, or build my posts is Elementor - each with its own Carousel - is there another fix? Further, I don’t want the Carousel to show on the page, so should I set a top margin of minus 600 pixels for example or is there a setting that will turn off its visibility?

Thanks so much in advance.

 

 

Before returning here I tested out making a Dynamic Global Carousel Widget Template and inserting it on the top of the page of my Single Post Elementor Template and it worked to make a correctly functioning Carousel in each post, but the original placed images are still opening in a single image Lightbox. Hmmmmm, I feel closer to my goal, and am thinking is there a way to link each image - including Feature Image - in each post to the global Carousel Dynamic widget - or to a CSS style?

 

 

After further testing, I feel I more direct technical support call or chat may be in order. Thanks, but unless a fix is evident in a reply, I’ll contact a technical support person directly. Help via forums is great, i don’t want to waste anybody’s time. BTW, the site is up with dynamic carousel working on each post - it’s poking out from top of page and before I delete the Carousel widget and revert it might help to check out the site. 

 

Thanks again in advance

 

Userlevel 3
Badge +3

@Donnie C my suggestion is that you use Advanced Custom Fields Pro to set a custom field that will dynamically include the attached images to the widgets as you would like.

Use the dynamic tag to include the images attached using the advanced custom field, to create the image carousel in the box to the left of your date, title, and author box. Set that image carousel up as @Simon Latham suggested. 

Use the same custom field to post the images after the post content.

You do all the formatting of this and adding the widgets when you build the single post template. But I think you already understand this.

This is a pretty decent tutorial on how to do this:

 

If you are still looking to solve this problem, I think I might be able to come up with the basics to make it happen in the next day or so, please let me know. 

Reply