javascript - Separation of instances of Plugin from same Class -


i have created jquery plugin allows slider functionality created targeting specific class. in scenario if created 2 separate classes , 2 separate calls, separation works fine.

problem: possible have 1 class multiple instances , separating them out? currently, if select image thumbnail or use prev , next function, changes on both instances.

jsfiddle: http://jsfiddle.net/jagmitg/xcjeg06g/

(function ($) {      $.fn.thumbnailslider = function (options) {            var defaults = {              thumbnailactivation: false,              callback: function () {}          };            var _se = $.extend(defaults, options);            var $el = this,              thumbnailhandler = $el.find('.product-gallery-super'),              targetimg = $el.find('.main-image'),              superzoomparam = thumbnailhandler.find('.active-thumbnail').data('image-index'),                navigate = function (direction) {                  current = thumbnailhandler.find('.active-thumbnail');                  nextprevious = findnextpreviousactive(direction);                  current.removeclass('active-thumbnail');                  nextprevious.addclass('active-thumbnail');                  targetimg.attr('src', nextprevious.data('image'));                  enabledisablebuttons();              },                findnextpreviousactive = function (direction) {                  if (direction == 'next') {                      previousnext = thumbnailhandler.find('.active-thumbnail').nextall().not('.comingsoon').first();                  } else {                      previousnext = thumbnailhandler.find('.active-thumbnail').prevall().not('.comingsoon').first();                  }                  return previousnext;              },                enabledisablebuttons = function () {                  if (findnextpreviousactive('next').length === 0) {                      $el.find('.super-next').addclass('disabled').prop('disabled', true);                  } else {                      $el.find('.super-next').removeclass('disabled').removeprop('disabled');                  }                  if (findnextpreviousactive('prev').length === 0) {                      $el.find('.super-prev').addclass('disabled').prop('disabled', true);                  } else {                      $el.find('.super-prev').removeclass('disabled').removeprop('disabled');                  }              },                thumbnailactivator = function () {                  if (superzoomparam !== '') {                      thumbnailhandler.children().removeclass("active-thumbnail");                      thumbnailhandler.children().each(function (index, value) {                          if (superzoomparam === index) {                              $(this).addclass('active-thumbnail');                              targetimg.attr('src', thumbnailhandler.find('.active-thumbnail').data('image'));                              //newlookimp.resizebinder();                              enabledisablebuttons();                          }                      });                  }              },                clickactivator = function () {                  thumbnailhandler.children().on('click', function (e) {                      e.preventdefault(e);                      var zoomimg = $(this).attr('data-zoom-image');                      var prodimg = $(this).attr('data-image');                      var imgsrc = $(this).children().attr('src');                      if (imgsrc != '/images/imagecomingsoon_en.jpg') {                          $(this).addclass("active-thumbnail").siblings().removeclass("active-thumbnail");                          targetimg.attr('src', prodimg);                          targetimg.attr('data-zoom-image', zoomimg);                          //newlookimp.resizebinder();                      } else {                          console.log(prod.children());                          prod.addclass('comingsoon');                      }                      enabledisablebuttons();                  });              },                init = function () {                  (i = 0; < $el.size(); i++) {                        _se.callback();                        if (_se.thumbnailactivation) {                          _se.thumbnailactivator();                      }                        clickactivator();                        $el.find('.super-prev').click(function () {                          navigate("prev");                          return false;                      });                        $el.find('.super-next').click(function () {                          navigate("next");                          return false;                      });                    }              };            init();          return $el;      }  })(jquery);    $('.mainelement').thumbnailslider();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    <div class="mainelement">    <div class="super-image-thumb">      <div class="product-gallery-super">        <a href="#" class="product-zoom-gallery active-thumbnail" data-update="" data-image="http://dummyimage.com/50x100/000/fff.png&text=1" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=1" data-image-index="0">          <img src="http://dummyimage.com/50x100/000/fff.png&text=1" onerror="comingsoonthumb(this);this.parentnode.classname = 'product-zoom-gallery comingsoon';" />        </a>        <a href="#" class="product-zoom-gallery" data-image="http://dummyimage.com/200x200/000/fff.png&text=2" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=2" data-image-index="1">          <img src="http://dummyimage.com/50x100/000/fff.png&text=2" onerror="comingsoonthumb(this);this.parentnode.classname = 'product-zoom-gallery comingsoon';" />        </a>        <a href="#" class="product-zoom-gallery" data-image="http://dummyimage.com/200x200/000/fff.png&text=3" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=3" data-image-index="2">          <img src="http://dummyimage.com/50x100/000/fff.png&text=3" onerror="comingsoonthumb(this);this.parentnode.classname = 'product-zoom-gallery comingsoon';" />        </a>        <a href="#" class="product-zoom-gallery" data-image="http://dummyimage.com/200x200/000/fff.png&text=4" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=4" data-image-index="3">          <img src="http://dummyimage.com/50x100/000/fff.png&text=4" onerror="comingsoonthumb(this);this.parentnode.classname = 'product-zoom-gallery comingsoon';" />        </a>        <a href="#" class="product-zoom-gallery" data-image="http://dummyimage.com/200x200/000/fff.png&text=5" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=5" data-image-index="4">          <img src="http://dummyimage.com/50x100/000/fff.png&text=5" onerror="comingsoonthumb(this);this.parentnode.classname = 'product-zoom-gallery comingsoon';" />        </a>        <a href="#" class="product-zoom-gallery" data-image="http://dummyimage.com/200x200/000/fff.png&text=6" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=6" data-image-index="5">          <img src="http://dummyimage.com/50x100/000/fff.png&text=6" onerror="comingsoonthumb(this);this.parentnode.classname = 'product-zoom-gallery comingsoon';" />        </a>      </div>    </div>    <div class="main-image-container">      <img class="main-image image-resize" src="http://dummyimage.com/200x200/000/fff.png&text=1" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=1" onerror="comingsoonmain(this)" />      <button name="prev" class="super-prev" class="disabled">prev</button>      <button name="next" class="super-next">next</button>    </div>  </div>    <div class="mainelement">    <div class="super-image-thumb">      <div class="product-gallery-super">        <a href="#" class="product-zoom-gallery active-thumbnail" data-update="" data-image="http://dummyimage.com/50x100/000/fff.png&text=1" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=1" data-image-index="0">          <img src="http://dummyimage.com/50x100/000/fff.png&text=1" onerror="comingsoonthumb(this);this.parentnode.classname = 'product-zoom-gallery comingsoon';" />        </a>        <a href="#" class="product-zoom-gallery" data-image="http://dummyimage.com/200x200/000/fff.png&text=2" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=2" data-image-index="1">          <img src="http://dummyimage.com/50x100/000/fff.png&text=2" onerror="comingsoonthumb(this);this.parentnode.classname = 'product-zoom-gallery comingsoon';" />        </a>        <a href="#" class="product-zoom-gallery" data-image="http://dummyimage.com/200x200/000/fff.png&text=3" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=3" data-image-index="2">          <img src="http://dummyimage.com/50x100/000/fff.png&text=3" onerror="comingsoonthumb(this);this.parentnode.classname = 'product-zoom-gallery comingsoon';" />        </a>        <a href="#" class="product-zoom-gallery" data-image="http://dummyimage.com/200x200/000/fff.png&text=4" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=4" data-image-index="3">          <img src="http://dummyimage.com/50x100/000/fff.png&text=4" onerror="comingsoonthumb(this);this.parentnode.classname = 'product-zoom-gallery comingsoon';" />        </a>        <a href="#" class="product-zoom-gallery" data-image="http://dummyimage.com/200x200/000/fff.png&text=5" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=5" data-image-index="4">          <img src="http://dummyimage.com/50x100/000/fff.png&text=5" onerror="comingsoonthumb(this);this.parentnode.classname = 'product-zoom-gallery comingsoon';" />        </a>        <a href="#" class="product-zoom-gallery" data-image="http://dummyimage.com/200x200/000/fff.png&text=6" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=6" data-image-index="5">          <img src="http://dummyimage.com/50x100/000/fff.png&text=6" onerror="comingsoonthumb(this);this.parentnode.classname = 'product-zoom-gallery comingsoon';" />        </a>      </div>    </div>    <div class="main-image-container">      <img class="main-image image-resize" src="http://dummyimage.com/200x200/000/fff.png&text=1" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=1" onerror="comingsoonmain(this)" />      <button name="prev" class="super-prev" class="disabled">prev</button>      <button name="next" class="super-next">next</button>    </div>  </div>


-

Comments

Post a Comment

Popular posts from this blog

c# - Binding a comma separated list to a List<int> in asp.net web api -

the default binder in web api expecst http://url.com/webapi/report/?pageids=3243&pageids=2365 to bind public ihttpactionresult report(list<int> pageids){ // exciting webapi code} i wish bind http://url.com/webapi/report/?pageids=3243,2365 as running out of space in url get . i have created class public class commaseparatedmodelbinder : system.web.http.modelbinding.imodelbinder { public bool bindmodel(httpactioncontext actioncontext, modelbindingcontext bindingcontext) { //binding in here } } and registered in webapiconfig.cs var provider = new simplemodelbinderprovider( typeof(list<int>), new commaseparatedmodelbinder()); config.services.insert(typeof(modelbinderprovider), 0, provider); i have altered method signature use model binder so public ihttpactionresult report( [modelbinder] list<int> pageids){ // exciting webapi code} however break point in binder not being
Read more

Delphi 7 and decode UTF-8 base64 -

in delphi 7, have widestring encoded base64(that received web service widestring result) : pd94bwwgdmvyc2lvbj0ims4wij8+dqo8c3ryaw5nptiq2lpyqjwvc3ryaw5npg== when decoded it, result not utf-8: <?xml version="1.0"?> <string>طھط³طھ</string> but when decoded base64decode.org, result true : <?xml version="1.0"?> <string>تست</string> i have use encddecd unit decodestring function. the problem have using decodestring . function, in delphi 7, treats decoded binary data being ansi encoded. , problem text utf-8 encoded. to continue encddecd unit have couple of options. can switch decodestream . instance, code produce utf-8 encoded text file data: {$apptype console} uses classes, encddecd; const data = 'pd94bwwgdmvyc2lvbj0ims4wij8+dqo8c3ryaw5nptiq2lpyqjwvc3ryaw5npg=='; var input: tstringstream; output: tfilestream; begin input := tstringstream.create(data); try output := tfilestream.
Read more

html - Is there any way to exclude a single element from the style? (Bootstrap) -

so, have img logo, overlaid on div styled background-image: url("...") , , both elements inside 2 div classes .to-color , .to-overlay respectively, black transparent overlay. is there way exclude logo style given these 2 classes? here's jsfiddle example: link html , css example: - html - <div class="to-color"> <div class="to-overlay"> <div class="respo"> <div class="row"> <div class="col-xs-4 col-xs-offset-4 text-center"> <img src="http://ansonalex.com/wp-content/uploads/2011/06/google-logo-768x260.png" alt="..." class="img-responsive"> </div> </div> </div> </div> </div> - css - .to-color { background-color: #000; } .to-overlay { opacity : 0.5; } .respo { background-image: url("https://source.unsplash.com/category/objects/1600x900"); background-position: center center;
Read more