Lof-JSliderNews-images.tmpl

<!--IMAGE_SETTINGS_START//-->
; this is formatted like WIN.INI
; please: do not use comments for value lines
; settings will overwrite CP settings
width        = 450
height        = 350
width_zoom    = 70
height_zoom    = 25
col            = 1
;space        = 10
zoom        = 1
lightbox    = 0
;nocaption    = 0
; 0 = no center, 1 = horizontal/vertical, 2 = horizontal, 3 = vertical
center        = 0
crop        = 0
crop_zoom    = 1
;fx1            = 0
;fx2            = 0
;fx3            = 0
<!--IMAGE_SETTINGS_END//-->
 
<!--IMAGES_HEADER_START//-->
 
[TITLE]<h3 style="float:left; padding-right:10px;">{TITLE}</h3>[/TITLE]
[SUBTITLE]<span style="font-family:arial; font-size:110%;">{SUBTITLE}</span>[/SUBTITLE]
 
<div class="lof-slidecontent">
    <div class="lof-main-outer">
          <ul class="lof-main-wapper">
<!--IMAGES_HEADER_END//-->
 
 
<!--IMAGES_ENTRY_START//-->
            <!-- {IMAGE_NAME} -{IMGID} -->
            <li>
                <img src="{THUMB_REL}" title="{TITLE}" height="{THUMB_HEIGHT_MAX}" width="{THUMB_WIDTH_MAX}" alt="{ALT}" />
                [CAPTION]
                <div class="lof-main-item-desc" style="z-index:1;">
                    [TITLE]<!--<h3>{TITLE}</h3>//-->[/TITLE]
                    [INFOTEXT]{INFOTEXT}[/INFOTEXT]
                    [TITLE]<p>[IMAGE_URL]<a href="{IMAGE_URL}" target="_blank"><b>&raquo;</b> [/IMAGE_URL]{TITLE}[IMAGE_URL]</a>:[/IMAGE_URL] &nbsp;{ALT}</p>[/TITLE]
                </div>
                [/CAPTION]
                <div class="lof-nav-item">
                    <img src="{IMAGE_REL}" />
                </div>
            </li>
 
    <!--
 
        Thumbnail image: {THUMB_NAME}
          Title text:       {TITLE}
          Caption text:     {CAPTION}   // Same like TITLE if no |Alt text is available
          Alt text:         {ALT}       // The same like CAPTION text
          ID/Hash/Ext:      {THUMB_ID}/{THUMB_HASH}/{THUMB_EXT}
          relative:         {THUMB_REL}
          absolute:         {THUMB_ABS}
          height/width:     {THUMB_HEIGHT}px/{THUMB_WIDTH}px
          height/width max: {THUMB_HEIGHT_MAX}px/{THUMB_WIDTH_MAX}px
          columns:          {THUMB_COLUMNS}
 
        If you are not sure wrap zoomed image:
        [ZOOM]
        Zoomed (big) image: {IMAGE_NAME}
          ID/Hash/Ext:      {IMAGE_ID}/{IMAGE_HASH}/{IMAGE_EXT}
          relative:         {IMAGE_REL}
          absolute:         {IMAGE_ABS}
          height/width:     {IMAGE_HEIGHT}px/{IMAGE_WIDTH}px
        [/ZOOM]
 
        Image URL: {IMAGE_URL}, Target: {IMAGE_TARGET}
 
        [EFFECT_1]Yes Effect 1[/EFFECT_1]
        [EFFECT_2]Yes Effect 2[/EFFECT_2]
        [EFFECT_3]Yes Effect 3[/EFFECT_3]
 
    //-->
<!--IMAGES_ENTRY_END//-->
 
 
<!--IMAGES_ENTRY_SPACER_START//--><!--IMAGES_ENTRY_SPACER_END//-->
 
 
<!--IMAGES_ROW_SPACER_START//--><!--IMAGES_ROW_SPACER_END//-->
 
 
<!--IMAGES_FOOTER_START//-->
        </ul>
    </div>
</div>
[TEXT]{TEXT}[/TEXT]
<!-- CSS: {TEMPLATE}lib/lofslider/css/lofslider-style01.css -->
<!-- CSS:
    /* Hide the nav item element by default - we use JS to move it at right place */
    .lof-nav-item {display:none;}
