Announcement

Collapse
No announcement yet.

How to enlarge the product page additional image thumbnails

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • How to enlarge the product page additional image thumbnails

    Using one of the recent HTML5 responsive templates. Below the main image, if you load additional images, is/are 50px wide thumbnails. I believe this is all driven by the 3DZoom script.

    I've figured out how to force the size of the thumbnails to be larger; unfortunately, I can't find where to adjust the width of the li style to give it enough room so the images don't overlap.

    The bit of code I'm struggling with is the 63.75px dimension below. I can force in a custom dimension in to the Inspector and it renders fine. I just can't find the 3DCart file to modify to make it load the size I want. Inspector shows it is coming from element.style. But, it is apparently calculated somewhere. Any ideas?

    Code:
    <li class="prod-thumb image1" style="width: 63.75px; float:...

  • #2
    Just in case anyone is interested, I found the solution.

    You need to perform two changes in your listing_x.html files

    1. for each of the 20 supported additional images, change the width of the thumbnail. To perform this, search for 'pimage' in your listing_x.html file. I have successfully used 95px in place of 50px to double the thumbnail size.

    Sidenote: image1 is the main image; the thumbnails begin with image2 as below; remember to make the following change for all 20 pimages in each listing_x.html file used.

    This is the original codeblock:
    Code:
    &lt;!--START: image2--&gt;
                                    &lt;li class="prod-thumb image1"&gt;&lt;a href="[image1]" rel="thumb-id:listing_main_image_link" rev="thumbnail.asp?file=[image1]&amp;maxx=[image_medium_w]&amp;maxy=0" onclick="javascript:image_click(1);return false;"&gt;&lt;img src="thumbnail.asp?file=[image1]&amp;maxx=50&amp;maxy=0" width="50" alt="" name="pimage1" /&gt;&lt;/a&gt;&lt;/li&gt;
    And after the change:

    Code:
    &lt;!--START: image2--&gt;
                                    &lt;li class="prod-thumb image1"&gt;&lt;a href="[image1]" rel="thumb-id:listing_main_image_link" rev="thumbnail.asp?file=[image1]&amp;maxx=[image_medium_w]&amp;maxy=0" onclick="javascript:image_click(1);return false;"&gt;&lt;img src="thumbnail.asp?file=[image1]&amp;maxx=95&amp;maxy=0" width="95" alt="" name="pimage1" /&gt;&lt;/a&gt;&lt;/li&gt;
    2. The 'width: 63.75px referenced in my original post is calculated at the time of page load. But, this value takes a parameter in the listing_x.html file as well. Search for "JQuery(document).ready(function(){

    This is near the end of the file. look for the parameter "itemWidth" within that JQuery call. By default my template was set to 50; I have successfully changed it to 95 to match the 95px defined in step 1.

    Original codeblock:

    Code:
    jQuery(document).ready(function() {
    
        jQuery('.carousel').flexslider({
            animation: "slide",
            animationLoop: true,
            slideshow: false,
            controlNav: false,
            itemWidth: 50,
    And after the change:

    Code:
    jQuery(document).ready(function() {
    
        jQuery('.carousel').flexslider({
            animation: "slide",
            animationLoop: true,
            slideshow: false,
            controlNav: false,
            itemWidth: 95,
    As usual, clear your site cache and local cache.

    Comment


    • #3
      This is on my list of things to do for a site refresh. I haven't done this and just thought I'd figure it out when I was ready to make the change, and now I don't have to! Thanks for sharing this - I probably would have overlooked the jquery change and become annoyed.
      - Dean P. e-commerce and small business consulting

      Comment


      • #4
        Done! I went with 100px. And I added a 2px black border around my images to separate them from the background. You can do that in layout.css by adding some image border code at the bottom. You have to make up your own ID name; I used "extraimgs"
        Code:
        #extraimgs {
            border-style: solid;
            border-color: #000;
            border-width: 2px;
        }
        Then you have to go back to that code block that dibble changed in listing_x.html and add
        Code:
        id="extraimgs"
        to every instance of the image code:

        Code:
        <li class="prod-thumb image1"><a href="[image1]" rel="thumb-id:listing_main_image_link" rev="thumbnail.asp?file=[image1]&maxx=[image_medium_w]&maxy=0" onclick="javascript:image_click(1);return false;"><img src="thumbnail.asp?file=[image1]&maxx=100&maxy=0" width="100" id="extraimgs" alt="" name="pimage1" /></a></li>
        Finally, (and you'll probably want to do this regardless of whether you add borders) you need to increase the height of that little image carousel that houses all these extra image thumbnails under the main product photo. You need to go back to layout.css and look for this:

        Code:
        #listing0 .addl-images {
            height: 75px;
            overflow: hidden;
            padding: 0 20px;
            position: relative;
        Last edited by DeanP; 11-03-2016, 04:14 PM.
        - Dean P. e-commerce and small business consulting

        Comment

        Working...
        X