Modal Windows from Blocks?
Permalink
I want to do something that seems like it should be standard, but turns out to be very frustrating.
I have a site with several main category pages (which have sub-pages from them). The home page and each of the category pages has a content block that includes a small image and some text that flows around the image. You can see it here - I'm referring to the pages linked from the navbar at top ("Osteopathy", "Prolotherapy", etc.):
http://www.johnhjuhldo.com/
All I want to do is add a modal popup to each of those images, so that when you mouse over or click on the image, it gets bigger, then returns to thumbnail size when you click away. (The same with the Vimeo video linked from the homepage - it should play in an enlarged window.)
I cannot seem to make this work in C5. I have tried the "Zoom Image" add-on, and Pop-Up Pro, and Stack Modal. All of them do about the same thing - they will create a block in a stack or on a page, which will give you a modal window anchored to an image or text in that block. In other words, the thumbnail image sits in its own block, and the modal window comes up from that block, but there is no way to edit any of those blocks to add text. Any text has to go below the image in a separate block. This is absurd.
I have tried creating a basic content block, adding an image and text (which is what I have on those pages already), and then using the "Format Image" function in the content-editing window to add a mouseover command to the image. That seems like it should work perfectly (and doesn't require any kind of stack or add-on), but I always get an error message and it doesn't display the enlarged image.
There must be a way to generate a pop-up window from inside an ordinary block. Any ideas?
Thanks.
I have a site with several main category pages (which have sub-pages from them). The home page and each of the category pages has a content block that includes a small image and some text that flows around the image. You can see it here - I'm referring to the pages linked from the navbar at top ("Osteopathy", "Prolotherapy", etc.):
http://www.johnhjuhldo.com/
All I want to do is add a modal popup to each of those images, so that when you mouse over or click on the image, it gets bigger, then returns to thumbnail size when you click away. (The same with the Vimeo video linked from the homepage - it should play in an enlarged window.)
I cannot seem to make this work in C5. I have tried the "Zoom Image" add-on, and Pop-Up Pro, and Stack Modal. All of them do about the same thing - they will create a block in a stack or on a page, which will give you a modal window anchored to an image or text in that block. In other words, the thumbnail image sits in its own block, and the modal window comes up from that block, but there is no way to edit any of those blocks to add text. Any text has to go below the image in a separate block. This is absurd.
I have tried creating a basic content block, adding an image and text (which is what I have on those pages already), and then using the "Format Image" function in the content-editing window to add a mouseover command to the image. That seems like it should work perfectly (and doesn't require any kind of stack or add-on), but I always get an error message and it doesn't display the enlarged image.
There must be a way to generate a pop-up window from inside an ordinary block. Any ideas?
Thanks.
It's definitely not "standard". It can be done but requires a bit of configuration. You need to download a lightbox javascript library (like Fancybox for example), put those files in your theme folder, put a javascript include line in the <head> of your theme (configuring the lightbox to work on a certain CSS class).
Then when you add images to the content block, you need to insert the image (using the Conrete5 "Insert Image" button) and then reduce its size (with the TinyMCE "image" button) to get the thumbnail. Then you have to click on that image and do "Insert File", but then click on the little chain icon and change the url so it has "/download_file/view_inline/" instead of just "/download_file/view/". THEN you need to add a CSS class to that image link (not the image thumbnail) so that the lightbox javascript picks it up.
SO as you can see it's not so simple. I'd be curious to see how this kind of thing is handled in other CMS's -- I wonder if someone else has figured out a more elegant approach.
@ZDV's answer looks like it might work too, but note that you still need to insert the image thumbnail and then an image link on that (and then change the HTML source in the content editor so it gets the stuff @ZDV mentions). And you will have to have one of those modal stack blocks on the page, otherwise it won't work (because I assume the modal stack block is what's providing the javascript to make it all function properly).
-Jordan
Then when you add images to the content block, you need to insert the image (using the Conrete5 "Insert Image" button) and then reduce its size (with the TinyMCE "image" button) to get the thumbnail. Then you have to click on that image and do "Insert File", but then click on the little chain icon and change the url so it has "/download_file/view_inline/" instead of just "/download_file/view/". THEN you need to add a CSS class to that image link (not the image thumbnail) so that the lightbox javascript picks it up.
SO as you can see it's not so simple. I'd be curious to see how this kind of thing is handled in other CMS's -- I wonder if someone else has figured out a more elegant approach.
@ZDV's answer looks like it might work too, but note that you still need to insert the image thumbnail and then an image link on that (and then change the HTML source in the content editor so it gets the stuff @ZDV mentions). And you will have to have one of those modal stack blocks on the page, otherwise it won't work (because I assume the modal stack block is what's providing the javascript to make it all function properly).
-Jordan
After creating the Stacks I wanted to pop-up, on the bottom of the page I inserted a Stack Modal block for all the different pop-ups (that I wanted to use inside of other blocks)-- BUT for the "Enter Link Text" I used a single space, so they don't show up on the page.
Then after saving you can look at the source code of what Stack Modal uses to call the pop-ups. They look something like this:
Then I used that same href wherever else I wanted to use it in other blocks. Just note that the href # changes everytime you make a change to that Stack Modal block.
And I also customized the bootstrap.min.css that Stack Modal uses so it fit the look of my pages better.