Need help connecting CMS to gallery script

3 posts by 2 authors in: Forums > CMS Builder
Last Post: April 30, 2013   (RSS)

By meg - April 26, 2013

I figured out most of this gallery script. Where I'm having trouble is linking between lightbox custom previous and next buttons. To do this I need a unique ID name to link to and from. However, I need this automated. 

Here's how the gallery works. I'm using a multi-listing set-up to feature each client, which appears as thumbnails below. You select the thumbnail to go to the client page. From there, there is a gallery with prev, next and toggle buttons. (I've gotten that to work perfectly with the CMS). These gallery images are controlled by an upload table in the multi-listing entry. The final level to this gallery, which I'm having trouble with, is the lightbox feature. When you select each image in the gallery, you can open up an enlarged lightbox version of it. (Again, no problems connecting it to the CMS. I used the title name as the unique ID that prompts the lightbox feature to work.) Where I'm having trouble is making the custom previous and next buttons within this lightbox. I need each of these buttons to reference the lightbox that comes next and previous (which uses the unique ID in the title of the image in the uploads section.) 

Here is the script that I'm using so far:

<?php foreach ($detailRecord['images'] as $index => $upload): ?>
<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
<div id='<?php echo htmlencode($upload['info1']) ?>' style=' background:#fff; height: 615px;padding: 20px; -moz-border-radius: 50px;border-radius: 50px;'>
<p align="center"><img src="<?php echo $upload['urlPath'] ?>" width="692" height="600" alt="" /></p>

<!--Start prev and next arrows -->
<div class="arrow-nav2">
<!--Start arrow left -->
<div class="arrow-l">
<a href="#" class="prev">
<img src="images/left-arrow.jpg" width="15" height="15" alt="prev" align="right" border="0"/></a></div>
<!--Start arrow right -->
<div class="arrow-r"><span class="hborder" style="font-size: 15px;">|<a href="#" class="test2"> next </a>|
<a href="#" class="test2">
<img src="images/right-arrow1.jpg" width="15" height="15" alt="." align="right" border="0"/></a></span> </div>
</div>
<!--End prev and next arrows -->

</div></div>
<?php endforeach ?>

"test2" is the sample ID (hard coded). I need to automate this. 

Any suggestions?

By gregThomas - April 29, 2013

Hi Meg,

Would it be possible to post all of your code so far? Are you using a custom built slideshow system, or are you using a plugin?

I think something like this might work:

<?php foreach ($detailRecord['images'] as $index => $upload): ?>
<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
  <div id='<?php echo htmlencode($upload['info1']) ?>' style="background:#fff; height: 615px;padding: 20px; -moz-border-radius: 50px;border-radius: 50px;">
    <p align="center">
      <img src="<?php echo $upload['urlPath'] ?>" width="692" height="600" alt="" />
    </p>
    <!--Start prev and next arrows -->
    <div class="arrow-nav2">
      <!--Start arrow left -->
      <div class="arrow-l">
        <?php if($prev = @$detailRecord['images'][$index-1]): ?>
        <a href="<?php echo $prev['info1']; ?>" class="prev"> 
          <img src="images/left-arrow.jpg" width="15" height="15" alt="prev" align="right" border="0"/>
        </a>
        <?php endif; ?>
      </div>
      <!--Start arrow right -->
      <div class="arrow-r">
        <span class="hborder" style="font-size: 15px;">|<a href="#" class="test2">next</a>|
          <?php if($next = @$detailRecord['images'][$index+1]): ?>
          <a href="<?php echo $next['info1']; ?>" class="test2">
            <img src="images/right-arrow1.jpg" width="15" height="15" alt="." align="right" border="0"/>
          </a>
          <?php endif; ?>
        </span>
      </div>
    </div>
  </div>
</div> 
<?php endforeach ?>

This is just example code, so you'll have to make a few changes to get it working with your current system. 

So I've used the $index key to get the previous and next record in the current image array if they exist. If they do then the page displays the info1 field in the links href tag.

Let me know if you have any questions.

Cheers

Greg

Greg Thomas







PHP Programmer - interactivetools.com