ExpressionEngine CMS
Open, Free, Amazing

Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

Lightbox 2.6 image order issue

March 06, 2014 4:20pm

Subscribe [3]
  • #1 / Mar 06, 2014 4:20pm

    blaiseymae

    108 posts

    Can anyone help with my ee code structure?

    I am using the grid field to upload multiple images for a lightbox gallery.  Everything is displaying properly, but lightbox pops open to the last image first. 

    “Image 3 of 3” instead of “Image 1 of 3”

    I think it is because of the open anchor tags

    Here’s my code:

    {exp:channel:entries channel="projects"}
    <div class="b-project">
       <div class="img-wrapper img-polaroid"> 
     
          {project_gallery}
          <a href="http://{project_gallery:gal_pic}data-lightbox={title_permalink}">_      {/project_gallery}_      {project_img:crop}_             <div class="img-border"></div>                        _             </a>
        </div>
       <strong>{title}</strong>
       {short_description}
    
    </div>
    {/exp:channel:entries}

    When I view the page source code, I see the problem:

    <!-- b-project -->
    <div class="b-project">
    <div class="img-wrapper img-polaroid">  
    
    
     <a href="/images/34-_004.jpgdata-lightbox=http://yclipper.ehclients.com/index.php/test-project">__ <a data-lightbox="http://yclipper.ehclients.com/index.php/test-project" href="/images/34-_007.jpg">__ <a data-lightbox="http://yclipper.ehclients.com/index.php/test-project" href="/images/34-_009.jpg">__ /images/_crop/14_horseshoe.jpg_ <div class="img-border"></div>                        _ </a>
    </div>
    
    <strong>Test Project</strong>
    This is a Test project
    </div>
    <!-- end b-project -->
    <!-- b-project -->

    How can rewrite my gallery code to NOT leave open a tags?

    Here’s a link to the page:  beta site

    Thanks, in advance!

  • #2 / Mar 07, 2014 3:11am

    Rob Allen

    3105 posts

    That’s a bit of a stinker 😊

    Something like this may work:

    <!-- Get the first gallery link (use limit="1" to grab the first grid row) -->
    
    {project_gallery limit="1"}
    <a href="http://{project_gallery:gal_pic}data-lightbox={title_permalink}">_{/project_gallery}_{project_img:crop}_<div class="img-border"></div>                        _</a>
    
    <!-- Now get the remaining rows, using offset="1" because we've already got the first grid row: -->
    
    {project_gallery offset="1"}
    <a href="http://{project_gallery:gal_pic}data-lightbox={title_permalink}"></a>
    {/project_gallery}
.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases