[Skip to main content](#vessel-content) # Javascript Issue on Product details pages ## - **[ssbuchan](/forum/user/33637-ssbuchan "View ssbuchan's Profile")** - [![ssbuchan's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/33637-ssbuchan "View ssbuchan's Profile") Topic Author - [ Offline](/forum/user/33637-ssbuchan) Less More - Posts: 21 - Thank you received: 3 - - 12 years 1 month ago [\#172909](#172909) by [ssbuchan](/forum/user/33637-ssbuchan "View ssbuchan's Profile") *[Javascript Issue on Product details pages](/forum/26-product-category-display/871837-javascript-issue-on-product-details-pages#172909 "-- HikaShop version -- : 2.3.2 -- Joomla version -- : 3.3.3 -- PHP version -- : 5.3 Hi, I have created a slider for the product image thumbnails. You can see this on a development site in the link I submitted with this post. The slider consists of some html and some javascript. My code for the slider and javascript is in the file products / show_block_img.php I'm having an issue on any product pages that contain a dropdown with characteristics. My thumbnail slider works perfectly until I make a selection from the dropdown. After I make a selection the slider no longer functions. All of the code seems to be visible in the page's html, but for some reason it stops working. What can I do to fix this? Thanks!")* was created by *[ssbuchan](/forum/user/33637-ssbuchan "View ssbuchan's Profile")* -- HikaShop version -- : 2.3.2 -- Joomla version -- : 3.3.3 -- PHP version -- : 5.3 Hi, I have created a slider for the product image thumbnails. You can see this on a development site in the link I submitted with this post. The slider consists of some html and some javascript. My code for the slider and javascript is in the file products / show_block_img.php I'm having an issue on any product pages that contain a dropdown with characteristics. My thumbnail slider works perfectly until I make a selection from the dropdown. After I make a selection the slider no longer functions. All of the code seems to be visible in the page's html, but for some reason it stops working. What can I do to fix this? Thanks! Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzE4MzctamF2YXNjcmlwdC1pc3N1ZS1vbi1wcm9kdWN0LWRldGFpbHMtcGFnZXM/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86290 - Thank you received: 14268 - - 12 years 1 month ago [\#172968](#172968) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Javascript Issue on Product details pages](/forum/26-product-category-display/871837-javascript-issue-on-product-details-pages#172968 "-- HikaShop version -- : 2.3.2 -- Joomla version -- : 3.3.3 -- PHP version -- : 5.3 Hi, I have created a slider for the product image thumbnails. You can see this on a development site in the link I submitted with this post. The slider consists of some html and some javascript. My code for the slider and javascript is in the file products / show_block_img.php I'm having an issue on any product pages that contain a dropdown with characteristics. My thumbnail slider works perfectly until I make a selection from the dropdown. After I make a selection the slider no longer functions. All of the code seems to be visible in the page's html, but for some reason it stops working. What can I do to fix this? Thanks!")* Hi, The characteristic system works like this: - the HTML of the data of each variant is stored in hidden (display:none) divs on the page. - when you change the value of a characteristic dropdown, it triggers a javascript function - that function will copy automatically the HTML of the variant data over the HTML of the default variant data displayed on the page. - this includes the HTML of the image display. So in your case, I guess that the issue is that your custom javascript gets messed up during that copy. The simplest is to edit product/show.php and remove the hidden image HTML of the variants from the pages (loadTemplate on show_block_img). That way, the copy won't happen for the product image and your code won't be affected by the selection of the variants. The following user(s) said Thank You: [ssbuchan](/forum/user/33637-ssbuchan "View ssbuchan's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzE4MzctamF2YXNjcmlwdC1pc3N1ZS1vbi1wcm9kdWN0LWRldGFpbHMtcGFnZXM/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[ssbuchan](/forum/user/33637-ssbuchan "View ssbuchan's Profile")** - [![ssbuchan's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/33637-ssbuchan "View ssbuchan's Profile") Topic Author - [ Offline](/forum/user/33637-ssbuchan) Less More - Posts: 21 - Thank you received: 3 - - 12 years 1 month ago [\#173082](#173082) by [ssbuchan](/forum/user/33637-ssbuchan "View ssbuchan's Profile") Replied by *[ssbuchan](/forum/user/33637-ssbuchan "View ssbuchan's Profile")* on topic *[Javascript Issue on Product details pages](/forum/26-product-category-display/871837-javascript-issue-on-product-details-pages#173082 "-- HikaShop version -- : 2.3.2 -- Joomla version -- : 3.3.3 -- PHP version -- : 5.3 Hi, I have created a slider for the product image thumbnails. You can see this on a development site in the link I submitted with this post. The slider consists of some html and some javascript. My code for the slider and javascript is in the file products / show_block_img.php I'm having an issue on any product pages that contain a dropdown with characteristics. My thumbnail slider works perfectly until I make a selection from the dropdown. After I make a selection the slider no longer functions. All of the code seems to be visible in the page's html, but for some reason it stops working. What can I do to fix this? Thanks!")* Works perfectly! Thanks! Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzE4MzctamF2YXNjcmlwdC1pc3N1ZS1vbi1wcm9kdWN0LWRldGFpbHMtcGFnZXM/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[armanemadi](/forum/user/34695-armanemadi "View armanemadi's Profile")** - [![armanemadi's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar34695.jpg)](/forum/user/34695-armanemadi "View armanemadi's Profile") - [ Offline](/forum/user/34695-armanemadi) Less More - Posts: 49 - Thank you received: 0 - - - - 11 years 10 months ago [\#184445](#184445) by [armanemadi](/forum/user/34695-armanemadi "View armanemadi's Profile") Replied by *[armanemadi](/forum/user/34695-armanemadi "View armanemadi's Profile")* on topic *[Javascript Issue on Product details pages](/forum/26-product-category-display/871837-javascript-issue-on-product-details-pages#184445 "-- HikaShop version -- : 2.3.2 -- Joomla version -- : 3.3.3 -- PHP version -- : 5.3 Hi, I have created a slider for the product image thumbnails. You can see this on a development site in the link I submitted with this post. The slider consists of some html and some javascript. My code for the slider and javascript is in the file products / show_block_img.php I'm having an issue on any product pages that contain a dropdown with characteristics. My thumbnail slider works perfectly until I make a selection from the dropdown. After I make a selection the slider no longer functions. All of the code seems to be visible in the page's html, but for some reason it stops working. What can I do to fix this? Thanks!")* hi @ssbuchan i need this thumbnails scroll can you share it with me ?? tanks --- With them the Seed of Wisdom did I sow, And with my own hand labour’d it to grow: And this was all the Harvest that I reap’d— “I came like Water, and like Wind I go.” Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzE4MzctamF2YXNjcmlwdC1pc3N1ZS1vbi1wcm9kdWN0LWRldGFpbHMtcGFnZXM/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[ssbuchan](/forum/user/33637-ssbuchan "View ssbuchan's Profile")** - [![ssbuchan's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/33637-ssbuchan "View ssbuchan's Profile") Topic Author - [ Offline](/forum/user/33637-ssbuchan) Less More - Posts: 21 - Thank you received: 3 - - 11 years 8 months ago [\#189725](#189725) by [ssbuchan](/forum/user/33637-ssbuchan "View ssbuchan's Profile") Replied by *[ssbuchan](/forum/user/33637-ssbuchan "View ssbuchan's Profile")* on topic *[Javascript Issue on Product details pages](/forum/26-product-category-display/871837-javascript-issue-on-product-details-pages#189725 "-- HikaShop version -- : 2.3.2 -- Joomla version -- : 3.3.3 -- PHP version -- : 5.3 Hi, I have created a slider for the product image thumbnails. You can see this on a development site in the link I submitted with this post. The slider consists of some html and some javascript. My code for the slider and javascript is in the file products / show_block_img.php I'm having an issue on any product pages that contain a dropdown with characteristics. My thumbnail slider works perfectly until I make a selection from the dropdown. After I make a selection the slider no longer functions. All of the code seems to be visible in the page's html, but for some reason it stops working. What can I do to fix this? Thanks!")* armanemadi, sorry for the long delay... This definitely could be put together better and be set up to alter it's layout much easier so it may give you a little bit of a headache, but here it is. You will need to edit the view **products/show\_img\_block.php** Directly above: Code: <div id="hikashop_small_image_div<?php echo $variant_name;?>" class="hikashop_small_image_div"> Paste: Code: <!-- sbSlider 1 of 2 --> <div style="width:100%; padding-bottom:10px;text-align:center;color:#eee;font-weight:bold;font-size:14px;margin-top:-20px;"> Product Images </div> <div id="sbSlider-container" style=""> <!-- left button --> <div style="float:left; margin-right:2px; width:10px;"> <div id="leftB" style="" title="Previous"> </div> </div> <!-- thumbnails --> <div style="margin-left:1px; height:37px; width:199px; background:#222; float:left; overflow:hidden;"> <div id="sbSlider" style="padding-left:1px; margin-top:-1px; position: relative;"> <div id="aImages" style="width:1000px;"> <!-- end sbSlider 1 of 2 --> And below the closing div, paste: Code: <!-- sbSlider 2 of 2 --> </div> </div> </div> <!-- right button --> <div style="float:left; margin-left:2px; width:11px;"> <div id="rightB" style="" title="Next"> </div> </div> </div> <div style="clear:both;"></div> <!-- end sbSlider 2 of 2 --> At the end of the last javascript tag, add this: Code: <script type="text/javascript"> jQuery.noConflict(); var numThumbs = <?php echo count($this->element->images);?>; var thumbNum = 4; var moveDist = 49; var theIndex = 0; jQuery("#leftB").click(function () { var p = jQuery("#sbSlider"); //fixes rapid clicking errors if( !p.is(':animated') ){ if(theIndex > 0){ jQuery("#sbSlider").animate({ "left": "+=" + moveDist + "px" }, "fast", function() { }); theIndex--; } } }); jQuery("#rightB").click(function () { var p = jQuery("#sbSlider"); //fixes rapid clicking errors if( !p.is(':animated') ){ if(theIndex < (numThumbs-thumbNum)){ jQuery("#sbSlider").animate({ "left": "-=" + moveDist + "px" }, "fast", function() { }); theIndex++; } } }); </script> In your template's css file place this: Code: /** product thumb slider **/ div#hikashop_product_left_part div .hikashop_small_image_div { text-align:left; padding:2px 0; } img.hikashop_child_image {margin:1px;margin-right:0px; border:1px solid #222; } img.hikashop_child_image { height:31px; } #sbSlider-container { margin:auto; margin-top:-5px; height:37px; width:225px; } #leftB { width:12px; height:37px; background: url('../images/arrow_left.png') no-repeat -2px 10px; cursor:pointer; } #rightB { width:11px; height:37px; background: url('../images/arrow_right.png') no-repeat -1px 10px; cursor:pointer; } /** end product thumb slider **/ Once you get that set up you can edit the sizes and everything to fit the layout you need, but you have to alter multiple areas in the code and in the css to do this. Also, some of the styles are directly in the code vs. in the style sheet. This is what I mean by it could be put together much better. The main html / template values I think you will want to work with will be: **height:37px** - this is in multiple places(html and template css) and would need to be the same everywhere. **width:1000px** - this is in the html code. this should be wide enough to contain all of your thumbnails. If it isn't wide enough you wont see all of the thumbnails as you scroll. **width:199px / width:225px** - these are in the the html code and template css, repectively. If 1 is changed the other will most likely need to be adjusted appropriately. The javascript values to change: **thumbNum** - this is the number of thumbnails you want visible at once. **moveDist** - how far, in pixels, the the scroller should advance each time one of the navigation arrows is clicked. This would be the image width + factoring in any applicable margins/padding. That's about it. Again, sorry for how messy and cumbersome it is, but it really wasn't fine tuned for ease of use. I hope it works for you and anyone else who may try to implement it. If you have any questions let me know. Thanks! The following user(s) said Thank You: [Jerome](/forum/user/80-jerome "View Jerome's Profile"), [armanemadi](/forum/user/34695-armanemadi "View armanemadi's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzE4MzctamF2YXNjcmlwdC1pc3N1ZS1vbi1wcm9kdWN0LWRldGFpbHMtcGFnZXM/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[armanemadi](/forum/user/34695-armanemadi "View armanemadi's Profile")** - [![armanemadi's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar34695.jpg)](/forum/user/34695-armanemadi "View armanemadi's Profile") - [ Offline](/forum/user/34695-armanemadi) Less More - Posts: 49 - Thank you received: 0 - - - - 11 years 8 months ago [\#189733](#189733) by [armanemadi](/forum/user/34695-armanemadi "View armanemadi's Profile") Replied by *[armanemadi](/forum/user/34695-armanemadi "View armanemadi's Profile")* on topic *[Javascript Issue on Product details pages](/forum/26-product-category-display/871837-javascript-issue-on-product-details-pages#189733 "-- HikaShop version -- : 2.3.2 -- Joomla version -- : 3.3.3 -- PHP version -- : 5.3 Hi, I have created a slider for the product image thumbnails. You can see this on a development site in the link I submitted with this post. The slider consists of some html and some javascript. My code for the slider and javascript is in the file products / show_block_img.php I'm having an issue on any product pages that contain a dropdown with characteristics. My thumbnail slider works perfectly until I make a selection from the dropdown. After I make a selection the slider no longer functions. All of the code seems to be visible in the page's html, but for some reason it stops working. What can I do to fix this? Thanks!")* Hi tanks a lot for your sharing . دمت گرم :woohoo: :woohoo: :woohoo: :woohoo: :woohoo: --- With them the Seed of Wisdom did I sow, And with my own hand labour’d it to grow: And this was all the Harvest that I reap’d— “I came like Water, and like Wind I go.” Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzE4MzctamF2YXNjcmlwdC1pc3N1ZS1vbi1wcm9kdWN0LWRldGFpbHMtcGFnZXM/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. Board Categories HikaShop- Install & Update- Product & Category Display- Content Creation- Sales and Orders- - Orders management- - Reports & Statistics- Customers- Checkout- Payment Methods- Shipping Methods- Import & Export (CSV, XLS…)- Specific Features- - Affilation- - Taxes- - Wishlist- - Vote- - Carousel & Slider- - Mass Actions- - Filters & Search- - Discount & Coupon- - Feature Request- Integrations- Showcase- General Talk about HikaShop- Development- - HikaShop 3.0 Beta- Translation- Commercial Jobs HikaShop Components- HikaMarket- - Market: Feature requests- - Market: How to?- - Market: Bug Report- HikaSerial- - General talk about HikaSerial- - Serial: Bug Report- - Serial: How to?- - Support en Français de HikaSerial (French Support)- - HikaSubscription- HikaAuction- - Auction: Feature requests- - Auction: How to?- - Auction: Bug report Hikashop around the world- Support en Français (French Support)- Russian- - FAQ. Курс выживания с Hikashop. Частые вопросы и о- - Расширения Hikashop- - Наши сайты на Hikashop- 日本語版サポート(Japanese Support)- Thai- German Archives- Bug Report- How to? [](/forum/topics/feed/mode-topics?format=feed&type=rss) Time to create page: 0.284 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org) [](#top)