ce7 Posted July 26, 2018 Share Posted July 26, 2018 I tried few zoom addons on 234.1 Edge (BS) version with KissIT Thumbnails, none of the zoom can works. (Did try the QTPro product_info.php which has a bit of 231 version code, and still no zoom effect) Found the boostrap zoom javascript online, and want to apply to product_info.php but no idea how the product image and thumbnails image code is defined in BS version. Google and found few fourms mentioned about includes/modules/header_tags/ is the place to go. I guess 2 files related to the product_info.php includes/modules/header_tags/ht_product_colorbox.php includes/modules/header_tags/ht_product_opengraph.php Can you expert guys please help me to learn how to make this zoom script to work? So far catalog/includes/template_top.php I have declared these <link href="..." rel="stylesheet"> <script src="...></script> Please find the html page source code to get a picture of what I am trying to describe: <h1>Click and Zoom</h1><!-- can comment this out --> <div class="Lens-gallery-container" id="demo-2"> <div class="Lens-container"> <div class="Lens-big-image-container"> <a class="Lens-lens-image" data-lens-image="images/samsung/galaxy_tab_1.jpg"> <img src="images/samsung/galaxy_tab_1.jpg" class="Lens-big-image"> </a> </div> </div> <div class="Lens-thumbnails-container"> <!-- # is target for linking to product_info.php --> <a href="#" class="Lens-thumbnail-wrapper" data-lens-image="images/samsung/large/galaxy_tab_2.jpg" data-big-image="images/samsung/medium/galaxy_tab_2.jpg"> <img src="images/samsung/thumbnail/galaxy_tab_1.2pg"> </a> <a href="#" class="Lens-thumbnail-wrapper" data-lens-image="images/samsung/large/galaxy_tab_3.jpg" data-big-image="images/samsung/medium/galaxy_tab_3.jpg"> <img src="images/samsung/thumbnail/galaxy_tab_1.3pg"> </a> <a href="#" class="Lens-thumbnail-wrapper" data-lens-image="images/samsung/large/galaxy_tab_4.jpg" data-big-image="images/samsung/medium/galaxy_tab_4.jpg"> <img src="images/samsung/thumbnail/galaxy_tab_1.4pg"> </a> </div> </div> It has a seperate gallery script and a zoom lens script. It is optional to use the gallery script as osC BS already have the product photo gallery built in. Original code has large images, medium images and thumbnails images, ideally, I like to put the images under the manufacturer folder, for example saumsung. (catalog/images/samsung/) and inside that folder, has these seperate image size folders, eg. catalog/images/samsung/large/ catalog/images/samsung/medium/ catalog/images/samsung/thumbnail/ or catalog/images/samsung/1000x1000/ catalog/images/samsung/250x250/ catalog/images/samsung/75x75/ with the KissIT Image Thumbnails/ in admin/configuration/images/ that default set as catalog/images/thumbs/ and the thumbnail images will automatically save into different size, eg. catalog/images/thumbs/100_57/ catalog/images/thumbs/640_480/ catalog/images/thumbs/100_80/ catalog/images/thumbs/83_83/ and the admin side thumbnails also saved here??? I also have image sub-directory installed so that I can assign the image folder location when I insert the image. =========== Question-1: =========== In which file and what part of the code that I need to add the <script> $(document).ready(function(){ . . . }); </script> =========== Question-2: =========== How can I organize the image size into the right folder location for this zoom script work? Thanks. Lyn Link to comment Share on other sites More sharing options...
♥JcMagpie Posted July 26, 2018 Share Posted July 26, 2018 You can add zoom effect to images with simple css. lots of ways to do this. https://www.w3schools.com/howto/howto_css_zoom_hover.asp You can see basic implementation on test site https://www.justfastfood.com/product_info.php/products_id/26 But it can be made more stylish with a bit more work. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted July 26, 2018 Share Posted July 26, 2018 if you want to implement in js then use the colorbox script jQuery Zoom by Jack More http://www.jacklmoore.com/zoom/ Link to comment Share on other sites More sharing options...
♥JcMagpie Posted July 26, 2018 Share Posted July 26, 2018 This test site shows the Jack More js zoom. https://tbyb.co.uk/product_info.php/microsoft-intellimouse-pro-p-3 Link to comment Share on other sites More sharing options...
ce7 Posted July 26, 2018 Author Share Posted July 26, 2018 6 hours ago, JcMagpie said: This test site shows the Jack More js zoom. https://tbyb.co.uk/product_info.php/microsoft-intellimouse-pro-p-3 @JcMagpie Thank you very much for the info and links!!! Well have a look and take time to learn! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.