How do I replace the large image with the poplet image & add an inner zoom on the large image?

[sleepingcatnz]

I need to replace the large image with the poplet image when clicked & also need an inner zoom on the large image. There doesn't seem to be a straightforward way of doing this. Is there js available for this please?.

[Liam Dilley]

Well this is ALL JS, Server side can not do dynamic events like hover and click.

Zoom wise you have zoom support on images (see the docs and the tag) so if you just want to use the BC out of the box solution then you can use that. This inserts javascript to get it to work.

You could code your own solution with small image/ thumbnail parameter on the large image, data source of the large image and a javascript solution. There are lots of jQuery image zoom solutions out there.

To have a large image click through and show attributes in a slider or anything like that - Custom solution, BC out of the box does not support this and if it did it would be a javascript solution as well.

You would again code it yourself or look to a jQuery plugin for image slider, form up poplet images with the large image in liquid in how the plugin would need them to be and implement as required.

[sleepingcatnz]

Thanks Liam, Is this something that you would be interested in doing? Page is: http://www.consignmentfurniture.co.nz/store/product-1# <http://www.consignmentfurniture.co.nz/store/product-1#> As a designer, I spend too much time on coding - html & css is fine but js? Outsourcing is a better option for this. Please let me know so I can move forward with this. Thanks, Glenn.

[sleepingcatnz]

Here are a couple of examples:

http://decornyc.com/monumental-french-louis-xv-style-carved-mirror <http://decornyc.com/monumental-french-louis-xv-style-carved-mirror>

http://hfoc.com.au/just-in/set-of-six-eames-plastic-side-chair-with-dowel-leg-dsw-for-vitra.html <http://hfoc.com.au/just-in/set-of-six-eames-plastic-side-chair-with-dowel-leg-dsw-for-vitra.html>

Layout as in current work-in-progress page:

http://www.consignmentfurniture.co.nz/store/product-1# <http://www.consignmentfurniture.co.nz/store/product-1#>

Best,

Glenn.

[sleepingcatnz]

Using one size for every image is preferable (rather than large & small images).

[dautm73766513]

http://kiyuco.com/tutorials/change-the-default-behavior-of-poplet-images-on-ecommerce-products

This is half way what you want to do.

I am looking for hover over to zoom, but I cannot figure out a way to populate correct URLs.

It is super simple to implement.

If you have any questions let me know.

[sleepingcatnz]

Thanks - I'm back on this soon.

[dautm73766513]

    This script goes in my template

        <script type="text/javascript">

        jQuery.noConflict();

        jQuery(document).ready(function() {

            jQuery('.productPopletsItem a').attr('onclick','').attr('rel','');

            jQuery('.productPopletsItem a').click(function(e){

                e.preventDefault();

                jQuery('div.image p.large-image img').attr('src', jQuery(this).attr('href'));

            });

        });       

  </script>

     This html goes in Individual Product - Large

    <div class="poplets">{tag_poplets}</div>

    <div class="image">

        <p class="large-image">{tag_largeimage}</p>

    </div>

P.S. I am using <p class="large-image"> because I was lazy and it would change other pictures on my page and I had to change a lot of css

If you don't have that problem you can use

     <div class="image">{tag_largeimage}

     </div>

[sleepingcatnz]

Great thank you! I'll try this out.

[sleepingcatnz]

Hi dautm73766513

My client now has product to add to the site. I've implemented the code as follows but haven't quite nailed it...

Default.html template:

<script type="text/javascript">

        jQuery.noConflict();

        jQuery(document).ready(function() {

            jQuery('.productPopletsItem a').attr('onclick','').attr('rel','');

            jQuery('.productPopletsItem a').click(function(e){

                e.preventDefault();

                jQuery('div.product-large p.largeimage_path img').attr('src', jQuery(this).attr('href'));

            });

        });      

  </script>

large-product.html:

<div class="product-large">

                <img src="{tag_largeimage_path}" class="scale-with-grid">

                 </div>

                 <div class="poplets">{tag_poplets}</div>

              </div>

Not sure what I'm doing wrong? http://www.consignmentfurniture.co.nz/store/product-1-1

[Liam Dilley]

Use the liquid output rather then the poplets tag. You get access to the raw data Glenn. With that in mind there are loads of online jQuery based product image switchers out there on the web.

[dautm73766513]

Try this - your classes and selectors are a bit messed up up there.

<script type="text/javascript">

        jQuery.noConflict();

        jQuery(document).ready(function() {

            jQuery('.productPopletsItem a').attr('onclick','').attr('rel','');

            jQuery('.productPopletsItem a').click(function(e){

                e.preventDefault();

                jQuery('div.product-large img.large').attr('src', jQuery(this).attr('href'));

            });

        });     

  </script>

HTML

<div class="product-large">

                <img class="large" src="{tag_largeimage_path}" class="scale-with-grid">

                 </div>

                 <div class="poplets">{tag_poplets}</div>

              </div>

[sleepingcatnz]

Thank you - this worked a treat! Now for the zoom...

[sleepingcatnz]

I meant to say - I included the js in the same large_product.html that did the trick.

[ut89947398]

Hi, i have a problem with the poolets in BC. how i can use the poplets as lightbox with slide and zoom function? this code is working but without a slider and only 1 image:

<div class="image"><a href="{tag_largeimage_path}" onclick="myLightbox.start(this); return false;" rel="lightbox[1]">

