Announcement

Collapse
No announcement yet.

Bootstrap Carousel for Product Thumbnails?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Bootstrap Carousel for Product Thumbnails?

    I am working on a site built using the Base readytheme. I have modified the ImageMachine to incorporate Photoswipe (this part works fine), and am now attempting to put the thumbnails into a carousel using the code from this page: https://codepen.io/JacobLett/pen/PGeKez. I have the code generating correctly for each of the images, but I can't figure out how to add the "active" class to just the first thumbnail (tried targeting the :first-child of carousel-inner but it throws a console error that carousel-inner is not defined), and the cloned images aren't being generated. I also can't get the carousel controls to display -- the contents of #thumbnails are apparently being completely overwritten.

    The html:
    Code:
    <div class="thumbnails carousel carousel-showmanymoveone slide">
    <div id="thumbnails" class="carousel-inner">
    <a class="left carousel-control" href="#carousel-tilenav" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
    <a class="right carousel-control" href="#carousel-tilenav" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
    </div>
    </div>

    The ImageMachine code:
    Code:
    ImageMachine.prototype.PhotoSwipe = {};
    ImageMachine.prototype.PhotoSwipe_Products = {};
    ImageMachine.prototype.PhotoSwipe.element = document.querySelectorAll('.pswp')[0];
    ImageMachine.prototype.PhotoSwipe.options = {
    index: 0,
    bgOpacity: 0.7,
    loop: true,
    closeOnScroll: false,
    timeToIdle: 10000
    };
    ImageMachine.prototype.PhotoSwipe_Update = function(product_code){
    ImageMachine.prototype.PhotoSwipe_Products[product_code].gallery = new PhotoSwipe( ImageMachine.prototype.PhotoSwipe.element, PhotoSwipeUI_Default, ImageMachine.prototype.PhotoSwipe_Products[product_code].images, ImageMachine.prototype.PhotoSwipe.options);
    ImageMachine.prototype.PhotoSwipe_Products[product_code].gallery.listen('afterChange', function(a,b,c) {
    var thumbnailIndex = ImageMachine.prototype.PhotoSwipe_Products[product_code].gallery.getCurrentIndex() + 1;
    $('#thumbnails > div:nth-child(' + thumbnailIndex + ')').trigger('click');
    });
    
    ImageMachine.prototype.PhotoSwipe_Products[product_code].gallery.init();
    
    };
    
    ImageMachine.prototype._oninitialize = ImageMachine.prototype.oninitialize;
    ImageMachine.prototype.oninitialize = function() {
    ImageMachine.prototype.PhotoSwipe_Products[this.product_code] = {
    images: [],
    gallery: {}
    };
    
    ImageMachine.prototype._oninitialize.apply(this, arguments);
    };
    
    ImageMachine.prototype._onmainimageclick = ImageMachine.prototype.onmainimageclick;
    ImageMachine.prototype.onmainimageclick = function() {
    ImageMachine.prototype.PhotoSwipe_Update(this.prod uct_code);
    };
    
    ImageMachine.prototype._onthumbnailimageclick = ImageMachine.prototype.onthumbnailimageclick;
    ImageMachine.prototype.onthumbnailimageclick = function(data) {
    var index = $('[src="' + data.image_data[1] + '"]').parent().index();
    ImageMachine.prototype.PhotoSwipe.options.index = index;
    ImageMachine.prototype._onthumbnailimageclick.apply(this, arguments);
    };
    
    ImageMachine.prototype.ImageMachine_Generate_Thumb nail = function( thumbnail_image, main_image, closeup_image, type_code ) {
    var thumbnail,
    span,
    wrapper,
    img;
    
    thumbnail = document.createElement('div');
    thumbnail.className = 'item';
    span = document.createElement('span');
    wrapper = document.createElement('div');
    wrapper.classList.add('col-xs-12', 'col-sm-6', 'col-md-2');
    
    thumbnail.appendChild(span);
    thumbnail.appendChild(wrapper);
    
    ImageMachine.prototype.PhotoSwipe_Products[this.product_code].images.push({
    src: closeup_image,
    w: 818,
    h: 1000
    });
    
    if (typeof(thumbnail_image) == 'string' && thumbnail_image.length > 0) {
    img = document.createElement('img');
    img.src = thumbnail_image;
    
    wrapper.appendChild(img);
    }
    
    return thumbnail;
    };
    The generated result:
    Code:
    <div class="thumbnails carousel carousel-showmanymoveone slide">
    <div id="thumbnails" class="carousel-inner">
    <div class="item"> <-- This div needs the active class added to it
    <span></span>
    <div class="col-xs-12 col-sm-6 col-md-2">
    <img src="graphics/00000001/8/image_82x100.jpg">
    </div>
    </div>
    <div class="item">
    <span></span>
    <div class="col-xs-12 col-sm-6 col-md-2">
    <img src="graphics/00000001/8/image2_82x100.jpg">
    </div>
    </div>
    ...
    </div>
    </div>
    Is what I'm trying to do even possible? Or do I need to bail on this approach and try something else?
Working...
X