feature: owl carousel integration

[tonykiefer]

Hello,

The zoom works on the primary image. I'm having trouble getting the images to swap.
I'm populating my gallery using a foreach.

Upon inspecting the element I also noticed the a href zoom image, for every thumb in the gallery, is the primary image!

Please help and advise

ElevateZoomPlus - Images won't swap.txt

[igorlino]

sorry, hadn't had time at all for anything.

Unless you create a plunker where one can reproduce the issue, for the time being I can only point you to look into the example of angular-based zoom-elevate.

Demo http://igorlino.github.io/angular-elevatezoom-plus/#/main

Source code: https://github.com/igorlino/angular-elevatezoom-plus/tree/master/demo

There you see how it interacts with the elevate zoom. Originally I also had problems, and made some corrections to make it work nice and pretty.

[tonykiefer]

Thank you for the input! I'm working on creating a sample in plunker but I also wanted to know... Is it a problem if I'm using the owl-carousel for the gallery? Specifically, I'm using a dual synced owl-carousel. I need the carousel functionality for the gallery. All my images are contained in a content management system...so I'm loading them using a loop. As I previously mentioned. The zoom only works on the first image.

[tonykiefer]

Also...do you know of any examples that combine the owl carousel with the elevatezoom

[igorlino]

I just took a look at the OWL carousel, it looks very interesting. I think we really need to create an integration for that library. I have done so for angular-colorbox and angular-fancybox-plus galleries.

The most important thing is to understand the lifecycle of the owl carousel. Which events are triggered when, and I think is not big problem to integrate the elevate zoom.

In the worst case you may re-create an elevate zoom per image.

Unfortunately, I don't have at the moment anytime to create any integration till January....

[tonykiefer]

That sounds great and I do agree. I think elevateZoom/Plus would work great with owlCarousel. I think the most practical use of the carousel is the dual synced version. There are several examples available... http://poligon.pro/owl/...and http://owlgraphic.com/owlcarousel/demos/sync.html. I'm currently using the first example. Let me know what you think....I'm excited to see the new development.

[ndoulgeridis]

Hello,

Is there any progress on this feature?

[igorlino]

Sorry, although I generally would spend some slot of time, due to private matters I have had zero(0) free time for any open source in the last 3 months and I feel its going to last more than that.

So, of course I would be happy if anyone steps in and would like to integrate/create a working example with the owl. (Just give it a try, I accept nearly all pull requests)

[didit80]

I try to integrated owl-carousel V1 slider sync with elevatezoom. add file jquery.elevatezoom.js before body end

example image slider sync change sync1 and sync2 from id to class javascript in html is

$(document).ready(function() { var sync1 = $(".sync1"); var sync2 = $(".sync2"); $(".zoom").elevateZoom({ tint:true, tintColour:'#F90', tintOpacity:0.5, gallery : "gallery_09", galleryActiveClass: "active", easing : true, scrollZoom : true });

  sync1.owlCarousel({
    singleItem : true,
    slideSpeed : 1000,
    navigation: true,
    pagination:false,
    afterAction : syncPosition,
    responsiveRefreshRate : 200,
  });

  sync2.owlCarousel({
    items : 4,
    itemsDesktop      : [1199,10],
    itemsDesktopSmall     : [979,10],
    itemsTablet       : [768,8],
    itemsMobile       : [479,4],
    pagination:false,
    responsiveRefreshRate : 100,
    afterInit : function(el){
      el.find(".owl-item").eq(0).addClass("synced");
    }
  });

  function syncPosition(el){
    var current = this.currentItem;
    $("#sync2")
      .find(".owl-item")
      .removeClass("synced")
      .eq(current)
      .addClass("synced")
    if($("#sync2").data("owlCarousel") !== undefined){
      center(current)
    }

  }

  $("#sync2").on("click", ".owl-item", function(e){
    e.preventDefault();
    var number = $(this).data("owlItem");
    sync1.trigger("owl.goTo",number);
  });

  function center(number){
    var sync2visible = sync2.data("owlCarousel").owl.visibleItems;

    var num = number;
    var found = false;
    for(var i in sync2visible){
      if(num === sync2visible[i]){
        var found = true;
      }
    }

    if(found===false){
      if(num>sync2visible[sync2visible.length-1]){
        sync2.trigger("owl.goTo", num - sync2visible.length+2)
      }else{
        if(num - 1 === -1){
          num = 0;
        }
        sync2.trigger("owl.goTo", num);
      }
    } else if(num === sync2visible[sync2visible.length-1]){
      sync2.trigger("owl.goTo", sync2visible[1])
    } else if(num === sync2visible[0]){
      sync2.trigger("owl.goTo", num-1)
    }
  }

});

[ibasaw]

just do like this

            $('.owl-carousel').on('changed.owl.carousel', function(event) {
                $(".data-zoom-image-{{ product.id }}").elevateZoom(
                        {
                            responsive: true,
                            imageCrossfade: true,
                            borderSize: 2
                        }
                );
            })

use a class for create the EZ, not an id

[ibasaw]

this not a perfect integration, get some bug in events...

Is someone can post a full working example of EZ + OWL ...

[aftabalamdev99]

Is there any one who solved the problem of EZ + OWL? I am having the same problem with integration of owl carosole and elevate zoom plugin integration. Any body has solved this issue then please paste the code here. Very much appreciated.

[leowebguy]

any luck on this? maybe a js jedi master to write a similar hook "getGalleryList" for owl?

 $("#img-zoom").bind("click", function(e) {  
      var ez = $('#img-zoom').data('elevateZoom');  
      //$.fancybox(ez.getGalleryList()); //original code
      //$.owlCarousel(ez.getGalleryListForOwl()); //we need this :)
      return false;
  });