-->
<!-- JS: dimensions.min --><!-- JS: easing.min --><!-- JS: mousewheel.min --><!-- JS: {TEMPLATE}lib/lofslider/lofslider01.js -->
<!-- JS:
 
    // build lofslider navigational element
    jQuery(document).ready(function(){
 
        // iterate all nav items "div.lof-nav-item
        $('ul.lof-main-wapper').each(function(){
 
            // append lof navigator wrapper and lof navigator element
            var nav_wrapper    = $('<div class="lof-navigator-wapper"><'+'/div>').insertAfter( $(this).parent() );
            var nav_wrapper1= $('<div class="lof-next" href="" onclick="return false">Next</div>').appendTo( nav_wrapper );
            var nav_wrapper2= $('<div class="lof-navigator-outer"><'+'/div>').insertAfter( nav_wrapper1 );
            var nav            = $('<ul class="lof-navigator"><'+'/ul>').appendTo( nav_wrapper2 );
            var nav_wrapper3= $('<div class="lof-previous" href="" onclick="return false">Previous</div>').insertAfter( nav_wrapper2 );
 
            // now iterate all and remove it from DOM the same step
            var navitems = $(this).find('li div.lof-nav-item').detach();
 
            navitems.each(function(){
 
                // append it to navigator element
                $('<li><div>' + $(this).html() + '<'+'/div><'+'/li>').appendTo(nav);
 
            });
 
            // Buttons left/right
            var buttons     = {
                previous:$('.lof-previous') ,
                next:$('.lof-next')
            };
 
            var lof_options = {
                interval        : 4000,
                easing          : 'easeInOutSine',
                duration        : 1000,
                direction       :'[EFFECT_1]opacity[/EFFECT_1]',  // 'opacity'
                auto            : false,
                maxItemDisplay  : 3,
                startItem       : 0,
                navPosition     : 'horizontal', // horizontal
                navigatorHeight : 32,
                navigatorWidth  : 80,
                mainWidth       :450,
                isPreloaded     : false,   // for IE9 sorry
                buttons         : buttons,
                mainItemDesc    : '[EFFECT_2].lof-main-item-desc[/EFFECT_2]'  // '.lof-main-item-desc' if set, smooth output of Desc text in direction mode = "opacity" +KH 08.05.11
            };
 
            $(this).parent().parent().lofJSidernews(lof_options);
        });
 
    });
 
-->
<!--IMAGES_FOOTER_END//-->

lofslider-style01.css

.lof-slidecontent {
    position:relative;
    overflow:hidden;
/*    border:#F4F4F4 solid 1px; */
    width:450px;
    height:350px;
}
.lof-slidecontent .preload {
    height:100%;
    width:100%;
    background:#FFF;
    position:absolute;
    top:0;
    left:0;
    z-index:100000;
    color:#FFF;
    text-align:center
}
.lof-slidecontent .preload div {
    height:100%;
    width:100%;
    background:transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%;
    position:relative;
}
.lof-main-outer{
    position:relative;
    height:100%;
    width:450px;
    z-index:3px;
    overflow:hidden;
}
 
/*******************************************************/
.lof-main-item-desc{
    z-index:100px;
    position:absolute;
    bottom:10px;
    left:0px;
    width:450px;
/*    height:100px; */
    background:url(../images/transparent_bg.png);
    /* filter:0.7(opacity:60) */
    padding:2px;
    color:#aaa;
}
 
.lof-main-item-desc b {
    font-size: 110%;
    color: #009bff;
}
 
.lof-main-item-desc h3 {
    color:#DDD;
    margin:0;
    font-size:140%;
    padding:0px 8px 2px;
    font-family:"Trebuchet MS", Trebuchet, Arial, Verdana, sans-serif;
}
.lof-main-item-desc a, .lof-main-item-desc a:link,.lof-main-item-desc a:visited {
    font-size:110%;
/*    padding:15px 16px 2px; */
}
 
}
.lof-main-item-desc h3 a {
    color:#FFF;
    margin:0;
 
    font-family:"Trebuchet MS", Trebuchet, Arial, Verdana, sans-serif;
}
.lof-main-item-desc h3 a:hover {
    color:#FF6;
    text-decoration:underline;
}
 
.lof-main-item-desc p{
    margin:0 0 0 10px;
    padding:5px 0 0 5px;
    line-height: 16px;
}
.lof-main-item-desc strong {
    margin:0;
    padding:0;
    font-size:120%;
    color:#eee;
}
 
