Docs

[marykaym]

I have a page set up using Accordion Sections and 2/3 of those sections are made up of a Responsive Lightbox.

The first Responsive Lightbox section is not working, the second is. The first has the class set to the default settings and it WAS working before we changes the class on the second to “guides” and the selector on the second to “.guides”

I would expect the one I changed to not work since well, it was the one that was changed. Both were working prior to changing the second to “guides” except that when the Lightbox view was open I had both sets of images included because the lightbox class for both was “my-portfolio.” We reviewed the documentation, and updated the second lightbox to “guides.”

The page is behind a membership set up but I can send access if necessary. However, here is a view of what is happening. http://www.screencast.com/t/RQTFRo6V9

The first part of the screencast is Chrome and the second if Firefox. As you can see the issue is intermittent and from Firefox I did get the Lightbox to open, but then it reverted to just flashing when clicked. In chrome if I get the Lightbox to open, it sticks and I can neither progress through the images nor close the Lightbox.

I’ve also attached the html code from the page text editor. We are not using Cornerstone for this page.

Thanks
MaryKay

[Christopher]

Hi there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[marykaym]

This reply has been marked as private.

[Christian]

Please try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Thanks.

[marykaym]

I pushed the site to staging and turned off every third party plugin. Same results. So it’s not plugin incompatibility.

[Rad]

Hi there,

I checked and they aren’t working because they are just images. You have to enable your image link by adding link=”true” to your image shortcodes.

Thanks!

[marykaym]

Hi Rad,

Um… actually, I am seeing link=”true” in the image shortcodes so I don’t think that is the issue.

