Question

This is my slideshow.js

    ; (function ($) {
    "use strict";

    var ver = 'Lite-1.6';

    $.fn.cycle = function (options) {
        return this.each(function () {
            options = options || {};

            if (this.cycleTimeout) clearTimeout(this.cycleTimeout);

            this.cycleTimeout = 0;
            this.cyclePause = 0;

            var $cont = $(this);
            var $slides = options.slideExpr ? $(options.slideExpr, this) : $cont.children();
            var els = $slides.get();
            if (els.length < 2) {
                if (window.console)
                    console.log('terminating; too few slides: ' + els.length);
                return; // don't bother
            }

            // support metadata plugin (v1.0 and v2.0)
            var opts = $.extend({}, $.fn.cycle.defaults, options || {}, $.metadata ? $cont.metadata() : $.meta ? $cont.data() : {});
            var meta = $.isFunction($cont.data) ? $cont.data(opts.metaAttr) : null;
            if (meta)
                opts = $.extend(opts, meta);

            opts.before = opts.before ? [opts.before] : [];
            opts.after = opts.after ? [opts.after] : [];
            opts.after.unshift(function () { opts.busy = 0; });

            // allow shorthand overrides of width, height and timeout
            var cls = this.className;
            opts.width = parseInt((cls.match(/w:(\d+)/) || [])[1], 10) || opts.width;
            opts.height = parseInt((cls.match(/h:(\d+)/) || [])[1], 10) || opts.height;
            opts.timeout = parseInt((cls.match(/t:(\d+)/) || [])[1], 10) || opts.timeout;

            if ($cont.css('position') == 'static')
                $cont.css('position', 'relative');
            if (opts.width)
                $cont.width(opts.width);
            if (opts.height && opts.height != 'auto')
                $cont.height(opts.height);

            var first = 0;
            $slides.css({ position: 'absolute', top: 0 }).each(function (i) {
                $(this).css('z-index', els.length - i);
            });

            $(els[first]).css('opacity', 1).show(); // opacity bit needed to handle reinit case
            if ($.browser.msie) els[first].style.removeAttribute('filter');

            if (opts.fit && opts.width)
                $slides.width(opts.width);
            if (opts.fit && opts.height && opts.height != 'auto')
                $slides.height(opts.height);
            if (opts.pause)
                $cont.hover(function () { this.cyclePause = 1; }, function () { this.cyclePause = 0; });

            var txFn = $.fn.cycle.transitions[opts.fx];
            if (txFn)
                txFn($cont, $slides, opts);

            $slides.each(function () {
                var $el = $(this);
                this.cycleH = (opts.fit && opts.height) ? opts.height : $el.height();
                this.cycleW = (opts.fit && opts.width) ? opts.width : $el.width();
            });

            if (opts.cssFirst)
                $($slides[first]).css(opts.cssFirst);

            if (opts.timeout) {
                // ensure that timeout and speed settings are sane
                if (opts.speed.constructor == String)
                    opts.speed = { slow: 600, fast: 200}[opts.speed] || 400;
                if (!opts.sync)
                    opts.speed = opts.speed / 2;
                while ((opts.timeout - opts.speed) < 250)
                    opts.timeout += opts.speed;
            }
            opts.speedIn = opts.speed;
            opts.speedOut = opts.speed;

            opts.slideCount = els.length;
            opts.currSlide = first;
            opts.nextSlide = 1;

            // fire artificial events
            var e0 = $slides[first];
            if (opts.before.length)
                opts.before[0].apply(e0, [e0, e0, opts, true]);
            if (opts.after.length > 1)
                opts.after[1].apply(e0, [e0, e0, opts, true]);

            if (opts.click && !opts.next)
                opts.next = opts.click;
            if (opts.next)
                $(opts.next).unbind('click.cycle').bind('click.cycle', function () { return advance(els, opts, opts.rev ? -1 : 1); });
            if (opts.prev)
                $(opts.prev).unbind('click.cycle').bind('click.cycle', function () { return advance(els, opts, opts.rev ? 1 : -1); });

            if (opts.timeout)
                this.cycleTimeout = setTimeout(function () {
                    go(els, opts, 0, !opts.rev);
                }, opts.timeout + (opts.delay || 0));
        });
    };

    function go(els, opts, manual, fwd) {
        if (opts.busy)
            return;
        var p = els[0].parentNode, curr = els[opts.currSlide], next = els[opts.nextSlide];
        if (p.cycleTimeout === 0 && !manual)
            return;

        if (manual || !p.cyclePause) {
            if (opts.before.length)
                $.each(opts.before, function (i, o) { o.apply(next, [curr, next, opts, fwd]); });
            var after = function () {
                if ($.browser.msie)
                    this.style.removeAttribute('filter');
                $.each(opts.after, function (i, o) { o.apply(next, [curr, next, opts, fwd]); });
                queueNext(opts);
            };

            if (opts.nextSlide != opts.currSlide) {
                opts.busy = 1;
                $.fn.cycle.custom(curr, next, opts, after);
            }
            var roll = (opts.nextSlide + 1) == els.length;
            opts.nextSlide = roll ? 0 : opts.nextSlide + 1;
            opts.currSlide = roll ? els.length - 1 : opts.nextSlide - 1;
        } else {
            queueNext(opts);
        }

        function queueNext(opts) {
            if (opts.timeout)
                p.cycleTimeout = setTimeout(function () { go(els, opts, 0, !opts.rev); }, opts.timeout);
        }
    }

    // advance slide forward or back
    function advance(els, opts, val) {
        var p = els[0].parentNode, timeout = p.cycleTimeout;
        if (timeout) {
            clearTimeout(timeout);
            p.cycleTimeout = 0;
        }
        opts.nextSlide = opts.currSlide + val;
        if (opts.nextSlide < 0) {
            opts.nextSlide = els.length - 1;
        }
        else if (opts.nextSlide >= els.length) {
            opts.nextSlide = 0;
        }
        go(els, opts, 1, val >= 0);
        return false;
    }

    $.fn.cycle.custom = function (curr, next, opts, cb) {
        var $l = $(curr), $n = $(next);
        $n.css(opts.cssBefore);
        var fn = function () { $n.animate(opts.animIn, opts.speedIn, opts.easeIn, cb); };
        $l.animate(opts.animOut, opts.speedOut, opts.easeOut, function () {
            $l.css(opts.cssAfter);
            if (!opts.sync)
                fn();
        });
        if (opts.sync)
            fn();
    };

    $.fn.cycle.transitions = {
        fade: function ($cont, $slides, opts) {
            $slides.not(':eq(0)').hide();
            opts.cssBefore = { opacity: 0, display: 'block' };
            opts.cssAfter = { display: 'none' };
            opts.animOut = { opacity: 0 };
            opts.animIn = { opacity: 1 };
        },
        fadeout: function ($cont, $slides, opts) {
            opts.before.push(function (curr, next, opts, fwd) {
                $(curr).css('zIndex', opts.slideCount + (fwd === true ? 1 : 0));
                $(next).css('zIndex', opts.slideCount + (fwd === true ? 0 : 1));
            });
            $slides.not(':eq(0)').hide();
            opts.cssBefore = { opacity: 1, display: 'block', zIndex: 1 };
            opts.cssAfter = { display: 'none', zIndex: 0 };
            opts.animOut = { opacity: 0 };
            opts.animIn = { opacity: 1 };
        }
    };

    $.fn.cycle.ver = function () { return ver; };

    // @see: http://malsup.com/jquery/cycle/lite/
    $.fn.cycle.defaults = {
        animIn: {},
        animOut: {},
        fx: 'fade',
        after: null,
        before: null,
        cssBefore: {},
        cssAfter: {},
        delay: 0,
        fit: 0,
        height: 'auto',
        metaAttr: 'cycle',
        next: null,
        pause: false,
        prev: null,
        speed: 1000,
        slideExpr: null,
        sync: true,
        timeout: 4000
    };

})(jQuery);