/* main flash */
ul.lof-main-wapper {
    overflow:hidden;
    background:transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%;
    padding:0px;
    margin:0;
    height:345px;
    width:450px;
    position:absolute;
    overflow:hidden;
}
ul.lof-main-wapper li {
    overflow:hidden;
    padding:0px;
    margin:0px;
    height:100%;
    width:450px;
    float:left;
    position:relative;
}
 
.lof-opacity {
    overflow:visible  !important;;
    position:absolute !important;
}
.lof-opacity  li{
    position:absolute  !important;;
    top:0;
    left:0;
    float:inherit  !important;
}
ul.lof-main-wapper li img {
    padding:0px;
    width:450px;
}
/* Desc text */
li-desc {
    z-index:100;
    position:absolute;
    top:150px;
    left:50px;
    width:400px;
    background:url(../images/transparent_bg.png);
}
li-desc p {
    color:#FFF;
    margin:0 8px;
    padding:8px 0
}
li-desc h3 a {
    color:#FFF;
    margin:0;
    font-size:140%;
    padding:20px 8px 2px;
    font-family:"Trebuchet MS", Trebuchet, Arial, Verdana, sans-serif;
}
li-desc h3 a:hover {
    color:#FF6;
    text-decoration:underline;
}
 
/* item navigator */
.lof-navigator-wapper {
    position:absolute;
    top:10px;
    right:10px;
    background:#000;
    padding:5px 15px;
    -moz-border-radius:5px 5px 5px 5px;
 
}
.lof-navigator-outer{
    position:relative;
    z-index:100;
    height:180px;
    width:310px;
    overflow:hidden;
    color:#FFF;
    float:left
}
ul.lof-navigator{
    top:0;
    padding:0;
    margin:0;
    position:absolute;
    width:100%;
}
ul.lof-navigator li{
    cursor:hand;
    cursor:pointer;
    list-style:none;
    padding:0;
    margin-left:0px;
    overflow:hidden;
    float:left;
    display:block;
    text-align:center;
 
}
ul.lof-navigator li.active , ul.lof-navigator li:hover  {
/*    background:#FFF; */
    color:#000;
    display:block;
}
 
ul.lof-navigator li img{
    border:#666 solid 3px;
}
ul.lof-navigator li.active img, ul.lof-navigator li:hover img {
    border:#A8A8A8 solid 3px;
}
.lof-navigator-wapper .lof-next,  .lof-navigator-wapper .lof-previous{
    display:block;
    width:22px;
    height:30px;
    color:#FFF;
    cursor:pointer;
 
}
.lof-navigator-wapper .lof-next {
    float:left;
    text-indent:-999px;
    margin-right:5px;
    background:url(../images/arrow-l.png) no-repeat right center;
}
.lof-navigator-wapper .lof-previous {
    float:left;
    text-indent:-999px;
    margin-left:5px;
    background:url(../images/arrow-r.png) no-repeat left center;
}

lofslider01.js

/**
 * LofSliderNews
 * Copyright (c) JAN 2010 LandOfCoder.com <@emai:landofcoder@gmail.com>. All rights reserved.
 * This plugin is dual-licensed under the GNU General Public License and the MIT License
 * http://landofcoder.com/our-porfolios/jquery-plugins/item/10-the-lof-jsidernews-plugin.html
 */
