Forums / General Questions / JS/CSS thumbnail slider for additional images

JS/CSS thumbnail slider for additional images

Views: 4,233

Results 21 to 38 of 38
28 Mar 2016, 12:36 AM
#21
feznizzle avatar

feznizzle

Totally Zenned

Join Date:
Apr 2010
Posts:
900
Plugin Contributions:
0

JS/CSS thumbnail slider for additional images

Hard to word it, sry.

I'm trying to kill the space to the right of product images in screenshot.
Attachment 16165

My additional images are set to 50px max. I'd like this thing to increase width of ".responsive" by 60px (50px for image, plus 10px margin-right) per each additional product image. So before it hits the forth image (triggering slider button), it would max out at 180px (3 images @ 60px).

Make sense?

Btw, I have decided to figure out how to kill the left button.

28 Mar 2016, 1:30 AM
#22
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: JS/CSS thumbnail slider for additional images

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>';
 }

?>
28 Mar 2016, 1:58 AM
#23
feznizzle avatar

feznizzle

Totally Zenned

Join Date:
Apr 2010
Posts:
900
Plugin Contributions:
0

Re: JS/CSS thumbnail slider for additional images

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>'; 
 } 

?>
28 Mar 2016, 2:01 AM
#24
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: JS/CSS thumbnail slider for additional images

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> 

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?

28 Mar 2016, 2:11 AM
#25
feznizzle avatar

feznizzle

Totally Zenned

Join Date:
Apr 2010
Posts:
900
Plugin Contributions:
0

Re: JS/CSS thumbnail slider for additional images

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... :blink:

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

28 Mar 2016, 2:21 AM
#26
feznizzle avatar

feznizzle

Totally Zenned

Join Date:
Apr 2010
Posts:
900
Plugin Contributions:
0

Re: JS/CSS thumbnail slider for additional images

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.

28 Mar 2016, 2:31 AM
#27
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: JS/CSS thumbnail slider for additional images

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

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... :blink:

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

28 Mar 2016, 2:44 AM
#28
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: JS/CSS thumbnail slider for additional images

This is really an awesome responsive carousel for anyone that comes across this thread.

product info page (basic responsive carousel)

28 Mar 2016, 2:48 AM
#29
feznizzle avatar

feznizzle

Totally Zenned

Join Date:
Apr 2010
Posts:
900
Plugin Contributions:
0

Re: JS/CSS thumbnail slider for additional images

Awesomeness!!

One last minor glitch. When no scroll is triggered, the additional images stack. Here is a link:
http://0stage.justmedicalDOTbiz/index.php?main_page=product_info&cPath=&products_id=159

I'm pretty sure that goes back to this:
https://www.zen-cart.com/showthread.php?219825-JS-CSS-thumbnail-slider-for-additional-images&p=1307260#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...

28 Mar 2016, 2:51 AM
#30
feznizzle avatar

feznizzle

Totally Zenned

Join Date:
Apr 2010
Posts:
900
Plugin Contributions:
0

Re: JS/CSS thumbnail slider for additional images

rbarbour:

This is really an awesome responsive carousel for anyone that comes across this thread.

product info page (basic responsive carousel)

I agree, digging it!

But what is that screenshot?

When I dl'ed the slick package, I saw a bunch of .exe type files, but I'm on a mac. Is there a software package for pc for generating the slider?

28 Mar 2016, 3:09 AM
#31
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: JS/CSS thumbnail slider for additional images

thats the slider on one of my new templates

Feznizzle:

I agree, digging it!

But what is that screenshot?

When I dl'ed the slick package, I saw a bunch of .exe type files, but I'm on a mac. Is there a software package for pc for generating the slider?

28 Mar 2016, 3:19 AM
#33
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: JS/CSS thumbnail slider for additional images

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"

Feznizzle:

Awesomeness!!

One last minor glitch. When no scroll is triggered, the additional images stack. Here is a link:
http://0stage.justmedicalDOTbiz/index.php?main_page=product_info&cPath=&products_id=159

I'm pretty sure that goes back to this:
https://www.zen-cart.com/showthread.php?219825-JS-CSS-thumbnail-slider-for-additional-images&p=1307260#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...

28 Mar 2016, 3:29 AM
#34
feznizzle avatar

