Displaying a second image from the same record in a slide show

Hey Jerry, 

I just want to make sure I understand, so you want two images to appear in the same slide? 

Would it be possible to create a static example with a couple of slides so I can see how the HTML/JS works? The I can work out how to get this system working with the code you've provided.

I don't think this page:

http://www.terrerybovich.com/indexB.php

Has the $sizeImageUrl  image appearing yet?

Cheers!

Greg

Hi Greg,

Thanks for looking at this.

An example of using the 2 images in the same slide is attached

The little grey size_image images are different for each large image and are to show relative sizes of the larger image of the artworks since the artworks vary from small 8"x10"  works to 40" x 60" works

The appropriate size_image is uploaded to each image record in the home_page_slide_show_2015 editor.

Best,

Jerry Kornbluth

Hi Jerry,

I think you need to create an array of all of the different images that each piece of art will have like this:

<script type="text/javascript">
  window.addEvent('domready', function(){
    var data = { <?php $blank = "'" ?>
      <?php 
        $output        = ''; 
        $sizeImageUrl = array();
        foreach ($home_page_slide_show_2015Records as $record) {
          foreach ($record['image'] as $index => $upload) {

            $record['title']        = preg_replace("/['\"]/","&acute;", htmlencode($record['title']) ) ;
            $record['size_of_work'] = preg_replace("/['\"]/","&acute;", htmlencode($record['size_of_work']) );  

            $sizeImageUrl[] = @$record['size_image'][$index]['thumbUrlPath'];
      
            $output .= "'". $common_informationRecord['master_url'] . $upload['thumbUrlPath']. "'". ": {caption: " ."'".strtoupper($record['title'])  ."<br>" .strtoupper($record['size_of_work']) .  " -- ". $sizeImageUrl ."'" .","."href:"."'" ."homepageslidedetail.php?".$record['num']."'" ." }"  . "," ;
          }
        }
     
        $output = rtrim($output,","); // remove trailing comma 
        print $output; 
      ?>
    };
    new Slideshow('show', data, { captions: true, resize: false, controller: false, thumbnails: false, overlap: true, delay: 4500, duration: 250, height: 734, hu: '', width: 979 });
  });
</script>


This is the new code above:

            $sizeImageUrl[] = @$record['size_image'][$index]['thumbUrlPath'];

So we're storing each size image for each record in the array that we can access at a later point.

Then you just need to ensure that the appropriate image is pulled from this array using the key when you display the images in the slide show. 

If you want some guidance in adding this code to the slide show, can you post the full slideshow html /php code into a post for me?

Thanks,

Greg

Hi Greg,

Sorry that it took so long to get back to you.

I inserted the code you suggested to http://www.terrerybovich.com/indexB1.php to the original http://www.terrerybovich.com/indexB.php and got the following errors. Both php files are attached.

