JS/CSS thumbnail slider for additional images

[rbarbour]

Make these changes first, this basically only adds <div class="responsive"> if more than 3 additional images

<?php
/**
 * Module Template:
 * Loaded by product-type template to display additional product images.
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_modules_additional_images.php 3215 2006-03-20 06:05:55Z birdbrain $
 * 
 */

 require(DIR_WS_MODULES . zen_get_module_directory('additional_images.php'));

 if ($num_images > 3) {
 echo '<div class="responsive">';
 }

 if ($flag_show_product_info_additional_images != 0 && $num_images > 0) {

if (is_array($list_box_contents) > 0 ) {
 for($row=0;$row<sizeof($list_box_contents);$row++) {
    $params = "";
    //if (isset($list_box_contents[$row]['params'])) $params .= ' ' . $list_box_contents[$row]['params'];

    for($col=0;$col<sizeof($list_box_contents[$row]);$col++) {
      $r_params = "";
      if (isset($list_box_contents[$row][$col]['params'])) $r_params .= ' ' . (string)$list_box_contents[$row][$col]['params'];
     if (isset($list_box_contents[$row][$col]['text'])) {

echo '<div>' . $list_box_contents[$row][$col]['text'] .  '</div>'; 


      }
    }
  }
}

  }

 if ($num_images > 3) {
 echo '</div>';
 }

?>

[Feznizzle]

Crud, I deleted my back up tpl_modules_additional_images.php from right before you gave me the new code!

Anyway, I had my js inside of that file. Not sure how I had it cuz I can't seem to replicate it now.

Below is the last way I tried it. Breaks the page. Can you show me how to work it back in?

<?php 
/** 
 * Module Template: 
 * Loaded by product-type template to display additional product images. 
 * 
 * @package templateSystem 
 * @copyright Copyright 2003-2005 Zen Cart Development Team 
 * @copyright Portions Copyright 2003 osCommerce 
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0 
 * @version $Id: tpl_modules_additional_images.php 3215 2006-03-20 06:05:55Z birdbrain $ 
 *  
 */ 

 require(DIR_WS_MODULES . zen_get_module_directory('additional_images.php')); 

 if ($num_images > 3) { 
 echo '<div class="responsive">'; 
 
 
 <script type="text/javascript">
(function($) {
$(document).ready(function() {

$('.responsive').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 3,
slidesToScroll: 3,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});

});

}) (jQuery);
</script>
 
 
 
 } 

 if ($flag_show_product_info_additional_images != 0 && $num_images > 0) { 

if (is_array($list_box_contents) > 0 ) { 
 for($row=0;$row<sizeof($list_box_contents);$row++) { 
    $params = ""; 
    //if (isset($list_box_contents[$row]['params'])) $params .= ' ' . $list_box_contents[$row]['params']; 

    for($col=0;$col<sizeof($list_box_contents[$row]);$col++) { 
      $r_params = ""; 
      if (isset($list_box_contents[$row][$col]['params'])) $r_params .= ' ' . (string)$list_box_contents[$row][$col]['params']; 
     if (isset($list_box_contents[$row][$col]['text'])) { 

echo '<div>' . $list_box_contents[$row][$col]['text'] .  '</div>';  


      } 
    } 
  } 
} 

  } 

 if ($num_images > 3) { 
 echo '</div>'; 
 } 

?>

[rbarbour]

unless you have something other than what I can see in this file just copy my code and paste it in

 <?php
/**
 * Module Template:
 * Loaded by product-type template to display additional product images.
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_modules_additional_images.php 3215 2006-03-20 06:05:55Z birdbrain $
 * 
 */

 require(DIR_WS_MODULES . zen_get_module_directory('additional_images.php'));

 if ($flag_show_product_info_additional_images != 0 && $num_images > 0) {

 if ($num_images > 3) {
 echo '<div class="responsive">';
 }

if (is_array($list_box_contents) > 0 ) {
 for($row=0;$row<sizeof($list_box_contents);$row++) {
    $params = "";
    //if (isset($list_box_contents[$row]['params'])) $params .= ' ' . $list_box_contents[$row]['params'];

    for($col=0;$col<sizeof($list_box_contents[$row]);$col++) {
      $r_params = "";
      if (isset($list_box_contents[$row][$col]['params'])) $r_params .= ' ' . (string)$list_box_contents[$row][$col]['params'];
     if (isset($list_box_contents[$row][$col]['text'])) {

echo '<div>' . $list_box_contents[$row][$col]['text'] .  '</div>'; 


      }
    }
  }
}

 if ($num_images > 3) {
 echo '</div>';
 }

  }