feznizzle

Totally Zenned

Join Date:
Apr 2010
Posts:
900
Plugin Contributions:
0

Re: JS/CSS thumbnail slider for additional images

I double, tripled checked. It in both the default and my_template:

    $list_box_contents[$row][$col] = array('params' => 'class="additionalImages centeredContent back"' . ' ' . 'style="width:' . $col_width . '%;"',
28 Mar 2016, 3:38 AM
#35
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: JS/CSS thumbnail slider for additional images

Your view source says otherwise

<div id="productAdditionalImages"><div class="centeredContent">
      <script language="javascript" type="text/javascript"><!--

Your looking in
/includes/modules/premium6a/additional_images.php

Feznizzle:

I double, tripled checked. It in both the default and my_template:

$list_box_contents[$row][$col] = array('params' => 'class="additionalImages centeredContent back"' . ' ' . 'style="width:' . $col_width . '%;"',
28 Mar 2016, 3:41 AM
#36
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: JS/CSS thumbnail slider for additional images

my fault

in tpl_modules_additional_images.php

find:

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

change to:

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

Feznizzle:

I double, tripled checked. It in both the default and my_template:

$list_box_contents[$row][$col] = array('params' => 'class="additionalImages centeredContent back"' . ' ' . 'style="width:' . $col_width . '%;"',
28 Mar 2016, 3:41 AM
#37
feznizzle avatar

feznizzle

Totally Zenned

Join Date:
Apr 2010
Posts:
900
Plugin Contributions:
0

Re: JS/CSS thumbnail slider for additional images

Here is that entire file:

<?php
/**
 * additional_images module
 *
 * Prepares list of additional product images to be displayed in template
 *
 * @package templateSystem
 * @copyright Copyright 2003-2011 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: additional_images.php 18697 2011-05-04 14:35:20Z wilt $
 */
if (!defined('IS_ADMIN_FLAG')) {
  die('Illegal Access');
}
if (!defined('IMAGE_ADDITIONAL_DISPLAY_LINK_EVEN_WHEN_NO_LARGE')) define('IMAGE_ADDITIONAL_DISPLAY_LINK_EVEN_WHEN_NO_LARGE','Yes');
$images_array = array();

// do not check for additional images when turned off
if ($products_image != '' && $flag_show_product_info_additional_images != 0) {
  // prepare image name
  $products_image_extension = substr($products_image, strrpos($products_image, '.'));
  $products_image_base = str_replace($products_image_extension, '', $products_image);

  // if in a subdirectory
  if (strrpos($products_image, '/')) {
    $products_image_match = substr($products_image, strrpos($products_image, '/')+1);
    //echo 'TEST 1: I match ' . $products_image_match . ' - ' . $file . ' -  base ' . $products_image_base . '<br>';
    $products_image_match = str_replace($products_image_extension, '', $products_image_match) . '_';
    $products_image_base = $products_image_match;
  }

  $products_image_directory = str_replace($products_image, '', substr($products_image, strrpos($products_image, '/')));
  if ($products_image_directory != '') {
    $products_image_directory = DIR_WS_IMAGES . str_replace($products_image_directory, '', $products_image) . "/";
  } else {
    $products_image_directory = DIR_WS_IMAGES;
  }

  // Check for additional matching images
  $file_extension = $products_image_extension;
  $products_image_match_array = array();
  if ($dir = @dir($products_image_directory)) {
    while ($file = $dir->read()) {
      if (!is_dir($products_image_directory . $file)) {
        if (substr($file, strrpos($file, '.')) == $file_extension) {
          if(preg_match('/\Q' . $products_image_base . '\E/i', $file) == 1) {
            if ($file != $products_image) {
              if ($products_image_base . str_replace($products_image_base, '', $file) == $file) {
                // echo 'MIKEY ABOVE';
                $images_array[] = $file;
              } else {
                //  echo 'I AM NOT A MATCH ' . $file . '<br>';
              }
            }
          }
        }
      }
    }
    if (sizeof($images_array)) {
      sort($images_array);
    }
    $dir->close();
  }
}

// Build output based on images found
$num_images = sizeof($images_array);
$list_box_contents = '';
$title = '';

if ($num_images) {
  $row = 0;
  $col = 0;
  if ($num_images < IMAGES_AUTO_ADDED || IMAGES_AUTO_ADDED == 0 ) {
    $col_width = floor(100/$num_images);
  } else {
    $col_width = floor(100/IMAGES_AUTO_ADDED);
  }

  for ($i=0, $n=$num_images; $i<$n; $i++) {
    $file = $images_array[$i];
    $products_image_large = str_replace(DIR_WS_IMAGES, DIR_WS_IMAGES . 'large/', $products_image_directory) . str_replace($products_image_extension, '', $file) . IMAGE_SUFFIX_LARGE . $products_image_extension;
//  Begin Image Handler changes 1 of 2
	if (function_exists('handle_image')) {
		$newimg = handle_image($products_image_large, addslashes($products_name), LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT, '');
		list($src, $alt, $width, $height, $parameters) = $newimg;
		$products_image_large = zen_output_string($src);
	} 
	$flag_has_large = file_exists($products_image_large);
//  End Image Handler changes 1 of 2
    $products_image_large = ($flag_has_large ? $products_image_large : $products_image_directory . $file);
    $flag_display_large = (IMAGE_ADDITIONAL_DISPLAY_LINK_EVEN_WHEN_NO_LARGE == 'Yes' || $flag_has_large);
    $base_image = $products_image_directory . $file;
    $thumb_slashes = zen_image(addslashes($base_image), addslashes($products_name), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT);
//  Begin Image Handler changes 2 of 2
//  remove additional single quotes from image attributes (important!)
    $thumb_slashes = preg_replace("/([^\\\\])'/", '$1\\\'', $thumb_slashes);
//  End Image Handler changes 2 of 2
    $thumb_regular = zen_image($base_image, $products_name, SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT);
    $large_link = zen_href_link(FILENAME_POPUP_IMAGE_ADDITIONAL, 'pID=' . $_GET['products_id'] . '&pic=' . $i . '&products_image_large_additional=' . $products_image_large);

    // Link Preparation:
    // bof Zen Colorbox 2012-04-30 niestudio
    if(function_exists('zen_colorbox')){
      include 'zen_colorbox.php';
    } else {
      $script_link = '<script language="javascript" type="text/javascript"><!--' . "\n" . 'document.write(\'' . ($flag_display_large ? '<a href="javascript:popupWindow(\\\'' . str_replace($products_image_large, urlencode(addslashes($products_image_large)), $large_link) . '\\\')">' . $thumb_slashes . '<br />' . TEXT_CLICK_TO_ENLARGE . '</a>' : $thumb_slashes) . '\');' . "\n" . '//--></script>';
    }
    // eof Zen Colorbox 2012-04-30 niestudio

    $noscript_link = '<noscript>' . ($flag_display_large ? '<a href="' . zen_href_link(FILENAME_POPUP_IMAGE_ADDITIONAL, 'pID=' . $_GET['products_id'] . '&pic=' . $i . '&products_image_large_additional=' . $products_image_large) . '" target="_blank">' . $thumb_regular . '<br /><span class="imgLinkAdditional">' . TEXT_CLICK_TO_ENLARGE . '</span></a>' : $thumb_regular ) . '</noscript>';

    //      $alternate_link = '<a href="' . $products_image_large . '" onclick="javascript:popupWindow(\''. $large_link . '\') return false;" title="' . $products_name . '" target="_blank">' . $thumb_regular . '<br />' . TEXT_CLICK_TO_ENLARGE . '</a>';

    $link = $script_link . "\n      " . $noscript_link;
    //      $link = $alternate_link;

    // List Box array generation:
    $list_box_contents[$row][$col] = array('params' => 'class="additionalImages centeredContent back"' . ' ',
    'text' => "\n      " . $link);
    $col ++;
    if ($col > (IMAGES_AUTO_ADDED -1)) {
      $col = 0;
      $row ++;
    }
  } // end for loop
} // endif
28 Mar 2016, 3:48 AM
#38
feznizzle avatar

feznizzle

Totally Zenned

Join Date:
Apr 2010
Posts:
900
Plugin Contributions:
0

Re: JS/CSS thumbnail slider for additional images

Awesomeness! You da main man! ~~