(I (wish I knew more about JavaScript coding...)

<script type="text/javascript"> window.addEvent('domready', function(){ var data = {

Notice: Array to string conversion in /home1/terreryb/public_html/terrerybovich/indexB1.php on line 71

Notice: Array to string conversion in /home1/terreryb/public_html/terrerybovich/indexB1.php on line 71

Notice: Array to string conversion in /home1/terreryb/public_html/terrerybovich/indexB1.php on line 71


Notice: Array to string conversion in /home1/terreryb/public_html/terrerybovich/indexB1.php on line 71
'http://terrerybovich.com/cmsAdmin/uploads/thumb/img_0940a.jpg': {caption: 'IMAGE 4<br>66 X 25 -- Array',href:'homepageslidedetail.php?13' },'http://terrerybovich.com/cmsAdmin/uploads/thumb/img_0940b.jpg': {caption: 'IMAGE 2<br>24&QUOT; X 36&QUOT; -- Array',href:'homepageslidedetail.php?11' },'http://terrerybovich.com/cmsAdmin/uploads/thumb/img_0933b.jpg': {caption: 'IMAGE 1<br>12&QUOT; X 24&QUOT; -- Array',href:'homepageslidedetail.php?10' },'http://terrerybovich.com/cmsAdmin/uploads/thumb/img_0955b.jpg': {caption: 'IMAGE 3<br>48&QUOT; X 67&QUOT; -- Array',href:'homepageslidedetail.php?12' } }; new Slideshow('show', data, { captions: true, resize: false, controller: false, thumbnails: false, overlap: true, delay: 4500, duration: 250, height: 734, hu: '', width: 979 });
});


</script>

Just to reiterate the issue.

In the attached file, indexB.php, on line 69 I’m defining the variable $sizeImageUrl = $upload2['thumbUrlPath'];

I can display the variable on line 71 as part of the $output variable. The value in the $output variable on line 71 updates correctly, as you can see in the information below the images in the slide show at http://www.terrerybovich.com/indexB.php

When the page loads, the initial value of the $sizeImageUrl variable is passed to <img src="<?php echo $sizeImageUrl ?>"  /> on line 112

The problem is that the $sizeImageUrl value on line 112 does not update when the slide show advances to the next slide.

Thanks for keeping up with this.

Best,

Jerry Kornbluth

Hey Jerry, 

Thanks for attaching those files, it helped me work out the issue with the code.  I've updated my code so that it should add the correct image to $sizeImageUrl:

<script type="text/javascript">
  window.addEvent('domready', function(){
    var data = { <?php $blank = "'" ?>
      <?php 
        $output        = ''; 
        $sizeImageUrl = '';
        foreach ($home_page_slide_show_2015Records as $record) {
          foreach ($record['image'] as $index => $upload) {

            $record['title']        = preg_replace("/['\"]/","&acute;", htmlencode($record['title']) ) ;
            $record['size_of_work'] = preg_replace("/['\"]/","&acute;", htmlencode($record['size_of_work']) );  

            $sizeImageUrl = $home_page_slide_show_2015Records['size_image'][$index]['thumbUrlPath'];
      
            $output .= "'". $common_informationRecord['master_url'] . $upload['thumbUrlPath']. "'". ": {caption: " ."'".strtoupper($record['title'])  ."<br>" .strtoupper($record['size_of_work']) .  " -- ". $sizeImageUrl ."'" .","."href:"."'" ."homepageslidedetail.php?".$record['num']."'" ." }"  . "," ;
          }
        }
     
        $output = rtrim($output,","); // remove trailing comma 
        print $output; 
      ?>
    };
    new Slideshow('show', data, { captions: true, resize: false, controller: false, thumbnails: false, overlap: true, delay: 4500, duration: 250, height: 734, hu: '', width: 979 });
  });
</script>

It looks like the image on line 112 is outside of the slide show area, so you'll need to find a way to update that image as each slide changes.  I had a look at the slideshow 2 page, but couldn't find a JS callback that can be used to update code outside of the slideshow as each slide changes. Do you know if there is one? 

I notice that you're updating the the size of the work and had the image path in the caption, could you add the image in here instead?

Cheers,

Greg

Hey Jerry, 

You could have a look at the jquery cycle2 slideshow system:

http://jquery.malsup.com/cycle2/

It allows you to create slide shows of divs of content, and not just images:

http://jquery.malsup.com/cycle2/demo/non-image.php

You could make it so that each slide contains both the image of the painting, and the dimensions image. Then cycle through those, instead of updating an image outside of the slideshow. 

Cheers,

Greg

Thanks Greg,

Thanks for the insight.

I took a look and Cycle 2 seems to be a very versatile solution that was really easy to implement, is extremely well documented, and has
plenty of options and plugins on the downloads page.

There are only 2 files that need to be loaded in the head of your viewer (although plugin files are also needed for
advanced functions).
jquery.cycle2.min.js and http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js

Here’s my implementation for a captioned, fade in slide show with a second image called size_image that’s displayed
to the left of the caption information. Each image is linked to a detail page for that record called
‘homepageslidedetail.php’. NOTE: the preg_replace makes sure that there are no extra double quotes hanging around to
muck up the works.

I’m using a multi-record editor called ‘portfolio_images’ with 2 upload fields called ‘image’ and ‘size
image’ along with text fields for ‘title’ and ‘size_of_work and other information.

At the very top of the viewer

<?php

 require_once "/path_to_your_server/cmsAdmin/lib/viewer_functions.php";
 
  // load records from 'portfolio_images'
  list($portfolio_imagesRecords, $portfolio_imagesMetaData) = getRecords(array(
    'tableName'   => 'portfolio_images',
   'loadUploads' => true,
   'loadUploads' => true,
    'allowSearch' => false, 
  ));

In the Head section of the viewer: (my .js files are in a folder called Scripts)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="Scripts/jquery.cycle2.min.js"></script>
 

And in the Body of the  viewer:

 <?php foreach ($portfolio_imagesRecords as $record): ?>
    <div align="center">
       <a href="homepageslidedetail.php?<?php echo $record['num']?>">
       <?php foreach ($record['image'] as $index => $upload): ?> <img src="<?php echo
htmlencode($upload['thumbUrlPath2']) ?><?php endforeach ?>" >
    </a>
        <div class="cycle-caption">
        
        <table align="center" width="60%" border="0" cellspacing="0" style="border:hidden">
  <tr>
   <td class="text_font" align="left" valign="middle" style="padding-left:15px;">
  <?php foreach ($record['size_image'] as $index => $upload2): ?><img src="<?php echo
htmlencode($upload2['thumbUrlPath']) ?>" /><?php endforeach ?></td>
   <td class="text_font" align="left" valign="top"><?php $record['title'] = preg_replace("/['\"]/","&acute;",
htmlencode($record['title']) ) ; 
 $record['size_of_work'] = preg_replace("/['\"]/","&acute;", htmlencode($record['size_of_work']) ); ?>
 <?php echo strtoupper($record['title']) ?>
 <?php echo strtoupper($record['size_of_work']) ?>
 </td>
 </tr>
</table></div></div>
<?php endforeach ?>
    
    
</div>

      </td>
  </tr>
  <tr>
    <td width="60%" valign="top"  align="center" style="text-align:center;">
      <span class="heading_font" ><b>
     
      YOUR SHOW TITLE GOES HERE</b></span>
     </td>
  </tr>
  <tr>
    <td align="center" > <span class="text_font" >Click/Tap An Image To Learn More
      </span><div class="text_font" align="center" style="text-align:left; width:60%;"> 
        <?php echo $curated_show_description ?></div>
      
      </td>
  </tr>
</table>

Hope it helps others.

Best,

Jerry Kornbluth