// JavaScript Document
(function($) {
     $.fn.lofJSidernews = function( settings ) {
         return this.each(function() {
            // get instance of the lofSiderNew.
            new  $.lofSidernews( this, settings );
        });
      }
     $.lofSidernews = function( obj, settings ){
        this.settings = {
            direction            : '',
            mainItemSelector    : 'li',
            navInnerSelector    : 'ul',
            navSelector          : 'li' ,
            navigatorEvent        : 'click',
            wapperSelector:     '.lof-main-wapper',
            interval            : 4000,
            auto                : true, // whether to automatic play the slideshow
            maxItemDisplay        : 3,
            startItem            : 0,
            navPosition            : 'vertical',
            navigatorHeight        : 100,
            navigatorWidth        : 310,
            duration            : 600,
            navItemsSelector    : '.lof-navigator li',
            navOuterSelector    : '.lof-navigator-outer' ,
            isPreloaded            : true,
            easing                : 'easeInOutQuad',
            mainItemDesc        : '.lof-main-item-desc'  // if set, smooth output of Desc text in direction mode = "opacity" +KH 08.05.11
        }
        $.extend( this.settings, settings ||{} );
        this.nextNo         = null;
        this.previousNo     = null;
        this.maxWidth  = this.settings.mainWidth || 600;
        this.wrapper = $( obj ).find( this.settings.wapperSelector );
        this.slides = this.wrapper.find( this.settings.mainItemSelector );
        if( !this.wrapper.length || !this.slides.length ) return ;
        // set width of wapper
        if( this.settings.maxItemDisplay > this.slides.length ){
            this.settings.maxItemDisplay = this.slides.length;
        }
        this.currentNo      = isNaN(this.settings.startItem)||this.settings.startItem > this.slides.length?0:this.settings.startItem;
        this.navigatorOuter = $( obj ).find( this.settings.navOuterSelector );
        this.navigatorItems = $( obj ).find( this.settings.navItemsSelector ) ;
        this.navigatorInner = this.navigatorOuter.find( this.settings.navInnerSelector );
 
        if( this.settings.navPosition == 'horizontal' ){
            this.navigatorInner.width( this.slides.length * this.settings.navigatorWidth );
            this.navigatorOuter.width( this.settings.maxItemDisplay * this.settings.navigatorWidth );
            this.navigatorOuter.height(    this.settings.navigatorHeight );
 
        } else {
            this.navigatorInner.height( this.slides.length * this.settings.navigatorHeight );
 
            this.navigatorOuter.height( this.settings.maxItemDisplay * this.settings.navigatorHeight );
            this.navigatorOuter.width(    this.settings.navigatorWidth );
        }
        this.navigratorStep = this.__getPositionMode( this.settings.navPosition );
        this.directionMode = this.__getDirectionMode();
 
 
        if( this.settings.direction == 'opacity') {
            this.wrapper.addClass( 'lof-opacity' );
            $(this.slides).css('opacity',0).eq(this.currentNo).css('opacity',1);  // Rolling back to the beginning when the end is reached
//            this.caption = $( obj ).find( '.lof-main-item-desc' );
//            $( obj ).find( '.lof-main-item-desc' ).hide().eq(0).show();
            this.caption = $( obj ).find( this.settings.mainItemDesc );
            $( obj ).find( this.settings.mainItemDesc ).hide().eq(0).show();
        } else {
            this.wrapper.css({'left':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) * this.slides.length } );
        }
 
 
        if( this.settings.isPreloaded ) {
            this.preLoadImage( this.onComplete );
        } else {
            this.onComplete();
        }
 
     }
     $.lofSidernews.fn =  $.lofSidernews.prototype;
     $.lofSidernews.fn.extend =  $.lofSidernews.extend = $.extend;
 
     $.lofSidernews.fn.extend({
 
        startUp:function( obj, wrapper ) {
            seft = this;
 
            this.navigatorItems.each( function(index, item ){
                $(item).click( function(){
                    seft.jumping( index, true );
                    seft.setNavActive( index, item );
                } );
                $(item).css( {'height': seft.settings.navigatorHeight, 'width':  seft.settings.navigatorWidth} );
            })
            this.registerWheelHandler( this.navigatorOuter, this );
            this.setNavActive(this.currentNo );
 
            if( this.settings.buttons && typeof (this.settings.buttons) == "object" ){
                this.registerButtonsControl( 'click', this.settings.buttons, this );
            }
            if( this.settings.auto )
            this.play( this.settings.interval,'next', true );
 
            return this;
        },
        onComplete:function(){
            setTimeout( function(){ $('.preload').fadeOut( 900 ); }, 400 );    this.startUp( );
        },
        preLoadImage:function(  callback ){
            var self = this;
            var images = this.wrapper.find( 'img' );
 
            var count = 0;
            images.each( function(index,image){
                if( !image.complete ){
                    image.onload =function(){
                        count++;
                        if( count >= images.length ){
                            self.onComplete();
                        }
                    }
                    image.onerror =function(){
                        count++;
                        if( count >= images.length ){
                            self.onComplete();
                        }
                    }
                }else {
                    count++;
                    if( count >= images.length ){
                        self.onComplete();
                    }
                }
            } );
        },
        navivationAnimate:function( currentIndex ) {
            if (currentIndex <= this.settings.startItem
                || currentIndex - this.settings.startItem >= this.settings.maxItemDisplay-1) {
                    this.settings.startItem = currentIndex - this.settings.maxItemDisplay+2;
                    if (this.settings.startItem < 0) this.settings.startItem = 0;
                    if (this.settings.startItem >this.slides.length-this.settings.maxItemDisplay) {
                        this.settings.startItem = this.slides.length-this.settings.maxItemDisplay;
                    }
            }
            this.navigatorInner.stop().animate( eval('({'+this.navigratorStep[0]+':-'+this.settings.startItem*this.navigratorStep[1]+'})'),
                                                {duration:500, easing:'easeInOutQuad'} );
        },
        setNavActive:function( index, item ){
            if( (this.navigatorItems) ){
                this.navigatorItems.removeClass( 'active' );
                $(this.navigatorItems.get(index)).addClass( 'active' );
                this.navivationAnimate( this.currentNo );
            }
        },
        __getPositionMode:function( position ){
            if(    position  == 'horizontal' ){
                return ['left', this.settings.navigatorWidth];
            }
            return ['top', this.settings.navigatorHeight];
        },
        __getDirectionMode:function(){
            switch( this.settings.direction ){
                case 'opacity': this.maxSize=0; return ['opacity','opacity'];
                default: this.maxSize=this.maxWidth; return ['left','width'];
            }
        },
        registerWheelHandler:function( element, obj ){
             element.bind('mousewheel', function(event, delta ) {
                var dir = delta > 0 ? 'Up' : 'Down',
                    vel = Math.abs(delta);
                if( delta > 0 ){
                    obj.previous( true );
                } else {
                    obj.next( true );
                }
                return false;
            });
        },
        registerButtonsControl:function( eventHandler, objects, self ){
            for( var action in objects ){
                switch (action.toString() ){
                    case 'next':
                        objects[action].click( function() { self.next( true) } );
                        break;
                    case 'previous':
                        objects[action].click( function() { self.previous( true) } );
                        break;
                }
            }
            return this;
        },
        onProcessing:function( manual, start, end ){
            this.previousNo = this.currentNo + (this.currentNo>0 ? -1 : this.slides.length-1);
            this.nextNo     = this.currentNo + (this.currentNo < this.slides.length-1 ? 1 : 1- this.slides.length);
            return this;
        },
        finishFx:function( manual ){
            if( manual ) this.stop();
            if( manual && this.settings.auto ){
                this.play( this.settings.interval,'next', true );
            }
            this.setNavActive( this.currentNo );
        },
        getObjectDirection:function( start, end ){
            return eval("({'"+this.directionMode[0]+"':-"+(this.currentNo*start)+"})");
        },
        fxStart:function( index, obj, currentObj ){
                if( this.settings.direction == 'opacity' ) {
                    $(this.slides).stop().animate({opacity:0}, {duration: this.settings.duration, easing:this.settings.easing} );
                    $(this.slides).eq(index).stop().animate( {opacity:1},this.settings.duration, this.settings.easing, function(){
                                                                            $(currentObj.caption.slideUp().eq(index)).slideDown();
                                                                    } );
 
                }else {
                    this.wrapper.stop().animate( obj, {duration: this.settings.duration, easing:this.settings.easing} );
                }
            return this;
        },
        jumping:function( no, manual ){
            this.stop();
            if( this.currentNo == no ) return;
             var obj = eval("({'"+this.directionMode[0]+"':-"+(this.maxSize*no)+"})");
            this.onProcessing( null, manual, 0, this.maxSize )
                .fxStart( no, obj, this )
                .finishFx( manual );
                this.currentNo  = no;
        },
        next:function( manual , item){
 
            this.currentNo += (this.currentNo < this.slides.length-1) ? 1 : (1 - this.slides.length);
            this.onProcessing( item, manual, 0, this.maxSize )
                .fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )
                .finishFx( manual );
        },
        previous:function( manual, item ){
            this.currentNo += this.currentNo > 0 ? -1 : this.slides.length - 1;
            this.onProcessing( item, manual )
                .fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )
                .finishFx( manual    );
        },
        play:function( delay, direction, wait ){
            this.stop();
            if(!wait){ this[direction](false); }
            var self  = this;
            this.isRun = setTimeout(function() { self[direction](true); }, delay);
        },
        stop:function(){
            if (this.isRun == null) return;
            clearTimeout(this.isRun);
            this.isRun = null;
        }
    })
})(jQuery)