Search jQuery

jQuery Forum

Accordian Slider Jquery Plugin

in Using jQuery Plugins • 11 years ago

Hello,

Just picked up and installed Easy Accordion Plugin from Madeincima on a Joomla 1.6 site. Everything is working fine, except I would like to make some cosmetic changes to each tab on the slider when it is both active and inactive.

The way the plugin is set up is that I can only call an inactive or active background image for each tab, both of which are editable in photoshop. But I want to call different background images for each tab and I just don't know what to do without breaking the script.

This is what the slider looks like now:

This is a rough idea of what I would like the slider to look like:

Here's a link to the accordion on the site. Here's the code/ script for the accordian which is inside the top module position (I've modified it a bit from the original by Madeincima):

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <title>jQuery Easy Accordion Plugin</title>

      
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="Andrea Cima Serniotti - Madeincima.eu" />
    <meta name="description" content="jQuery Easy Accordion Plugin - A highly flexible timed horizontal slider able to show any kind of content" />
    <meta name="keywords" content="jQuery, plugin, accordion, slider, slideshow, horizontal, timed, interval" />

      
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript">
/*
*     easyAccordion 0.1 - jQuery plugin
*    written by Andrea Cima Serniotti
*    http://www.madeincima.eu
*
*    Copyright (c) 2010 Andrea Cima Serniotti (http://www.madeincima.eu)
*    Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
*    Built for jQuery library http://jquery.com
*/

(function(jQuery) {
    jQuery.fn.easyAccordion = function(options) {

    var defaults = {
        slideNum: true,
        autoStart: false,
        slideInterval: 3000
    };

    this.each(function() {

        var settings = jQuery.extend(defaults, options);
        jQuery(this).find('dl').addClass('easy-accordion');


        // -------- Set the variables ------------------------------------------------------------------------------

        jQuery.fn.setVariables = function() {
            dlWidth = jQuery(this).width();
            dlHeight = jQuery(this).height();
            dtWidth = jQuery(this).find('dt').outerHeight();
            if (jQuery.browser.msie){ dtWidth = $(this).find('dt').outerWidth();}
            dtHeight = dlHeight - (jQuery(this).find('dt').outerWidth()-jQuery(this).find('dt').width());
            slideTotal = jQuery(this).find('dt').size();
            ddWidth = dlWidth - (dtWidth*slideTotal) - (jQuery(this).find('dd').outerWidth(true)-jQuery(this).find('dd').width());
            ddHeight = dlHeight - (jQuery(this).find('dd').outerHeight(true)-jQuery(this).find('dd').height());
        };
        jQuery(this).setVariables();


        // -------- Fix some weird cross-browser issues due to the CSS rotation -------------------------------------

        if (jQuery.browser.safari){ var dtTop = (dlHeight-dtWidth)/2; var dtOffset = -dtTop; /* Safari and Chrome */ }
        if (jQuery.browser.mozilla){ var dtTop = dlHeight - 20; var dtOffset = - 20; /* FF */ }
        if (jQuery.browser.msie){ var dtTop = 0; var dtOffset = 0; /* IE */ }


        // -------- Getting things ready ------------------------------------------------------------------------------

        var f = 1;
        jQuery(this).find('dt').each(function(){
            jQuery(this).css({'width':dtHeight,'top':dtTop,'margin-left':dtOffset});
            if(settings.slideNum == true){
                jQuery('<span class="slide-number">'+0+f+'</span>').appendTo(this);
                if(jQuery.browser.msie){
                    var slideNumLeft = parseInt(jQuery(this).find('.slide-number').css('left')) - 14;
                    jQuery(this).find('.slide-number').css({'left': slideNumLeft})
                    if(jQuery.browser.version == 6.0 || jQuery.browser.version == 7.0){
                        jQuery(this).find('.slide-number').css({'bottom':'auto'});
                    }
                    if(jQuery.browser.version == 8.0){
                    var slideNumTop = jQuery(this).find('.slide-number').css('bottom');
                    var slideNumTopVal = parseInt(slideNumTop) + parseInt(jQuery(this).css('padding-top')) - 12;
                    jQuery(this).find('.slide-number').css({'bottom': slideNumTopVal});
                    }
                } else {
                    var slideNumTop = jQuery(this).find('.slide-number').css('bottom');
                    var slideNumTopVal = parseInt(slideNumTop) + parseInt(jQuery(this).css('padding-top'));
                    jQuery(this).find('.slide-number').css({'bottom': slideNumTopVal});
                }
            }
            f = f + 1;
        });

        if(jQuery(this).find('.active').size()) {
            jQuery(this).find('.active').next('dd').addClass('active');
        } else {
            jQuery(this).find('dt:first').addClass('active').next('dd').addClass('active');
        }

        jQuery(this).find('dt:first').css({'left':'0'}).next().css({'left':dtWidth});
        jQuery(this).find('dd').css({'width':ddWidth,'height':ddHeight});


        // -------- Functions ------------------------------------------------------------------------------

        jQuery.fn.findActiveSlide = function() {
                var i = 1;
                this.find('dt').each(function(){
                if(jQuery(this).hasClass('active')){
                    activeID = i; // Active slide
                } else if (jQuery(this).hasClass('no-more-active')){
                    noMoreActiveID = i; // No more active slide
                }
                i = i + 1;
            });
        };

        jQuery.fn.calculateSlidePos = function() {
            var u = 2;
            jQuery(this).find('dt').not(':first').each(function(){
                var activeDtPos = dtWidth*activeID;
                if(u <= activeID){
                    var leftDtPos = dtWidth*(u-1);
                    jQuery(this).animate({'left': leftDtPos});
                    if(u < activeID){ // If the item sits to the left of the active element
                        jQuery(this).next().css({'left':leftDtPos+dtWidth});
                    } else{ // If the item is the active one
                        jQuery(this).next().animate({'left':activeDtPos});
                    }
                } else {
                    var rightDtPos = dlWidth-(dtWidth*(slideTotal-u+1));
                    jQuery(this).animate({'left': rightDtPos});
                    var rightDdPos = rightDtPos+dtWidth;
                    jQuery(this).next().animate({'left':rightDdPos});
                }
                u = u+ 1;
            });
            setTimeout( function() {
                jQuery('.easy-accordion').find('dd').not('.active').each(function(){
                    jQuery(this).css({'display':'none'});
                });
            }, 400);

        };

        jQuery.fn.activateSlide = function() {
            this.parent('dl').setVariables();
            this.parent('dl').find('dd').css({'display':'block'});
            this.parent('dl').find('dd.plus').removeClass('plus');
            this.parent('dl').find('.no-more-active').removeClass('no-more-active');
            this.parent('dl').find('.active').removeClass('active').addClass('no-more-active');
            this.addClass('active').next().addClass('active');
            this.parent('dl').findActiveSlide();
            if(activeID < noMoreActiveID){
                this.parent('dl').find('dd.no-more-active').addClass('plus');
            }
            this.parent('dl').calculateSlidePos();
        };

        jQuery.fn.rotateSlides = function(slideInterval, timerInstance) {
            var accordianInstance = jQuery(this);
            timerInstance.value = setTimeout(function(){accordianInstance.rotateSlides(slideInterval, timerInstance);}, slideInterval);
            jQuery(this).findActiveSlide();
            var totalSlides = jQuery(this).find('dt').size();
            var activeSlide = activeID;
            var newSlide = activeSlide + 1;
            if (newSlide > totalSlides) newSlide = 1;
            jQuery(this).find('dt:eq(' + (newSlide-1) + ')').activateSlide(); // activate the new slide
        }

        // -------- Let's do it! ------------------------------------------------------------------------------

        function trackerObject() {this.value = null}
        var timerInstance = new trackerObject();

        jQuery(this).findActiveSlide();
        jQuery(this).calculateSlidePos();

        if (settings.autoStart == true){
            var accordianInstance = jQuery(this);
            var interval = parseInt(settings.slideInterval);
            timerInstance.value = setTimeout(function(){
                accordianInstance.rotateSlides(interval, timerInstance);
                }, interval);
        }

        jQuery(this).find('dt').not('active').click(function(){
            jQuery(this).activateSlide();
            clearTimeout(timerInstance.value);
        });

        if (!(jQuery.browser.msie && jQuery.browser.version == 6.0)){
            jQuery('dt').hover(function(){
                jQuery(this).addClass('hover');
            }, function(){
                jQuery(this).removeClass('hover');
            });
        }
    });
    };
})(jQuery);
</script>
<script type="text/javascript">

$(document).ready(function () {


    $('#accordion-1').easyAccordion({
            autoStart: true,
            slideInterval: 3000
    });

    $('#accordion-2').easyAccordion({
            autoStart: false,
slideNum:false
    });

    $('#accordion-3').easyAccordion({
            autoStart: true,
            slideInterval: 5000,
            slideNum:false
    });

    $('#accordion-4').easyAccordion({
            autoStart: false,
            slideInterval: 5000
    });


});

</script>
      <style type="text/css">
        .sample{margin:15px;border:0px solid #92cdec;background:#ffffff;padding:5px}
        .easy-accordion h2{margin:0px 0 0px 0;padding:0;font-size:20px;}



        /* UNLESS YOU KNOW WHAT YOU'RE DOING, DO NOT CHANGE THE FOLLOWING RULES */

        .easy-accordion{display:block;position:relative;overflow:hidden;padding:0;margin:0}
        .easy-accordion dt,.easy-accordion dd{margin:0;padding:0}
        .easy-accordion dt,.easy-accordion dd{position:absolute}
        .easy-accordion dt{margin-bottom:0;margin-left:0;z-index:5;/* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px; /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);cursor:pointer;}
        .easy-accordion dd{z-index:1;opacity:0;overflow:hidden}
        .easy-accordion dd.active{opacity:1;}
        .easy-accordion dd.no-more-active{z-index:2;opacity:1}
        .easy-accordion dd.active{z-index:3}
        .easy-accordion dd.plus{z-index:4}
        .easy-accordion .slide-number{position:absolute;bottom:0;left:10px;font-weight:normal;font-size:1.1em;/* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}


        /* FEEL FREE TO CUSTOMIZE THE FOLLOWING RULES */

        dd p{line-height:120%}

        #accordion-2{width:860px;height:245px;padding:30px;background:#fff;border:0px solid #b5c9e8}
        #accordion-2 dl{width:860px;height:245px}
        #accordion-2 dt{height:46px;line-height:44px;text-align:left; text-indent:3px;padding:0px 15px 0px 0px;font-size:1.1em;font-family: Verdana, Century Gothic, sans-serif;letter-spacing:1px;background:#fff url(images/slide-title-inactive-1.jpg) 0 0 no-repeat;color:#26526c}
        #accordion-2 dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-1.jpg) 0 0 no-repeat}
        #accordion-2 dt.hover{color:#68889b;}
        #accordion-2 dt.active.hover{color:#fff}
        #accordion-2 dd{padding:25px;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #cdcdcd;border-left:0;margin-right:3px}
        #accordion-2 .slide-number{color:#68889b;left:10px;font-weight:bold}
        #accordion-2 .active .slide-number{color:#fff}
        #accordion-2 a{color:#68889b}
        #accordion-2 dd img{float:right;margin:0 0 0 30px;position:relative;top:-20px}
      </style>
<body>

    <div class="sample" align="center">
        <div id="accordion-2">
            <dl>
                <dt>+ Acupuncture</dt>

                <dd><h1>First mammoth here</h1><p><img src="images/mammoths/img1.png" alt="Alt text to go here" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean commodo ligula eget dolor.</p></dd>
                <dt>+ Herbal Medicine</dt>
                <dd><h1>Over the moon!</h1><p><img src="images/mammoths/img2.png" alt="Alt text to go here" />Aenean commodo ligula eget dolor. Aenean massa. Nascetur aenean commodo ligula eget dolor. Aenean massa eget. </p></dd>
                <dt>+ Diet & Lifestyle Counseling</dt>
                <dd><h1>Another mammoth</h1><p><img src="images/mammoths/img3.png" alt="Alt text to go here" />Ipsum dolor sit amet.Aenean ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.</p></dd>

                <dt>+ Online Second Opinion</dt>
                <dd><h1>This is my favourite</h1><p><img src="images/mammoths/img4.png" alt="Alt text to go here" />Cum sociis natoque penatibus et donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p></dd>
<dt>+ Contact Us</dt>
                <dd><h1>This is my favourite</h1><p><img src="images/mammoths/img4.png" alt="Alt text to go here" />Cum sociis natoque penatibus et donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p></dd>

           </dl>
        </div>
           </div>

</body>
</html>

I am a novice at jQuery, but can get my way around most code pretty easily if I can find out where to put what. Please let me know if you can help.

Thanks in advance,

Rene

Replies(1)

noahw79

Re: Accordian Slider Jquery Plugin

11 years ago

Okay, after looking at it. You will want to add and ID to each DT so

<dt id="one">+ Acupuncture</dt>
<dt id="two">+ Herbal Medicine</dt>
<dt id="three">+ Diet & Lifestyle Counseling</dt>

Remove the background color in here:

#accordion-2 dt
{
height:46px;
line-height:44px;
text-align:left;
text-indent:3px;
padding:0px 15px 0px 0px;
font-size:1.1em;
font-family: Verdana, Century Gothic, sans-serif;
letter-spacing:1px;
background:#fff url(images/slide-title-inactive-1.jpg) 0 0 no-repeat;
color:#26526c
}

So you have:

#accordion-2 dt{
    height:46px;
    line-height:44px;
    text-align:left;
    text-indent:3px;
    padding:0px 15px 0px 0px;
    font-size:1.1em;
    font-family: Verdana, Century Gothic, sans-serif;
    letter-spacing:1px;
    color:#26526c;
    background-image: url(images/slide-title-inactive-1.jpg);
    background-repeat: no-repeat;
    background-position: 0 0;
}

NO white background. Now since you have ID's on the DTs just add styles!

      #one {
    background-color: #069;
}
      #two {
    background-color: #930;
}
       #three {
    background-color: #0FF;
}
      #four {
    background-color: #369;
}
#five {
    background-color: #069;
}

I attached it so you can just open it. There's more to the styling but that should get you started.

Attachments

test2.zip
Size : 3.8 KB Downloads : 2694 Download

Top Reply

Response title

Attachments

jQuery Forum

Accordian Slider Jquery Plugin

Replies(1)

Re: Accordian Slider Jquery Plugin

Attachments

Statistics

Tags

Actions