How do I do this? Any help would be great...

Hi There,

I have a client that I'm working with at the moment and they have a request that I'm a bit unsure of how to implement.

Basically, they're having a section on their website where they want basically a grid of images with a title above and a couple of bits of text underneath. When the image is clicked on, they want a lightbox / new window (ideally something that looks nice so JQuery / Ajax powered) with more information about the event in.

My idea was to use the GetResources plugin and set it up like a blog where they just duplicate a resource everytime they have something new to add. That way, I could include a snippet that just pulls in the latest 'blog posts' from the snippet and the only additional bit we would require is the Ajax / JQuery popup.

Would others agree that this is the best way to do this?

I'm not a PHP Developer and I'm not quite sure how the best way to implement the pop up would be? If anyone could shed some light on that bit, I'd really appreciate it!!

Thank you in advance.
Lewis

The popup would be pure JQuery; there are a ton of these to choose from.

You might also want to look into using a MIGx multi-grid template variable; https://forums.modx.com/thread/76665/tutorial---jquery-ajax-gallery-with-migx

Thanks for the reply.

Ok, but could I pull the MODx resources up in a JQuery window? Really, the client wants to be able to add additional videos, information and pictures to the main picture. So my idea was to use the Blog (GetResources) plugin, run it like a blog but try and get it to popup in a lightbox.

Many thanks
Lewis

That does sound a bit complicated for just a lightbox overlay. I would say your idea of resources and getResources would be the way to go.

I wanted to try and get it into some kind of Popup window though that is looks nice instead of just a generic popup. I think the getResources system will work, I just need to get it to popup in some kind of JQuery window.

Does anyone have any ideas?

Many thanks,
Lewis

This is probably what you are looking for. http://jquerytools.org/demos/overlay/index.html

I like highslide for this type of stuff http://highslide.com/

See http://www.tescomedia.com/case-studies/case-studies.html?key=tagMediaPack&tag=i26d

Each case study is a resource.

The pop content can be anything including videos as in http://www.tescomedia.com/

Quote from: sparkyhd at Jul 25, 2012, 05:45 AM

I like highslide for this type of stuff http://highslide.com/

See http://www.tescomedia.com/case-studies/case-studies.html?key=tagMediaPack&tag=i26d

Each case study is a resource.

The pop content can be anything including videos as in http://www.tescomedia.com/

Hi Mark,

This is exactly what I'm looking for. Have you any experience in pulling this through into the GetResources plugin?

From looking at the install section, all I need to do is install the script and then add to the URL's with this:



Would that be correct?

I'll start having a play around now and post code updates if I get it working. Thanks for your help guys!

Cheers,
Lewis

Yes, it's done with getResources

You need to check the highslide documentation and examples. In the example above I'm using ajax so the contents of the pop-up are pulled from the resouce when clicked. The getResources tpl is

The trick is to choose the popup or overlay you want, and see what kind of HTML it uses. Then you use getResources and its tpl to generate that HTML content.