?> 

<script type="text/javascript">
(function($) {
$(document).ready(function() {

$('.responsive').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 3,
slidesToScroll: 3,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});

});

}) (jQuery);
</script>

Crud, I deleted my back up tpl_modules_additional_images.php from right before you gave me the new code!

Anyway, I had my js inside of that file. Not sure how I had it cuz I can't seem to replicate it now.

Below is the last way I tried it. Breaks the page. Can you show me how to work it back in?

[Feznizzle]

Working again, ty!

It's stacking additional images when no scroll is triggered (less than 4 additional images).

Gonna try to figure that out b4 bed...

One more thing though! How do I kill that left scroll button?

[Feznizzle]

Pretty sure I need that "clear both" that I deleted previously, since we now have additional images standing alone if no scroll. Just can't figure out where.

[rbarbour]

OK lets finish it up:

2 changes, adds div with stock class if less than 3 images

<?php
/**
 * Module Template:
 * Loaded by product-type template to display additional product images.
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_modules_additional_images.php 3215 2006-03-20 06:05:55Z birdbrain $
 * 
 */

 require(DIR_WS_MODULES . zen_get_module_directory('additional_images.php'));

 if ($flag_show_product_info_additional_images != 0 && $num_images > 0) {

 if ($num_images > 3) {
 echo '<div class="responsive">';
 } else {
 echo '<div id="productAdditionalImages">';
 }

if (is_array($list_box_contents) > 0 ) {
 for($row=0;$row<sizeof($list_box_contents);$row++) {
    $params = "";
    //if (isset($list_box_contents[$row]['params'])) $params .= ' ' . $list_box_contents[$row]['params'];

    for($col=0;$col<sizeof($list_box_contents[$row]);$col++) {
      $r_params = "";
      if (isset($list_box_contents[$row][$col]['params'])) $r_params .= ' ' . (string)$list_box_contents[$row][$col]['params'];
     if (isset($list_box_contents[$row][$col]['text'])) {

echo '<div class="centeredContent">' . $list_box_contents[$row][$col]['text'] .  '</div>'; 


      }
    }
  }
}


 echo '</div>';
  }
?>  
<script type="text/javascript">
(function($) {
$(document).ready(function() {

$('.responsive').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 3,
slidesToScroll: 3,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});

});

}) (jQuery);
</script>

in the jscript file for the slider find:

                prevArrow: '<button type="button" data-role="none" class="slick-prev" aria-label="Previous" tabindex="0" role="button"><i class="fa fa-angle-double-left"></i></button>', 

change to:

                prevArrow: '', 

or add

.slick-prev { display:none; }

to bottom of slider css file

Working again, ty!

It's stacking additional images when no scroll is triggered (less than 4 additional images).

Gonna try to figure that out b4 bed...

One more thing though! How do I kill that left scroll button?

[Feznizzle]

Awesomeness!!

One last minor glitch. When no scroll is triggered, the additional images stack. Here is a link:
http://0stage.justmedical***DOT***bi...roducts_id=159

I'm pretty sure that goes back to this:
https://www.zen-cart.com/showthread....60#post1307260

Now that you have separated out the js, seems like the clear both needs to get put back into the group that does not receive js?

I just can't figure where...

[rbarbour]

Did you alter the additional_images.php modules file?

/includes/modules/zca_responsive_classic/additional_images.php

seems to be missing the stock class"class="additionalImages centeredContent back"

Awesomeness!!

One last minor glitch. When no scroll is triggered, the additional images stack. Here is a link:
http://0stage.justmedical***DOT***bi...roducts_id=159

I'm pretty sure that goes back to this:
https://www.zen-cart.com/showthread....60#post1307260

Now that you have separated out the js, seems like the clear both needs to get put back into the group that does not receive js?

I just can't figure where...