Greetings! I have a question as to whether something is possible (and how to approach it).
What i would like to do, is have a button/image that leads to a popup of that image (like lightbox does) EXCEPT i would like to be able to have some formatting in that “lightbox.” (example, a title, description as well as the image in the “popup” and for some, perhaps a link to another page?)
I am not sure if i described this clearly enough. But is that possible? The end goal is a “portfolio” site.
You could create your pop-up as a modal. That can include the larger image, text, links, buttons, whatever you want. The modal can be triggered from any element, including a smaller thumbnail image. It works like the lightbox, but it doesn’t allow a gallery to be created where images can be advanced in the lighbox.
interesting! ill have to look around to find out where to start 
Although you can have triggers that close and open another modal to fake a lightbox effect.
dude you are a genius… thats PERFECT! i do have one, kinda stupid question. Lets say i put a forward and backward button to go between modals. How do i get the new modal to show up on top? (presently i have gotten it to summon the second modal, but it puts it behind the first)
I’m away from my Mac but there was a thread about this last year that has the method of achieving this.
From memory it was just an attribute.
@sfoster71 Cant help you on that one. We’ll have to wait for our friend @PeteSharp to get to his computer and post us the magic solution.
Hey @sfoster71
Check this thread.
[SOLVED] Move to next modal, close previous one - #4 by Malachiman
thanks! it works GREAT! I do have a little hiccup to try to nail down. But here’s what i have so far.
scroll down to the “print” section and click on a button. The pop-up works, with an image, text underneath, and then two buttons that go between a string of popups (with rollovers!). On a few i have a lightbox on the main image that works without a hitch too!
I have a little more experimenting to do, but thanks you guys!
Just an observation: Try and keep all your modals the same size so they don’t jump to different sizes between clicks. Also, don’t use the fade-in effect - this adds to the “uncomfortable” feel of the transitions between modals.
good point! i was wondering what was causing the hiccups. As for the size. How do you make it uniform?
You can set a custom class on your modal to give each modal the same height and width. Furthermore, you will be able to change these dimensions for each breakpoint. Best to have models display at the LARGE size when using a custom class to size them. This way, you won’t inadvertently set a size that exceeds the general display dimensions.
I generally make use of the areas too, so I would put the navigation arrows in the modal footer (remove the footer styling). And set a fixed of max dimension for the images.
how does one remove the footer styling?
i am on the ropes again. can someone look and tell me why the image has loading issues now? Before i tried the size adjustment for the modal, the image didnt pop on after the movement. now it does? help? im stuck
These are the steps you need to follow: Start by placing a full width structure bloc on the page. Add a modal bric - it will automatically adjust to the full width of the containing column.
With the Modal selected, create a custom class and make the following adjustments in the class editor:
By setting a size and then having the left and right margins set to auto, your modal will always remain in the centre of the column.
Your modal now has a fixed size so it will remain the same size regardless of content.
To style the footer, select modal footer as shown below and creat another custom class. In the paintbrush tab, set the background colour you want and any borders.
Next add your content (buttons, images text etc). Make sure that everything sits within the modal. When you place an image, you should adjust its width so it looks good in the modal. The idea being to ensure that the height of the image doesn’t extend into the footer area.
Once your actual image has been placed in the image placeholder, you can adjust the position of the final image by creating another custom class:
When all is well with your first modal, duplicate it as shown below:
You will now have a number uniformly designed modals - all the same size and shape.
Replace the content on your duplicates. Be sure to make all your images the same size before adding them to the modal. If your images are all different orientations or sizes you will have to add more custom classes to each individual modal to get the images to fit within the available space. Personally, I would set a standard orientation and size and then use an image editing app to create uniformly sized images. This may mean that portrait images have to be centred within the image canvas creating white space on either side, but this is a minor issue. You can always link your images to a lightbox so that the original full size image can be displayed if the user wishes to.
Finally, switch to your other breakpoints and adjust your custom classes to better suit the other device screens. Remember, because you have used the same custom classes on all your modals, adjusting those classes on other breakpoints will apply the changes to all the modals.
dude! THANK YOU for rescuing me! I was a bit beat down on this. you are a genius!
That pretty much hit all the problems (other than the random show stopping bugs i keep running into. Have a button that will on occasion loose its image, and or the video its linked to. Totally randomly. Im not even touching it.)
i did end up adding the animation style fade in to try to help visually cover up the “late pop in” of the image. Not sure why it was doing that (its not large).
But other than that (and my web site host picking this time to break as well). I think im good. Take a look if you could and thank you again!
@sfoster71 Send us the link - we’ll see what it looks like and maybe we can sort the remaining problem. Even better, if you have the blocs file to send (with assets embedded) we can take a look for you.
im not sure how to “embed assets”. Would like to, but couldnt find a button, with the movies it would pretty large id think. Anyhoo… www.sfostergraphics.net (the print section). Im trying to get a job…heh.
Looks just fine here on the image front - The video’s are a little bit slow but I guess that’s something to do with Vimeo delivery. Did you try uploading to YouTube to see if their delivery system is any better?
Embedding assets can be done in the blocs file menu. just select the option to embed all assets in project. It won’t embed the videos because they are hosted elsewhere.
