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.

Need help creating an image array for photo lightbox

July 01, 2010 4:52pm

Subscribe [2]
  • #1 / Jul 01, 2010 4:52pm

    dlewand691

    10 posts

    Hi all!
    Need help creating a custom field set (or whatever would work best) to implement an image array for a photo gallery. See the example here:

    http://www.paul-rand.com/index.php/site/books_thoughtsOnDesign/

    Clicking on the the ‘See Inside’ button opens the lightbox window and calls a set of images. I’m using empty <a> tags and ‘rel’s to link the the images in a set without displaying any thumbnails so you click through the whole set with one button.

    My problem is that these types of pages are individual templates, but I’d like to make them blog entries, but need a solution to create these types of links- define how many images in the set, define the titles, rels, etc.

    Any suggestions, plug-ins, or similar that would make this possible?

    Thanks for your help!!!
    Danny

  • #2 / Jul 01, 2010 10:16pm

    brankin

    150 posts

    Hey there Danny,
    I use Matrix and then call the data as such

    <div class="portfolio">
    {exp:weblog:entries weblog="image_gallery"}
    <div class="portfolio-item">
    <!-- Preview Image -->
    {gallery_images limit="1"}
    <a href="http://{image}" rel="{title}" title="{image_title}" class="zoom img">_{/gallery_images}__{gallery_preview_img}_{preview_image}_{/gallery_preview_img}__</a>
    <!-- End Preview image -->
    
    <!-- Hidden images revealed in Fancybox -->
    {gallery_images offset="1"}
    <a href="http://{image}" rel="{title}" title="{image_title}" class="zoom img hidden_image">{title}</a>
    {/gallery_images}            
    <!-- End Hidden Images -->
    
    <div class="portfolio-description">
    <h4>{title}</h4>
    <p>{gallery_description}<br />
    </div></p>
    
    <p></div><br />
    {/exp:weblog:entries}<br />
    </div>

    {gallery_images} and {gallery_preview_img} are matrix fields. All EE tags within each of those are fields set up in the matrix.

    Next time (after doing it this way once) I may actually create a “first image field” and then a separate matrix with unlimited rows for the hidden images that will get called up for the lightbox.  This would eliminate the need for the limit=“1” and offset=“1” parameters in the code.

    Here is the clients site where I used this:Agape Village Foundation Gallery

    The “MISSION TRIP APRIL 2010” and “MISSION TRIP DECEMBER 2009” work the best due to larger graphic size on the blueprints.

    Hope this helps,
    Bryan

  • #3 / Jul 02, 2010 3:50am

    dlewand691

    10 posts

    Thanks, Bryan! That’s exactly what I was looking for. Matrix seems like a very easy solution- I knew there had to be one. Now I just have to find the time and make it happen.

    Very much appreciated!
    Danny

  • #4 / Jul 02, 2010 10:32am

    brankin

    150 posts

    No problem. Have a great weekend.

    Bryan

.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases