Instructions For Adding A Bootstrap Slider That Uses Imagemachine

bootstrap_slider_instructions.md

INSTRUCTIONS FOR ADDING A BOOTSTRAP SLIDER THAT USES IMAGEMACHINE

OBVIOUSLY THE BOOTSTRAP JS AND CSS WILL NEED TO BE INCLUDED ON THE PAGE BEFORE EXPECTING ANY OF THIS TO WORK

add this wherever the slider is supposed to go

<div id="product-carousel" class="carousel slide" data-interval="false" data-ride="carousel">
    <div class="carousel-inner" id="innerWrapper">
        <div id="remove-me" class="item active" data-variant="&mvt:variant_option:opt_code;" data-slide-no="&mvt:global:counter;">
          <img src="graphics/en-US/cssui/blank.gif" id="main_image" alt="&mvt:variant:variant_name;">
        </div>
    </div>
    <a class="left carousel-control" href="#product-carousel" role="button" data-slide="prev"><span class="previous">&#59237;</span></a>
    <a class="right carousel-control" href="#product-carousel" role="button" data-slide="next"><span class="next">&#59238;</span></a>
</div>

THIS SHOULD BE INSIDE A DOCUMENT READY OR AT THE BOTTOM OF THE PROD PAGE

var slider_number;`

**INITIATES CAROUSEL AND KEEPS IT FROM SLIDING BY DEFAULT**
$('#product-carousel').carousel({
  interval: false
});

**GETS DATA ATTRIBUTE FROM LI AND CHANGES SLIDE TO CORRECT POSITION**
$('#thumbnails').on('click', '.slider-control', function (e) {
    console.log($(e.target).parent().attr('data-slide-no'));
    var slider_number = $(e.target).parent().attr('data-slide-no');
    $('#product-carousel').carousel(parseInt(slider_number));
});

**RESETS COUNTER FOR IMAGEMACHINE AND ADDS CONTENTS THAT IMAGEMACHINE CREATES**


MivaEvents.SubscribeToEvent('variant_changed', function (product_data) {
    slider_iterator = 0;
    $('#innerWrapper').html(temp_div);
});

** ADD THIS BEFORE IMAGE MACHINE FUNCTION** var slider_iterator = 0;

ADD THIS INTO THE BEGINNING OF IMAGEMACHINE FUNCTION SET FIRST ITEM AS ACTIVE AND SET DATA ATTRIBUTES ** - DATA ATTRIBUTES ARE USED TO DETERMINE SLIDE POSITION**

if (slider_iterator == 0) {
    var addtl_img = $('<div class="item active"><img src="'+main_image+'"></div>'); 
} else {
    var addtl_img = $('<div class="item"><img src="'+main_image+'"></div>');
}
$('#innerWrapper').hide().append(addtl_img).fadeIn(200);

ADD THIS AFTER thumbnail is created

**ADDS DATA ATTRIBUTE TO EACH LI AS WELL AS slider-control class**
** -slider-control CLASS IS USED TO TARGET DATA ATTRIBUTE**

thumbnail.setAttribute('data-slide-no',slider_iterator);
thumbnail.setAttribute('class','slider-control');

ADD THIS JUST BEFORE RETURN OF FUNCTION

**SO THAT IMAGE MACHINE ALWAYS HAS A MAIN IMAGE TO REFERENCE**
temp_div = $('#remove-me').detach();

**HIDES CONTROLS IF THERE AREN'T THUMBNAILS VISIBLE**
if (!$('.slider-control').is(':visible')) {
    $('.carousel-control').hide();
} else {
    $('.carousel-control').show();
}
** ADD 1 TO COUNTER FOR NEXT ITERATION**
slider_iterator = slider_iterator+1;