<img alt="" src="{tag_largeimage_path}?Action=thumbnail&Width=200&Height=200" /></a></div>

if i replace the {tag_largeimage_path} with {tag_poplets} it not work. only this function without the zoom is working:

{tag_poplets}

<div class="Hide_Poplet" style="display: none;">{tag_poplets}</div>

    <div class="prod-slider">

    <ul class="bxslider-prod"></ul>

    </div>

    </div>

<script>

        $('#Show_If_Animaux .Hide_Poplet table tr td').each(function(index, element) {

            var imgsrc = $('a',this).attr('href');

            $('#Show_If_Animaux .bxslider-prod').append('<li><img src="' + imgsrc + '" /></li>')

        });

</script>

<script>

    if($('.bxslider-prod li').length > 1)

    {

        $('.bxslider-prod').bxSlider({

            mode: 'horizontal',

            infiniteLoop: false,

            controls: true,

            pager: true

        });

    }

    else

    {

        $('.bxslider-prod').bxSlider({

            mode: 'horizontal',

            infiniteLoop: false,

            controls: true,

            pager: false

     });

     }

</script>

hope you can help. thanks.

[Liam Dilley]

Sorry Glen,

Another moderator did not like my post for some reason..

Just Drop brett[at]prettydigital.com an email Glenn.

I think your after...

- Large product shown by default, click left and right you get a slider of all the poplet images

- Hover over large image without clicking it does an image zoom or (what I think would be better) you click that or any of the poplet images and you have a model come up with a bigger image.

----

Not sure why, lol

[ut89947398]

I dont know how I change the function that it clicks on the displayed image.

[dautm73766513]

JQUERY HOVER ZOOM and POPLETS CHANGE ON CLICK

First render your poplets with liquid instead of the BC tag

        <table cellspacing="0" class="productPoplets">

            <tbody>

                {module_data version="v3" resource="products" resourceid="{{id}}" fields="poplets" collection="md_poplets" template=""}

               {% if md_poplets.poplets %}

               {% assign ppl = md_poplets.poplets | split: ";"%}

                <tr>

                    {% for item in ppl %}

                    <td class="productPopletsItem">

                        <a href="{{item}}"><img src="{{item}}?Action=thumbnail&width=160&height=160&USM=1" />

                        </a>

                    </td>

                    {% endfor %}

                </tr>

                {% endif %}

            </tbody>

        </table>

After that you need to render the large image

     <div class="image large" id="magnify">

        <div class="large-image">

            <div id="glass"></div>

            <img id="largeimage" class="small" src="{tag_largeimage_path}" alt="{tag_name}">

        </div>

    </div>

A little bit of css for the style so that things actually work

<style>

    .large-image {

        position: relative;

    }

    #glass {

        width: 200px;

        height: 200px;

        position: absolute;

        border-radius: 10px;

        border: 1px solid #666;

        z-index: 9;

        display: none;

    }

</style>

You need the jQuery that will change the large image as you click on a poplet, set the background for the hover zoom.

<script>

    jQuery.noConflict();

    jQuery(document).ready(function() {

        $('#glass').css('background', "url('{tag_largeimage_path}') no-repeat"); //you need this to set the initial zoom

        $('.productPopletsItem a').attr('onclick', '').attr('rel', '');

        $('.productPopletsItem a').click(function(e) {

            e.preventDefault();

            var imgURL = $(this).attr('href');

            $('#glass').css('background', "url('" + imgURL + "') no-repeat"); //this changes the zoomed picture

            $('#largeimage').attr('src', $(this).attr('href')); //this changes the large picture with the poplet that you click

        });

    });

</script>

And the actual zoom script is there

<script>

    $(document).ready(function() {

        if ('{system_visitorDeviceClass}' == 'desktop') {  //enabled only for desktop as it is Hover Zoom

            var native_width = 0;

            var native_height = 0;

            $("#magnify").mousemove(function(e) {

                var image_object = new Image();

                image_object.src = $("#largeimage").attr("src");

                native_width = image_object.width;

                native_height = image_object.height;

                var magnify_offset = $(this).offset();

                var mx = e.pageX - magnify_offset.left;

                var my = e.pageY - magnify_offset.top;

                if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) {

                    $("#glass").fadeIn(10);

                } else {

                    $("#glass").fadeOut(100);

                }

                if ($("#glass").is(":visible")) {

                    var rx = Math.round(mx / $("#largeimage").width() * native_width - $("#glass").width() / 2) * -1;

                    var ry = Math.round(my / $("#largeimage").height() * native_height - $("#glass").height() / 2) * -1;

                    var bgp = rx + "px " + ry + "px";

                    var px = mx - $("#glass").width() / 2;

                    var py = my - $("#glass").height() / 2;

                    $("#glass").css({

                        left: px,

                        top: py,

                        backgroundPosition: bgp

                    });

                }

            })

        }

    })

</script>

See it working on here Igo Pushchair Reflect White and Black - Mutsy | Bebemoda

I didn't create this script it was taken from here Magnifying glass for image zoom using Jquery and CSS3  and modified by me so it works in BC with multiple images

You need jquery 1.7.1 or later for this to work.

[sleepingcatnz]

Thank you,

This would have been ideal. I really appreciate your response & hope it helps others that need this as well. I ended up going with an out-of-the-box solution - Magic Zoom Plus that also works really well.

Best,

Glenn.