Developer's Forum

Solving daily Web Developing problems

Developer's Forum Logo

How to add jqFancyTransitions.1.8.min.js and jQuery.js into widget

  1. Krite

    into the Matrix
    Joined: Nov '10
    Posts: 129

    offline

    How to add jqFancyTransitions.1.8.min.js and jQuery.js into widget for slide picture
    from create picture in static block
    and if i want add jqFancyTransitions.1.8.min.js and jQuery.js for use with the Fisher Price picture with a widget to do. please help me thank you very much.

    Posted 6 months ago #
  2. Rick

    Administrator
    Joined: May '10
    Posts: 397

    offline

    Sorry. I dont know this library jqFancyTransitions.1.8.min.js

    Posted 6 months ago #
  3. Krite

    into the Matrix
    Joined: Nov '10
    Posts: 129

    offline

    I looking in http://www.spinonesolutions.com/2010/10/magento-custom-widget/ and l want jQury in http://workshop.rs/projects/jqfancytransitions/ but i don't know how to create because i want a leanning this problem Please help me please.
    Note in http://www.spinonesolutions.com/2010/10/magento-custom-widget/ what did mean section 1-4 number 6,8,9,10. but i create static block picture slide Title : slide01 -04 and identifer : slide1-4 and i size picture is 655*372 px

    Note : this is my static block : and

    Posted 6 months ago #
  4. Rick

    Administrator
    Joined: May '10
    Posts: 397

    offline

    Well... i don't think you have to create different Static Blocks.

    The slideshow (all the images) should be in 1 Block.

    Then add the jQuery slideshow functions in the bottom of the static block. If it doesn't work I'm guessing you will have to put it in the footer of your theme.

    Regards

    Posted 6 months ago #
  5. Krite

    into the Matrix
    Joined: Nov '10
    Posts: 129

    offline

    The slideshow (all the images) should be in 1 Block.

    Then add the jQuery slideshow functions in the bottom of the static block. If it doesn't work I'm guessing you will have to put it in the footer of your theme.

    I reduced this line of code to the following
    What to do with you. please help me thank you.

    Posted 6 months ago #
  6. Rick

    Administrator
    Joined: May '10
    Posts: 397

    offline

    I recommend you to try to use this jQuery Slideshow in a static block.

    Make it work and then change with your own images:

    http://jquery.malsup.com/cycle/

    Good luck !

    Posted 6 months ago #
  7. Krite

    into the Matrix
    Joined: Nov '10
    Posts: 129

    offline

    Please help me in this code. i don't know where is Eror but it not work

    <style>
    .slideshow {
    position:relative;
    }
    .slideshow img {
    position:absolute;
    top:0px;
    left:0px;
    }
    /* If an image is wrapped in a link */
    .slideshow a.image {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:6;
    display:none;
    }
    /* The slices and boxes in the Slider */
    .slideshow-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
    }
    .slideshow-box {
    display:block;
    position:absolute;
    z-index:5;
    }
    /* Caption styles */
    .slideshow-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    opacity:0.8; /* Overridden by captionOpacity setting */
    width:100%;
    z-index:8;
    }
    .slideshow-caption p {
    padding:5px;
    margin:0;
    }
    .slideshow-caption a {
    display:inline !important;
    }
    .slideshow-html-caption {
    display:none;
    }
    /* Direction nav styles (e.g. Next & Prev) */
    .slideshow-directionNav a {
    position:absolute;
    top:45%;
    z-index:9;
    cursor:pointer;
    }
    .slideshow-prevNav {
    left:0px;
    }
    .slideshow-nextNav {
    right:0px;
    }
    /* Control nav styles (e.g. 1,2,3...) */
    .nivo-controlNav a {
    position:relative;
    z-index:9;
    cursor:pointer;
    }
    .slideshow a.active {
    font-weight:bold;
    }
    </style>

    <script>
    (function($) {

    var NivoSlider = function(element, options){
    //Defaults are below
    var settings = $.extend({}, $.fn.nivoSlider.defaults, options);

    //Useful variables. Play carefully.
    var vars = {
    currentSlide: 0,
    currentImage: '',
    totalSlides: 0,
    randAnim: '',
    running: false,
    paused: false,
    stop: false
    };

    //Get this slider
    var slider = $(element);
    slider.data('nivo:vars', vars);
    slider.css('position','relative');
    slider.addClass('nivoSlider');

    //Find our slider children
    var kids = slider.children();
    kids.each(function() {
    var child = $(this);
    var link = '';
    if(!child.is('img')){
    if(child.is('a')){
    child.addClass('nivo-imageLink');
    link = child;
    }
    child = child.find('img:first');
    }
    //Get img width & height
    var childWidth = child.width();
    if(childWidth == 0) childWidth = child.attr('width');
    var childHeight = child.height();
    if(childHeight == 0) childHeight = child.attr('height');
    //Resize the slider
    if(childWidth > slider.width()){
    slider.width(childWidth);
    }
    if(childHeight > slider.height()){
    slider.height(childHeight);
    }
    if(link != ''){
    link.css('display','none');
    }
    child.css('display','none');
    vars.totalSlides++;
    });

    //Set startSlide
    if(settings.startSlide > 0){
    if(settings.startSlide >= vars.totalSlides) settings.startSlide = vars.totalSlides - 1;
    vars.currentSlide = settings.startSlide;
    }

    //Get initial image
    if($(kids[vars.currentSlide]).is('img')){
    vars.currentImage = $(kids[vars.currentSlide]);
    } else {
    vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
    }

    //Show initial link
    if($(kids[vars.currentSlide]).is('a')){
    $(kids[vars.currentSlide]).css('display','block');
    }

    //Set first background
    slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');

    //Create caption
    slider.append(
    $('<div class="nivo-caption"><p></p></div>').css({ display:'none', opacity:settings.captionOpacity })
    );

    // Process caption function
    var processCaption = function(settings){
    var nivoCaption = $('.nivo-caption', slider);
    if(vars.currentImage.attr('title') != '' && vars.currentImage.attr('title') != undefined){
    var title = vars.currentImage.attr('title');
    if(title.substr(0,1) == '#') title = $(title).html();

    if(nivoCaption.css('display') == 'block'){
    nivoCaption.find('p').fadeOut(settings.animSpeed, function(){
    $(this).html(title);
    $(this).fadeIn(settings.animSpeed);
    });
    } else {
    nivoCaption.find('p').html(title);
    }
    nivoCaption.fadeIn(settings.animSpeed);
    } else {
    nivoCaption.fadeOut(settings.animSpeed);
    }
    }

    //Process initial caption
    processCaption(settings);

    //In the words of Super Mario "let's a go!"
    var timer = 0;
    if(!settings.manualAdvance && kids.length > 1){
    timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
    }

    //Add Direction nav
    if(settings.directionNav){
    slider.append('<div class="nivo-directionNav">'+ settings.prevText +''+ settings.nextText +'</div>');

    //Hide Direction nav
    if(settings.directionNavHide){
    $('.nivo-directionNav', slider).hide();
    slider.hover(function(){
    $('.nivo-directionNav', slider).show();
    }, function(){
    $('.nivo-directionNav', slider).hide();
    });
    }

    $('a.nivo-prevNav', slider).live('click', function(){
    if(vars.running) return false;
    clearInterval(timer);
    timer = '';
    vars.currentSlide -= 2;
    nivoRun(slider, kids, settings, 'prev');
    });

    $('a.nivo-nextNav', slider).live('click', function(){
    if(vars.running) return false;
    clearInterval(timer);
    timer = '';
    nivoRun(slider, kids, settings, 'next');
    });
    }

    //Add Control nav
    if(settings.controlNav){
    var nivoControl = $('<div class="nivo-controlNav"></div>');
    slider.append(nivoControl);
    for(var i = 0; i < kids.length; i++){
    if(settings.controlNavThumbs){
    var child = kids.eq(i);
    if(!child.is('img')){
    child = child.find('img:first');
    }
    if (settings.controlNavThumbsFromRel) {
    nivoControl.append('');
    } else {
    nivoControl.append('');
    }
    } else {
    nivoControl.append(''+ (i + 1) +'');
    }

    }
    //Set initial active link
    $('.nivo-controlNav a:eq('+ vars.currentSlide +')', slider).addClass('active');

    $('.nivo-controlNav a', slider).live('click', function(){
    if(vars.running) return false;
    if($(this).hasClass('active')) return false;
    clearInterval(timer);
    timer = '';
    slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
    vars.currentSlide = $(this).attr('rel') - 1;
    nivoRun(slider, kids, settings, 'control');
    });
    }

    //Keyboard Navigation
    if(settings.keyboardNav){
    $(window).keypress(function(event){
    //Left
    if(event.keyCode == '37'){
    if(vars.running) return false;
    clearInterval(timer);
    timer = '';
    vars.currentSlide-=2;
    nivoRun(slider, kids, settings, 'prev');
    }
    //Right
    if(event.keyCode == '39'){
    if(vars.running) return false;
    clearInterval(timer);
    timer = '';
    nivoRun(slider, kids, settings, 'next');
    }
    });
    }

    //For pauseOnHover setting
    if(settings.pauseOnHover){
    slider.hover(function(){
    vars.paused = true;
    clearInterval(timer);
    timer = '';
    }, function(){
    vars.paused = false;
    //Restart the timer
    if(timer == '' && !settings.manualAdvance){
    timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
    }
    });
    }

    //Event when Animation finishes
    slider.bind('nivo:animFinished', function(){
    vars.running = false;
    //Hide child links
    $(kids).each(function(){
    if($(this).is('a')){
    $(this).css('display','none');
    }
    });
    //Show current link
    if($(kids[vars.currentSlide]).is('a')){
    $(kids[vars.currentSlide]).css('display','block');
    }
    //Restart the timer
    if(timer == '' && !vars.paused && !settings.manualAdvance){
    timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
    }
    //Trigger the afterChange callback
    settings.afterChange.call(this);
    });

    // Add slices for slice animations
    var createSlices = function(slider, settings, vars){
    for(var i = 0; i < settings.slices; i++){
    var sliceWidth = Math.round(slider.width()/settings.slices);
    if(i == settings.slices-1){
    slider.append(
    $('<div class="nivo-slice"></div>').css({
    left:(sliceWidth*i)+'px', width:(slider.width()-(sliceWidth*i))+'px',
    height:'0px',
    opacity:'0',
    background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%'
    })
    );
    } else {
    slider.append(
    $('<div class="nivo-slice"></div>').css({
    left:(sliceWidth*i)+'px', width:sliceWidth+'px',
    height:'0px',
    opacity:'0',
    background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%'
    })
    );
    }
    }
    }

    // Add boxes for box animations
    var createBoxes = function(slider, settings, vars){
    var boxWidth = Math.round(slider.width()/settings.boxCols);
    var boxHeight = Math.round(slider.height()/settings.boxRows);

    for(var rows = 0; rows < settings.boxRows; rows++){
    for(var cols = 0; cols < settings.boxCols; cols++){
    if(cols == settings.boxCols-1){
    slider.append(
    $('<div class="nivo-box"></div>').css({
    opacity:0,
    left:(boxWidth*cols)+'px',
    top:(boxHeight*rows)+'px',
    width:(slider.width()-(boxWidth*cols))+'px',
    height:boxHeight+'px',
    background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((boxWidth + (cols * boxWidth)) - boxWidth) +'px -'+ ((boxHeight + (rows * boxHeight)) - boxHeight) +'px'
    })
    );
    } else {
    slider.append(
    $('<div class="nivo-box"></div>').css({
    opacity:0,
    left:(boxWidth*cols)+'px',
    top:(boxHeight*rows)+'px',
    width:boxWidth+'px',
    height:boxHeight+'px',
    background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((boxWidth + (cols * boxWidth)) - boxWidth) +'px -'+ ((boxHeight + (rows * boxHeight)) - boxHeight) +'px'
    })
    );
    }
    }
    }
    }

    // Private run method
    var nivoRun = function(slider, kids, settings, nudge){
    //Get our vars
    var vars = slider.data('nivo:vars');

    //Trigger the lastSlide callback
    if(vars && (vars.currentSlide == vars.totalSlides - 1)){
    settings.lastSlide.call(this);
    }

    // Stop
    if((!vars || vars.stop) && !nudge) return false;

    //Trigger the beforeChange callback
    settings.beforeChange.call(this);

    //Set current background before change
    if(!nudge){
    slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
    } else {
    if(nudge == 'prev'){
    slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
    }
    if(nudge == 'next'){
    slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
    }
    }
    vars.currentSlide++;
    //Trigger the slideshowEnd callback
    if(vars.currentSlide == vars.totalSlides){
    vars.currentSlide = 0;
    settings.slideshowEnd.call(this);
    }
    if(vars.currentSlide < 0) vars.currentSlide = (vars.totalSlides - 1);
    //Set vars.currentImage
    if($(kids[vars.currentSlide]).is('img')){
    vars.currentImage = $(kids[vars.currentSlide]);
    } else {
    vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
    }

    //Set active links
    if(settings.controlNav){
    $('.nivo-controlNav a', slider).removeClass('active');
    $('.nivo-controlNav a:eq('+ vars.currentSlide +')', slider).addClass('active');
    }

    //Process caption
    processCaption(settings);

    // Remove any slices from last transition
    $('.nivo-slice', slider).remove();

    // Remove any boxes from last transition
    $('.nivo-box', slider).remove();

    if(settings.effect == 'random'){
    var anims = new Array('sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft','sliceUpDown','sliceUpDownLeft','fold','fade',
    'boxRandom','boxRain','boxRainReverse','boxRainGrow','boxRainGrowReverse');
    vars.randAnim = anims[Math.floor(Math.random()*(anims.length + 1))];
    if(vars.randAnim == undefined) vars.randAnim = 'fade';
    }

    //Run random effect from specified set (eg: effect:'fold,fade')
    if(settings.effect.indexOf(',') != -1){
    var anims = settings.effect.split(',');
    vars.randAnim = anims[Math.floor(Math.random()*(anims.length))];
    if(vars.randAnim == undefined) vars.randAnim = 'fade';
    }

    //Run effects
    vars.running = true;
    if(settings.effect == 'sliceDown' || settings.effect == 'sliceDownRight' || vars.randAnim == 'sliceDownRight' ||
    settings.effect == 'sliceDownLeft' || vars.randAnim == 'sliceDownLeft'){
    createSlices(slider, settings, vars);
    var timeBuff = 0;
    var i = 0;
    var slices = $('.nivo-slice', slider);
    if(settings.effect == 'sliceDownLeft' || vars.randAnim == 'sliceDownLeft') slices = $('.nivo-slice', slider)._reverse();

    slices.each(function(){
    var slice = $(this);
    slice.css({ 'top': '0px' });
    if(i == settings.slices-1){
    setTimeout(function(){
    slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
    }, (100 + timeBuff));
    } else {
    setTimeout(function(){
    slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed);
    }, (100 + timeBuff));
    }
    timeBuff += 50;
    i++;
    });
    }
    else if(settings.effect == 'sliceUp' || settings.effect == 'sliceUpRight' || vars.randAnim == 'sliceUpRight' ||
    settings.effect == 'sliceUpLeft' || vars.randAnim == 'sliceUpLeft'){
    createSlices(slider, settings, vars);
    var timeBuff = 0;
    var i = 0;
    var slices = $('.nivo-slice', slider);
    if(settings.effect == 'sliceUpLeft' || vars.randAnim == 'sliceUpLeft') slices = $('.nivo-slice', slider)._reverse();

    slices.each(function(){
    var slice = $(this);
    slice.css({ 'bottom': '0px' });
    if(i == settings.slices-1){
    setTimeout(function(){
    slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
    }, (100 + timeBuff));
    } else {
    setTimeout(function(){
    slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed);
    }, (100 + timeBuff));
    }
    timeBuff += 50;
    i++;
    });
    }
    else if(settings.effect == 'sliceUpDown' || settings.effect == 'sliceUpDownRight' || vars.randAnim == 'sliceUpDown' ||
    settings.effect == 'sliceUpDownLeft' || vars.randAnim == 'sliceUpDownLeft'){
    createSlices(slider, settings, vars);
    var timeBuff = 0;
    var i = 0;
    var v = 0;
    var slices = $('.nivo-slice', slider);
    if(settings.effect == 'sliceUpDownLeft' || vars.randAnim == 'sliceUpDownLeft') slices = $('.nivo-slice', slider)._reverse();

    slices.each(function(){
    var slice = $(this);
    if(i == 0){
    slice.css('top','0px');
    i++;
    } else {
    slice.css('bottom','0px');
    i = 0;
    }

    if(v == settings.slices-1){
    setTimeout(function(){
    slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
    }, (100 + timeBuff));
    } else {
    setTimeout(function(){
    slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed);
    }, (100 + timeBuff));
    }
    timeBuff += 50;
    v++;
    });
    }
    else if(settings.effect == 'fold' || vars.randAnim == 'fold'){
    createSlices(slider, settings, vars);
    var timeBuff = 0;
    var i = 0;

    $('.nivo-slice', slider).each(function(){
    var slice = $(this);
    var origWidth = slice.width();
    slice.css({ top:'0px', height:'100%', width:'0px' });
    if(i == settings.slices-1){
    setTimeout(function(){
    slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
    }, (100 + timeBuff));
    } else {
    setTimeout(function(){
    slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed);
    }, (100 + timeBuff));
    }
    timeBuff += 50;
    i++;
    });
    }
    else if(settings.effect == 'fade' || vars.randAnim == 'fade'){
    createSlices(slider, settings, vars);

    var firstSlice = $('.nivo-slice:first', slider);
    firstSlice.css({
    'height': '100%',
    'width': slider.width() + 'px'
    });

    firstSlice.animate({ opacity:'1.0' }, (settings.animSpeed*2), '', function(){ slider.trigger('nivo:animFinished'); });
    }
    else if(settings.effect == 'slideInRight' || vars.randAnim == 'slideInRight'){
    createSlices(slider, settings, vars);

    var firstSlice = $('.nivo-slice:first', slider);
    firstSlice.css({
    'height': '100%',
    'width': '0px',
    'opacity': '1'
    });

    firstSlice.animate({ width: slider.width() + 'px' }, (settings.animSpeed*2), '', function(){ slider.trigger('nivo:animFinished'); });
    }
    else if(settings.effect == 'slideInLeft' || vars.randAnim == 'slideInLeft'){
    createSlices(slider, settings, vars);

    var firstSlice = $('.nivo-slice:first', slider);
    firstSlice.css({
    'height': '100%',
    'width': '0px',
    'opacity': '1',
    'left': '',
    'right': '0px'
    });

    firstSlice.animate({ width: slider.width() + 'px' }, (settings.animSpeed*2), '', function(){
    // Reset positioning
    firstSlice.css({
    'left': '0px',
    'right': ''
    });
    slider.trigger('nivo:animFinished');
    });
    }
    else if(settings.effect == 'boxRandom' || vars.randAnim == 'boxRandom'){
    createBoxes(slider, settings, vars);

    var totalBoxes = settings.boxCols * settings.boxRows;
    var i = 0;
    var timeBuff = 0;

    var boxes = shuffle($('.nivo-box', slider));
    boxes.each(function(){
    var box = $(this);
    if(i == totalBoxes-1){
    setTimeout(function(){
    box.animate({ opacity:'1' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
    }, (100 + timeBuff));
    } else {
    setTimeout(function(){
    box.animate({ opacity:'1' }, settings.animSpeed);
    }, (100 + timeBuff));
    }
    timeBuff += 20;
    i++;
    });
    }
    else if(settings.effect == 'boxRain' || vars.randAnim == 'boxRain' || settings.effect == 'boxRainReverse' || vars.randAnim == 'boxRainReverse' ||
    settings.effect == 'boxRainGrow' || vars.randAnim == 'boxRainGrow' || settings.effect == 'boxRainGrowReverse' || vars.randAnim == 'boxRainGrowReverse'){
    createBoxes(slider, settings, vars);

    var totalBoxes = settings.boxCols * settings.boxRows;
    var i = 0;
    var timeBuff = 0;

    // Split boxes into 2D array
    var rowIndex = 0;
    var colIndex = 0;
    var box2Darr = new Array();
    box2Darr[rowIndex] = new Array();
    var boxes = $('.nivo-box', slider);
    if(settings.effect == 'boxRainReverse' || vars.randAnim == 'boxRainReverse' ||
    settings.effect == 'boxRainGrowReverse' || vars.randAnim == 'boxRainGrowReverse'){
    boxes = $('.nivo-box', slider)._reverse();
    }
    boxes.each(function(){
    box2Darr[rowIndex][colIndex] = $(this);
    colIndex++;
    if(colIndex == settings.boxCols){
    rowIndex++;
    colIndex = 0;
    box2Darr[rowIndex] = new Array();
    }
    });

    // Run animation
    for(var cols = 0; cols < (settings.boxCols * 2); cols++){
    var prevCol = cols;
    for(var rows = 0; rows < settings.boxRows; rows++){
    if(prevCol >= 0 && prevCol < settings.boxCols){
    /* Due to some weird JS bug with loop vars
    being used in setTimeout, this is wrapped
    with an anonymous function call */
    (function(row, col, time, i, totalBoxes) {
    var box = $(box2Darr[row][col]);
    var w = box.width();
    var h = box.height();
    if(settings.effect == 'boxRainGrow' || vars.randAnim == 'boxRainGrow' ||
    settings.effect == 'boxRainGrowReverse' || vars.randAnim == 'boxRainGrowReverse'){
    box.width(0).height(0);
    }
    if(i == totalBoxes-1){
    setTimeout(function(){
    box.animate({ opacity:'1', width:w, height:h }, settings.animSpeed/1.3, '', function(){ slider.trigger('nivo:animFinished'); });
    }, (100 + time));
    } else {
    setTimeout(function(){
    box.animate({ opacity:'1', width:w, height:h }, settings.animSpeed/1.3);
    }, (100 + time));
    }
    })(rows, prevCol, timeBuff, i, totalBoxes);
    i++;
    }
    prevCol--;
    }
    timeBuff += 100;
    }
    }
    }

    // Shuffle an array
    var shuffle = function(arr){
    for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
    return arr;
    }

    // For debugging
    var trace = function(msg){
    if (this.console && typeof console.log != "undefined")
    console.log(msg);
    }

    // Start / Stop
    this.stop = function(){
    if(!$(element).data('nivo:vars').stop){
    $(element).data('nivo:vars').stop = true;
    trace('Stop Slider');
    }
    }

    this.start = function(){
    if($(element).data('nivo:vars').stop){
    $(element).data('nivo:vars').stop = false;
    trace('Start Slider');
    }
    }

    //Trigger the afterLoad callback
    settings.afterLoad.call(this);

    return this;
    };

    $.fn.nivoSlider = function(options) {

    return this.each(function(key, value){
    var element = $(this);
    // Return early if this element already has a plugin instance
    if (element.data('nivoslider')) return element.data('nivoslider');
    // Pass options to plugin constructor
    var nivoslider = new NivoSlider(this, options);
    // Store plugin object in this element's data
    element.data('nivoslider', nivoslider);
    });

    };

    //Default settings
    $.fn.nivoSlider.defaults = {
    effect: 'random',
    slices: 15,
    boxCols: 8,
    boxRows: 4,
    animSpeed: 500,
    pauseTime: 3000,
    startSlide: 0,
    directionNav: true,
    directionNavHide: true,
    controlNav: true,
    controlNavThumbs: false,
    controlNavThumbsFromRel: false,
    controlNavThumbsSearch: '.jpg',
    controlNavThumbsReplace: '_thumb.jpg',
    keyboardNav: true,
    pauseOnHover: true,
    manualAdvance: false,
    captionOpacity: 0.8,
    prevText: 'Prev',
    nextText: 'Next',
    beforeChange: function(){},
    afterChange: function(){},
    slideshowEnd: function(){},
    lastSlide: function(){},
    afterLoad: function(){}
    };

    $.fn._reverse = [].reverse;

    })(jQuery);
    </script>
    <div class="slideshow">
    <div class="items">
    <?php foreach($this->sectionArr as $key => $section) { ?>
    <div class="">
    <?php echo $section; ?>
    </div>
    <?php } ?>
    </div>
    </div>

    Posted 6 months ago #

Reply

You must log in to post.