Lightbox chunk

50 Posts

Shyflower Reply #1, 12 years ago

What I want to do is call a chunk to a lightbox or popup after clicking on one of four images. Here's a screenshot:

Alternatively, I could call a chunk into an i-frame, but I haven't found any documentation on using iframes with Modx.

This question has been answered by sottwell. See the first response.

Linda Jenkinson

discuss.answer

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 12 years ago

MODX doesn't care what kind of iframes or javascript 'lightbox' effects you use.

Basically, you need to decide which javascript application you want to use, and examine the HTML it expects. Then use an appropriate listing snippet, such as getResources, pdoResources, getImageList (if using MIGx), and make this snippet's output tpl generate the structure the javascript application expects, using the snippet's placeholders for the dynamic content of each block.

For example, I like the JQuery Cycle2 plugin (a JQuery plugin, not a MODX plugin!). Here is a site under construction using it - http://findisrael.com/. The getAlbum snippet provides a validated docid property from the $_GET.

My getImageList snippet looks like this

<div id="slider" class="grid">
  <div class="cycle-slideshow col_12">
    [[getImageList?
      &tvname=`resourcealbum`
      &tpl=`sliderTpl`
      &docid=`[[getAlbum]]`
    ]]
  </div>
</div>

And the sliderTpl chunk looks like this:

<img src="[[+image:pthumb=`w=1000&h=312&zc=T`]]" data-cycle-desc="[[+title_[[++cultureKey]]]]" alt="">

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

50 Posts

Shyflower Reply #3, 12 years ago

Quote from: sottwell at Sep 25, 2014, 01:05 AM

MODX doesn't care what kind of iframes or javascript 'lightbox' effects you use.

I am familiar with other lightbox programs, and I looked at the link you left, but what I need is a lightbox that will output an html chunk of content, not an image. The images will just act as buttons. Click one and the user should get a description of the book. I have found a couple of lightboxes that might work. I just need to try them out. I would have preferred to use the Gallery plugin, but I don't believe it will output html text.

Thanks for the reply. You did reinforce my thought that Modx should work with any type of javascript.

Linda Jenkinson

436 Posts

Dan Reply #4, 12 years ago

I always use Magnific Popup: http://dimsemenov.com/plugins/magnific-popup/

You can inject HTML/MODX Resources into it with AJAX.

☆ A M B ☆
24,524 Posts

sottwell Reply #5, 12 years ago

Same principle applies. You should be able to use Gallery, just adjust its output tpl to output the HTML that your application expects.

In some cases, like most JQuery tab generators, you may have to use two different snippets, one to generate the "links" list (in your case the list of images that act as the triggers) and one to generate the "content" list.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

Answered Lightbox chunk