This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

How to link single thumbnail to gallery of images in lightbox

  • Creator
    Topic
  • #7309
    mhp
    Participant

    Follow up question… what is the quickest/easiest way to display a slide show in lightbox? On a few pages, I want to show a single static image that opens when clicked and scrolls through pictures. I don’t want a gallery of pics on the page, or a moving slider on the page, just a single pic. Will the gallery or slider functionality allow me to do this easily, or do I need a plugin?

Viewing 15 replies - 1 through 15 (of 17 total)
  • Author
    Replies
  • #7312
    Jason Bobich
    Keymaster

    PrettyPhoto will take all links to images that you append a gallery tag to and group them together in the lightbox like this:

    <a href="image.jpg" rel="themeblvd_lightbox[my_gallery]" title="Image 1">
          <img src="thumb.jpg" />
    </a>
    <a href="image2.jpg" rel="themeblvd_lightbox[my_gallery]" title="Image 2">
          <img src="thumb2.jpg" />
    </a>
    <a href="image3.jpg" rel="themeblvd_lightbox[my_gallery]" title="Image 3">
          <img src="thumb3.jpg" />
    </a>
    <a href="image4.jpg" rel="themeblvd_lightbox[my_gallery]" title="Image 4">
          <img src="thumb4.jpg" />
    </a>

    So, in theory, if you wanted to hide everything but the first one, you’d just do that for the user and not even worry about thumbnails for the hidden image. You could do it something like this perhaps:

    <a href="image.jpg" rel="themeblvd_lightbox[my_gallery]" title="Image 1">
          <img src="thumb.jpg" />
    </a>
    <div style="display:none">
    <a href="image2.jpg" rel="themeblvd_lightbox[my_gallery]" title="Image 2">Image 2</a>
    <a href="image3.jpg" rel="themeblvd_lightbox[my_gallery]" title="Image 3">Image 3</a>
    <a href="image4.jpg" rel="themeblvd_lightbox[my_gallery]" title="Image 4">Image 4</a>
    </div>
    #7313
    Jason Bobich
    Keymaster

    Using an actual WordPress [gallery], here’s one theoretical way you could do it, also —

    <a href="image.jpg" rel="themeblvd_lightbox[gallery-1]" title="Image">
          <img src="thumb.jpg" />
    </a>
    
    <div style="display:none">
    [gallery link="file"]
    </div>
    #7315
    mhp
    Participant

    OK… but I guess I’m missing a basic step… how does the gallery name get set as in “gallery-1” in your statement.

    When I insert a gallery into my page is shows as [gallery link="file" ids="1165,1133,998,980,979"]. I don’t see anywhere that a name gets assigned to the gallery. What am I missing?

    Thanks! mike

    #7316
    mhp
    Participant

    Jason… your code was literal! “gallery-1” is the ID! Works perfectly! Thanks!

    #7318
    Jason Bobich
    Keymaster

    Yup, WordPress just numbers the ID’s of the galleries on the current page automatically like gallery-1, gallery-2, etc, and then the theme uses this ID for the lightbox trigger.

    #7595
    mhp
    Participant

    Hi Jason,
    I’m having some residual issues after I setup my gallery link to a single thumbnail. All works well on the initial set-up. But if I go in and edit the page in any way, upon updating the page, WordPress changes my image insertion HTML, breaking the gallery link and messing up the page. Using [RAW] doesn’t seem to help.

    As an example, my original code is:

    <a href=" http://timmudd.com/hfs/wp-content/uploads/2013/04/RTRiskReport-10.jpg " rel="themeblvd_lightbox[gallery-1]"><img class="align-left  wp-image-2316" alt="RTRiskReport 10" src="http://timmudd.com/hfs/wp-content/uploads/2013/04/RTRiskReport-10-320x200.jpg" width="288" height="180" /></a>

    Wordpress changes it to:

    <a class="wpGallery mceItem" title="gallery-1" href="http://timmudd.com/hfs/wp-content/uploads/2013/04/RTRiskReport-10.jpg" rel="themeblvd_lightbox&lt;img src=">"&gt;<img class="align-left  wp-image-2316" title="FM3 - Reconciliation Risk Report" alt="RTRiskReport 10" src="http://timmudd.com/hfs/wp-content/uploads/2013/04/RTRiskReport-10-320x200.jpg" width="288" height="180" /></a>

    A broken example can be seen at: http://timmudd.com/hfs/technology/reconciliation/

    Suggestions on how to make this not happen? Thanks, Mike

    #7602
    Jason Bobich
    Keymaster

    Are you bouncing between the Visual and Text editor? That might have something to do with it.

    Note the raw shortcode wouldn’t correspond to anything here. That just effect the saved content when displaying it on the frontend of the site, not how WordPress’s editor messes with your HTML sanitizes it.

    #7604
    Jason Bobich
    Keymaster

    Yeah… I just tested on my end. That’s what does it. I guess to put in this type of custom HTML, the editor is not going to let you switch between Visual and Text. Unfortunately this is how prettyPhoto galleries work.

    #7638
    mhp
    Participant

    Dang… not so much a problem for me, but there are other site editors that are not comfortable with the text editor. Thanks Jason. mike

    #8209
    mhp
    Participant

    Hi Jason… having a problem with one of my prettyphoto gallery links. The first picture in the gallery repeats twice before the other pics. I think it is the result of an earlier error. So I recreated the gallery. But it seems to have appended to the bad gallery-1. http://timmudd.com/hfs/technology/portfolio-management/

    Is there a way to clear out or delete galleries?

    Thanks in advance, Mike

    #8223
    Jason Bobich
    Keymaster

    I’m honestly not sure on that one. The actual WP gallery seems to be working fine. It might be a weird side effect of something to do how you’re putting that initial linked to picture into the page. You’re ending up with paragraph tags all throughout.

    #8266
    brunotore
    Participant

    Hi Jason and Mike,

    I am pumped about being able to link to from a single thumbnail to a gallery of images in lightbox – this is going to make my site MUCH more functional and visually appealing. I’ve successfully made one work the same way Mike has, using an actual WordPress [gallery].

    What I can’t figure out is how to have 1 thumbnail link to a group of 10 images and different thumbnail link to a different group of 10 images. I’ve made one gallery, repeated the process for the 2nd gallery. Both thumbnails appear, now linking to 20 images total. The 2nd gallery actually opens in lightbox to the 11th image, but you can see the 1/20 in the bottom right. I tried changing the code to rel=”themeblvd_lightbox[gallery-2]” but the 2nd thumbnail just links to the 2nd image in the original gallery and cycles through all of the 20 images. Thoughts??

    Thanks,

    kate

    #8267
    Jason Bobich
    Keymaster

    @kate For this to work the way you want, WordPress needs to be giving a unique ID for each gallery when it’s displayed, which it should be. — And then you need to target that gallery ID from your thumbnail. By default WP usually does this gallery-1, gallery-2, etc.

    Do you have a link to where you’re doing this?

    #8269
    brunotore
    Participant

    Hi Jason,

    Thanks for your quick response. Unfortunately I don’t have a link as I’m working locally before making the site live.

    I think I might be doing something wrong in the process of actually added the gallery. When I click to add media, I upload new media, create gallery, select the images, click create new gallery and then add the gallery to the page. It of course results in the code [gallery ids="154,148,118,126"]. I then DELETE this code and add the

    [gallery link="file"]

    My thought was if I simply did this process several times I would simply sequentially note gallery-2, -3, etc… So, I guess my real question should be how do I see (create?) the unique ID for each gallery? I’m not seeing any sort of info about the specific galleries themselves, only the ability to create one when adding media to a page,

    #8270
    mhp
    Participant

    I haven’t actually tried two galleries on 1 page. But sounds vaguely related to the issue I had last week with pictures repeating and getting appended to the gallery. Seems like WordPress is very finicky. Picking up on Jason’s observations on the extraneous paragraph tags, I actually deleted the galleries and the HTML and started fresh, inserted my gallery again. Everything is fine now.

Viewing 15 replies - 1 through 15 (of 17 total)
  • The forum ‘Alyeska Responsive WordPress Theme’ is closed to new topics and replies.