My html code:

    <li class="slideshow">


<img src="/Content/Images/Image1" width="470" height="470" alt="ProductName1" />

<img src="/Content/Images/Image2" width="470" height="470" alt="ProductName2" />

<img src="/Content/Images/Image3" width="470" height="470" alt="ProductName3" />

                </li>

My javascript initialisation code in html

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
$('.slideshow').cycle({
            fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
            after: onAfter
        });
    });
    </script>

The above code is working fine..

I need it to be changed such that only those elements (in this case ‘img’) inside class slideshow should be slideshow enabled who has an class ‘slideshow-enabled’.

So, my html code will become:

<li class="slideshow">
    <span> My non slideshow text goes here</span>               

<img src="/Content/Images/Image1" width="470" height="470" alt="ProductName1" class="slideshow-enabled"/>

<img src="/Content/Images/Image2" width="470" height="470" alt="ProductName2" class="slideshow-enabled"/>

<img src="/Content/Images/Image3" width="470" height="470" alt="ProductName3" class="slideshow-enabled"/>

                </li>

Hopefully I have been able to explain what I need, if there are any queries, plz ask.

Thanks

Arnab

Answer 1

This line says that there is a setting where you can set a selector for what to pick

var $slides = options.slideExpr ? $(options.slideExpr, this) : $cont.children();

so in the options

$('.slideshow').cycle({
    fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    after: onAfter,
    slideExpr : "img.slideshow-enabled"
});