Support Center Visit Demo License manager Buy @ envato

How to activate the lightbox feature on images in portfolio

yadiyadayadiyada
in Visual Composer
HI Guys
Using the template builder we have added pages and 4 columns with image boxes inside each column. We are wondering how we activate the lightbox popup feature on each of the images placed inside the image box.
An example can be sen here
at the bottom of the page there is images attached to the folio item that is being viewed.
Can we have them pop up as a lightbox?
Thank you

Comments

  • PabloPablo
    Hello,
    We do have shortcode, which allows you to create the popup, try it, insert it into the column item.
    [button title="Button" link="#you-custom-id" target="_blank" class="" download="" rel="lightbox" onclick=""]
    <div id="you-custom-id" style="display:none">CONTENT HERE</div>

    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • yadiyadayadiyada
    Hi guys and thanks for the reply. The shortcode above I added and it produced a button. Not sure if we are on the same track.

    I have attached an image of what we are trying to do. I am thinking perhaps the image box is not the best option to create what we need and that portfolio shortcodes may be better.

    Any advice on the best way to achieve what we need would be greatly apprecietdimage
  • yadiyadayadiyada
    Hopefully that makes sense. Let me know if you need a a more in depth description
  • PabloPablo
    edited October 2019
    Sure, I understand.
    But If you have these images (image item) in the portfolio item, then they should be able to click, to display them bigger in the lightbox, but you have to add the "Zoomed image" in the image item settings

    But, if you would like to display more informations, not only the image, you can use that code I sent you.
    You have to change the button to a tag with image inside - but your href in a link should be the same as link in button shortcode.

    I hope it's clear.
    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • yadiyadayadiyada
    http://md-a-co-uk.stackstaging.com/residential-architecture/abernethy-house/

    Fantastic. They are working now. Your explanation was fantastic. Would it be correct to say that each of the following settings change the page weight. For example if I choose image | size Full image would this result in a bigger page size than selecting a smaller image such as image | Size medium.
    What would you recommend I choose here.
    Also could we add a navigation to the zoomed image so it could flick through each of the images on the page when in zoomed mode.
    Thansk
  • PabloPablo
    The difference of page weight will not be that big between sizes (of course if you're using the JPG extension) - do not worry about it.
    These sizes are usually used for making the website look better and to standardise the images on website.

    Also, the zoomed images cannot flick through the images in the image item, you would have to use different item for that purpose.
    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • yadiyadayadiyada
    Great stuff I will give this a try.
    we fancy the first example and wondered how we add this to the page. We are working in the muffin builder and wondered how we add this shortcode top the row we want it to appear in.

    [gallery link="file" columns="4" ids="274,288,296,298,323,324,338"]
  • PabloPablo
    Every shortcode should be added in the "Column" item of the Muffin Builder - also, you can add any HTML structure there too.

    If you have some other questions, feel free to ask.
    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • yadiyadayadiyada
    Great it looks fantastic. I was wondering if we have control over the size of the thumbnails. Currently they are square thumbnails. Could we code this to appear the same as the size - medium feature that produces the size you see in the first row of images in this page.


    The gallery with the square images is the last row.
  • BryanBryan
    Hello,
    when you edit a gallery item, you can set the image size there.
    To change the size of the default WordPress gallery images, please go to settings>media.


    Notice! Remember to use thumbnail regeneration after you make your changes. Otherwise, the images will not change their size.
    thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • yadiyadayadiyada
    Can I run this past you. We have decided to use this short code:

    [gallery link="file" columns="4" size="" animate="" ids="324,325,326,327,328"]

    Could you explain what the text is for adding the size width 300px x height 219px.
    What exact;y would the text read?

    Also if we want no animation and turn the animation off how would we create that.

    Thank you
  • PabloPablo
    Where did you got the  "animation" and "size" parameters? They are not included in the shortcode on splash page.
    Size should be changed in the "Image Gallery" item, but as I said, by default it is set to "Thumbnail"

    Also, I do not see any animation on that page you sent
    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.