Example: [image class=”my-portfolio” src=”http://members.drericz.com/wp-content/uploads/2016/11/joyful.jpg” alt=”Joyful” type=”thumbnail” link=”true” href=”https://s3.amazonaws.com/eoclub/eoc+images/diffuser+blend+joyful-copy.jpg” title=”Joyful”]

I REALLY need to get this working. 😛

Thanks~
MaryKay

[Lely]

Hello MaryKay,

Please add x_ on the beginning of the shortcode. For example something like this:

[x_image class="my-portfolio" src="http://members.drericz.com/wp-content/uploads/2016/11/joyful.jpg" alt="Joyful" type="thumbnail" link="true" href="https://s3.amazonaws.com/eoclub/eoc+images/diffuser+blend+joyful-copy.jpg" title="Joyful"]
[x_lightbox selector=".my-portfolio" deeplink="true" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="horizontal" thumbnails="true"]

See Lightbox Test page. x_ is now added on all shortcodes.

Hope this helps.

[marykaym]

Added. No change. So very odd. :/

[Lely]

Hello MaryKay,

The only way to check where the issue is coming from is too dissect the code.
Like this part:
[image src="<img class="aligncenter size-full wp-image-1358" src="http://members.drericz.com/wp-content/uploads/2016/12/Thanksgiving_2016_SlideDeck_Cover.jpg" alt="thanksgiving_2016_slidedeck_cover" width="720" height="540" />" alt="Health Happy Holidays with Essential Oils" type="thumbnail"]
As you can see, the source parameter is set to be an image which is wrong.
Should be something like this:
[x_image src="http://members.drericz.com/wp-content/uploads/2016/12/Thanksgiving_2016_SlideDeck_Cover.jpg" alt="Health Happy Holidays with Essential Oils" type="thumbnail"]
There are other image with the same issue. Then other shortcode doesn’t have x_.

I did try one part of your code which is a block grid. See this below:

[block_grid type="two-up"] [block_grid_item] [x_image class="my-portfolio" src="http://members.drericz.com/wp-content/uploads/2016/11/motivation.jpg" alt="Motivation" type="thumbnail" link="true" href="https://s3.amazonaws.com/eoclub/eoc+images/diffuser+blend+motivation.jpg" title="Motivation"] [x_button shape="rounded" size="small" float="center" href="https://s3.amazonaws.com/eoclub/eoc+images/diffuser+blend+motivation.jpg" title="Motivation" target="blank" info="tooltip" info_place="top" info_trigger="hover" info_content="Click to Download"]<strong>[x_icon type="cloud-download"]</strong>Click to Download[/x_button][/block_grid_item] [block_grid_item] [x_image class="my-portfolio" src="http://members.drericz.com/wp-content/uploads/2016/11/grounding.jpg" alt="Grounding" type="thumbnail" link="true" href="https://s3.amazonaws.com/eoclub/eoc+images/diffuser+blend+grounding.jpg" title="Grounding"] [x_button shape="rounded" size="small" float="center" href="https://s3.amazonaws.com/eoclub/eoc+images/diffuser+blend+grounding.jpg" title="Grounding" target="blank" info="tooltip" info_place="top" info_trigger="hover" info_content="Click to Download"]<strong>[x_icon type="cloud-download"]</strong>Click to Download[/x_button][/block_grid_item] [block_grid_item] [x_image class="my-portfolio" src="http://members.drericz.com/wp-content/uploads/2016/11/purpose.jpg" alt="Purpose" type="thumbnail" link="true" href="https://s3.amazonaws.com/eoclub/eoc+images/diffuser+blend+purpose.jpg" title="Purpose"][x_button shape="rounded" size="small" float="center" href="https://s3.amazonaws.com/eoclub/eoc+images/diffuser+blend+purpose.jpg" title="Purpose" target="blank" info="tooltip" info_place="top" info_trigger="hover" info_content="Click to Download"]<strong>[x_icon type="cloud-download"]</strong>Click to Download[/x_button] [/block_grid_item] [block_grid_item] [x_image class="my-portfolio" src="http://members.drericz.com/wp-content/uploads/2016/11/nourish.jpg" alt="Nourish" type="thumbnail" link="true" href="https://s3.amazonaws.com/eoclub/eoc+images/diffuser+blend+nourish.jpg" title="Nourish"][x_button shape="rounded" size="small" float="center" href="https://s3.amazonaws.com/eoclub/eoc+images/diffuser+blend+nourish.jpg" title="Nourish" target="blank" info="tooltip" info_place="top" info_trigger="hover" info_content="Click to Download"]<strong>[x_icon type="cloud-download"]</strong>Click to Download[/x_button] [/block_grid_item] [/block_grid]
[block_grid type="two-up"][block_grid_item][x_image class="my-portfolio" src="http://members.drericz.com/wp-content/uploads/2016/11/joyful.jpg" alt="Joyful" type="thumbnail" link="true" href="https://s3.amazonaws.com/eoclub/eoc+images/diffuser+blend+joyful-copy.jpg" title="Joyful"][x_button shape="rounded" size="small" float="center" href="https://s3.amazonaws.com/eoclub/eoc+images/diffuser+blend+joyful-copy.jpg" title="Joyful" target="blank" info="tooltip" info_place="top" info_trigger="hover" info_content="Click to Download"]<strong>[x_icon type="cloud-download"]</strong>Click to Download[/x_button][/block_grid_item][block_grid_item][x_image class="my-portfolio" src="http://members.drericz.com/wp-content/uploads/2016/11/gratitude.jpg" alt="Gratitude" type="thumbnail" link="true" href="https://s3.amazonaws.com/eoclub/eoc+images/diffuser+blend+gratitude.jpg" title="Gratitude"][x_button shape="rounded" size="small" float="center" href="https://s3.amazonaws.com/eoclub/eoc+images/diffuser+blend+gratitude.jpg" title="Gratitude" target="blank" info="tooltip" info_place="top" info_trigger="hover" info_content="Click to Download"]<strong>[x_icon type="cloud-download"]</strong>Click to Download[/x_button][/block_grid_item][block_grid_item][x_image class="my-portfolio" src="http://members.drericz.com/wp-content/uploads/2016/11/energy.jpg" alt="Energy" type="thumbnail" link="true" href="https://s3.amazonaws.com/eoclub/eoc+images/diffuser+blend+energy.jpg" title="Energy"][x_button shape="rounded" size="small" float="center" href="https://s3.amazonaws.com/eoclub/eoc+images/diffuser+blend+energy.jpg" title="Energy" target="blank" info="tooltip" info_place="top" info_trigger="hover" info_content="Click to Download"]<strong>[x_icon type="cloud-download"]</strong>Click to Download[/x_button] [/block_grid_item][block_grid_item][x_image class="my-portfolio" src="http://members.drericz.com/wp-content/uploads/2016/11/calming.jpg" alt="Calming" type="thumbnail" link="true" href="https://s3.amazonaws.com/eoclub/eoc+images/diffuser+blend+calming.jpg" title="Calming"][x_button shape="rounded" size="small" float="center" href="https://s3.amazonaws.com/eoclub/eoc+images/diffuser+blend+calming.jpg" title="Calming" target="blank" info="tooltip" info_place="top" info_trigger="hover" info_content="Click to Download"]<strong>[x_icon type="cloud-download"]</strong>Click to Download[/x_button][/block_grid_item][/block_grid]

[x_lightbox selector=".my-portfolio" deeplink="true" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="horizontal" thumbnails="true"]

When I tried the part only on my test site, it is working. But trying all the codes at once, lightbox is not working. This means that the error is on another part. There’s too much shortcode and it easy to get wrong if we just missed part of it. I would suggest to use a Cornerstone to build the page so it is to check.

Hope this helps.

[Author]

Posts