Lightbox - Multiple Images Attached to One Thumbnail?

pending (6 posts) (2 voices)

  1. markwinters0310
    Member

    I have images posted on a page of projects I've worked on. Instead of having multiple images on that page of the same project, can I have one thumbnail image with more images attached to it when lightbox opens?
    For instance on this page:
    http://landarcstudio.com/?page_id=74
    Instead of the first two images on the page being "EAST GRAND RAPIDS H.S.", can I use one image on this page, but when that link opens lightbox, have the other image for "EAST GRAND RAPIDS H.S." shown there?
    Thanks!
    Mark.

    Posted 4 years ago #
  2. Elliott
    Support

    Hello markwinters0310,

    You can place more images in the page and style them so they do not display.. like this,

    <img style = 'display: none;' src = '' />

    Make sure they all have the same rel = 'prettyPhoto[gallery]' for them to all show up in the popup.

    Let us know if this works for you markwinters0310.

    Posted 4 years ago #
  3. markwinters0310
    Member

    Elliott,
    It works! Except I have an extra RETURN or Paragraph buried somewhere on the top line. Not sure if I have the src+ text right for the second image which doesn't show a thumbnail (yes) but is included in the lightbox show.

    See how the two right hand images on the top line are a "line" down?
    http://landarcstudio.com/?page_id=74

    Here's the HTML text. (See line 6?)

    [one_third]<h6>East Grand Rapids H.S.</h6><img style="border: 1.5px solid black;" src="http://landarcstudio.com/wp-content/uploads/2010/10/EGR_01-Thumb.png" alt="East Grand Rapids Stadium Entry" width="150" height="150" />[/one_third]</h6><img style = 'display: none;' src="http://landarcstudio.com/wp-content/uploads/2010/10/EGR_02-Thumb.png" alt="East Grand Rapids Athletic Field" width="150" height="150" />[one_third]<h6>Medical Office Building</h6><img style="border: 1.5px solid black;" src="http://landarcstudio.com/wp-content/uploads/2010/10/Medical-Office-Thumb.png" alt="Medical Office Building" width="150" height="150" />[/one_third] [one_third_last]<h6>Forest Hills Eastern H.S.</h6><img style="border: 1.5px solid black;" src="http://landarcstudio.com/wp-content/uploads/2010/10/FHE_02-Thumb.png" alt="Forest Hills Eastern Main Entry" width="150" height="150" />[/one_third_last] [one_third]<h6>Fox Hyundai Kia</h6><img style="border: 1.5px solid black;" src="http://landarcstudio.com/wp-content/uploads/2010/10/Fox_Hyundai-Thumb.png" alt="Fox Hyundai Kia" width="150" height="150" />[/one_third] [one_third]<h6>Heritage Square Townhomes</h6><img style="border: 1.5px solid black;" src="http://landarcstudio.com/wp-content/uploads/2010/10/HeritageSquare_01-Thumb.png" alt="Heritage Square Townhomes" width="150" height="150" />[/one_third] [one_third]<h6>Heritage Square Townhomes</h6><img style="border: 1.5px solid black;" src="http://landarcstudio.com/wp-content/uploads/2010/10/HeritageSquare_02-Thumb.png" alt="Heritage Square Townhomes" width="150" height="150" />[/one_third] [one_third_last]<h6>Great Lakes Shipping Co.</h6><img style="border: 1.5px solid black;" src="http://landarcstudio.com/wp-content/uploads/2010/10/GLSC-Thumb.png" alt="Great Lakes Shipping Company" width="150" height="150" />[/one_third_last]
    [one_third]<h6>Muskegon Condominiums</h6><img style="border: 1.5px solid black;" src="http://landarcstudio.com/wp-content/uploads/2010/10/HS_03-Thumb.png" alt="Muskegon Condominiums" width="150" height="150" />[/one_third] [one_third]<h6>North Ottawa Community Hospital</h6><img style="border: 1.5px solid black;" src="http://landarcstudio.com/wp-content/uploads/2010/10/NOCH-Thumb.png" alt="North Ottawa Community Hospital" width="150" height="150" />[/one_third]

    Thanks as Always!!!
    Mark.

    Posted 3 years ago #
  4. Elliott
    Support

    Wordpress's auto format always seems to provide headaches. What is happening is that it thinks you pressed enter or there was a space where it shouldn't have been and Wordpress is inserting line breaks. We can try taking off the auto formatter but make sure to check around your post / page content to see if anything was messed up.

    Open up /wp-content/themes/infocus/functions.php and add these lines..

    /* Remove the 2 main auto-formatters */
    remove_filter('the_content',	'wpautop');
    remove_filter('the_content',	'wptexturize');

    And then make sure to test everything to see if stuff is displaying right. If it is causing undesired results then go ahead and delete those lines and we will try something else.

    Also, make sure you are properly closing all of your elements. I noticed around the third line you have a stray </h6>. Let us know if this helps markwinters0310.

    Posted 3 years ago #
  5. markwinters0310
    Member

    Elliott,
    It was just that stray </h6>. Took care of the extra space/line!
    Thanks!

    Now just wondering if you have a fix for the 1/3last issue screwing up my page.....

    Mark.

    Posted 3 years ago #
  6. Elliott
    Support

    For your other column page it is probably a typo somewhere.. I could not find it though.

    Instead of creating a column for each image try using just three like this..

    [one_third]
    
    <h6>East Grand Rapids H.S.</h6><a title="Stadium Entry.  Completed at URS Corporation" rel="prettyPhoto[yourgalleryl]" href="http://landarcstudio.com/wp-content/uploads/2010/10/EGR_01.png"><img style="border: 1.5px solid black;" src="http://landarcstudio.com/wp-content/uploads/2010/10/EGR_01-Thumb.png" alt="East Grand Rapids Stadium Entry" width="150" height="150" /></a>
    
    <h6>East Grand Rapids H.S.</h6><a title="Stadium Entry.  Completed at URS Corporation" rel="prettyPhoto[yourgalleryl]" href="http://landarcstudio.com/wp-content/uploads/2010/10/EGR_01.png"><img style="border: 1.5px solid black;" src="http://landarcstudio.com/wp-content/uploads/2010/10/EGR_01-Thumb.png" alt="East Grand Rapids Stadium Entry" width="150" height="150" /></a>
    
    [/one_third]
    
    [one_third]
    
    <h6>East Grand Rapids H.S.</h6><a title="Stadium Entry.  Completed at URS Corporation" rel="prettyPhoto[yourgalleryl]" href="http://landarcstudio.com/wp-content/uploads/2010/10/EGR_01.png"><img style="border: 1.5px solid black;" src="http://landarcstudio.com/wp-content/uploads/2010/10/EGR_01-Thumb.png" alt="East Grand Rapids Stadium Entry" width="150" height="150" /></a>
    
    <h6>East Grand Rapids H.S.</h6><a title="Stadium Entry.  Completed at URS Corporation" rel="prettyPhoto[yourgalleryl]" href="http://landarcstudio.com/wp-content/uploads/2010/10/EGR_01.png"><img style="border: 1.5px solid black;" src="http://landarcstudio.com/wp-content/uploads/2010/10/EGR_01-Thumb.png" alt="East Grand Rapids Stadium Entry" width="150" height="150" /></a>
    
    [/one_third]
    
    [one_third_last]
    
    <h6>East Grand Rapids H.S.</h6><a title="Stadium Entry.  Completed at URS Corporation" rel="prettyPhoto[yourgalleryl]" href="http://landarcstudio.com/wp-content/uploads/2010/10/EGR_01.png"><img style="border: 1.5px solid black;" src="http://landarcstudio.com/wp-content/uploads/2010/10/EGR_01-Thumb.png" alt="East Grand Rapids Stadium Entry" width="150" height="150" /></a>
    
    <h6>East Grand Rapids H.S.</h6><a title="Stadium Entry.  Completed at URS Corporation" rel="prettyPhoto[yourgalleryl]" href="http://landarcstudio.com/wp-content/uploads/2010/10/EGR_01.png"><img style="border: 1.5px solid black;" src="http://landarcstudio.com/wp-content/uploads/2010/10/EGR_01-Thumb.png" alt="East Grand Rapids Stadium Entry" width="150" height="150" /></a>
    
    [/one_third_last]

    This code worked for me. Just substitute your images / links with those and let us know if it works as expected.

    Posted 3 years ago #

Reply

You must log in to post.

Construct WordPress Theme
Construct wordpress theme
Myriad WordPress Theme
Myriad wordpress theme
Method WordPress Theme
Method wordpress theme
Fusion WordPress Theme
Fusion wordpress theme
Elegance WordPress Theme
Elegance wordpress theme
Echelon WordPress Theme
Echelon wordpress theme
Dejavu WordPress Theme
Dejavu wordpress theme
Modular WordPress Theme
Modular wordpress theme