Navigation
This is archived content. Visit our new forum.
  • Author
    Posts
  • #75444

    Oisin V
    Participant

    Hello again support,

    loving the X Theme, and working on another site with the theme purchased by a relative (on my reccomendation).

    As much as I love X, this one has me stumped, and to the point where the relative wants to ditch the theme… but I want to persevere!

    The topic says it all really:

    What I need to achieve, is to have only one image ‘live’ on a section of a page, and that image to them open up a lightbox gallery of 15 to 20 related images.

    Note
    – the lightbox to appear above the page, not linking to a portfolio, or

    #75448

    Oisin V
    Participant

    oops hit submit before finished.

    further notes:
    -also want to be able to add lightbox captions, as per usual.
    -Do not want to have the rest of the 15-20 images ‘visible’ on the page (in order for the lightbox to show them)…. this is because the images are various reasons:
    1. The images are differing sizes (meaning its impossible to lay them out in a block grid and still look good)
    2. Can use wordpress gallery, which makes them uniform size…. but that leads back to no.3 below…
    3. Main reason…. loads of images is way too messy.

    Is there any way lightbox can achieve this?
    I have tried every way I can think of, to achieve a very simple layout and effect… but I am stumped.

    Help!….
    Many thanks in advance (once again)

    #75618

    Oisin V
    Participant

    For anyone that is interested, I did actually find a solution 🙂

    Using Visual Composer – In a content band or column where you want the very first image to appear:

    1. Create a Responsive Slider – and this is key: DO NOT activate any navigation buttons options, or ‘auto play slides’.

    2. Add a slide to the slider.

    3. In this first slide, insert an image using shortcode like this: [image class="my-imageclass" src="http://insert-url-to-my-image.jpg" alt="optional name of my first image" type="thumbnail" link="true" href="http://insert-url-to-my-image.jpg" title="name of my first image" lightbox_caption="Optional content that will appear over image in lightbox if you put text here "]

    4. Duplicate the first slide. Add a second slide, and third slide etc… (as many as you like) – and in each, change the URL of new image, and captions etc… as above. Also: NOTE** the ‘image class’ from above

    5. Lastly, below the slider, add a ‘responsive lightbox’. In it’s options, make sure you set the ‘image class’ to the same as what you have put in your images above. You can also choose whether you want thumbnail navigation activated.

    BOOM, that’s it. The first image appears – but because the slider doesn’t have any way of advancing the slides (controls are off) to show any of the other images (autoplay is also off)…. once the user clicks on the image, the lightbox pops up, and all the images play as they should in a lightbox.

    I have added multiple galleries to the same page in this way, and as long as the ‘image class’ is set correctly in each image + it’s corresponding ‘responsive lightbox’, then you will only see the lightbox gallery for that particular image.

    Very happy I finally got that sorted out… but actually would love to hear if there is another way.
    Any comments?

    #75962

    Mrinal
    Member

    Hi Oisin,

    Thanks for writing in & all of your hard work.

    We really appreciate it. You created the gallery in correct method. If I want to create a gallery like you without Visual Editor, I’d arrange the shortcodes like you did for VC also.

    I hope other users will find this tips of you really helpful when they search.

    Have a nice day, Cheers!

    #85474

    Chris A
    Participant

    Hello!

    This is a very helpful post here, I appreciate you sharing it. I copied what you did exactly, but every time I click on an image in the small slider, it keeps opening/linking to the image file in a new window. Here is my code-

    [image class=”kitchen-slide” src=”http://raucn.com/wp-content/uploads/2014/08/RC-Web-Content-Work-1.jpg” alt=”Kitchen Remodel” type=”rounded” link=”true” href=”http://raucn.com/wp-content/uploads/2014/08/RC-Web-Content-Work-1.jpg” title=”Kitchen Remodel” lightbox_caption=”Kitchen Remodel Complete “]

    The URL is raucn.com/home

    Any tip tip fix this??

    #85480

    Chris A
    Participant

    Nevermind, disregard, it’s working fine, thanks!

    #85486

    Cousett
    Member

    Glad you were able to figure it out. 🙂 Have a nice day.

    #106472

    Vlad A
    Participant

    Thanks a lot, it was of great help.

    #106473

    Cousett
    Member

    Glad we were able to help. 🙂 Have a nice day.

    #106553

    Oisin V
    Participant

    Glad it’s all working. Had me scratching my head for a few days!

    #106579

    Zeshan
    Member

    Glad we could help you with this! 🙂 Have a nice day!

    #687684

    Marty B
    Participant

    Hi guys, apologies for opening an old threat but this seems to be the only solution for what I am trying to achieve (essentially a featured image that opens a lightbox gallery).

    I’ve implemented the steps above, but all I seem to get is the image opening in the browser window not in a lightbox. Has there been any changes to X since the above?

    #687880

    Zeshan
    Member

    Hi there,

    Thanks for writing in! To assist you with this, we’ll first need you to provide us with your URL as stated on the forum entrance page. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you.

    Thanks!