Back To Top
Login
Register
Visit Us At TwitterVisit Us At YouTubeVisit Us At Facebook
KandiChat is in Beta Release. Try It Out
HomeHome  
  • UpdatesUpdates  
  • SearchSearch  
  • Latest imagesLatest images  
  • RegisterRegister  
  • Log inLog in  
  • March 2024
    MonTueWedThuFriSatSun
        123
    45678910
    11121314151617
    18192021222324
    25262728293031

    Calendar Calendar

    Search
     
     

    Display results as :
     


    Rechercher Advanced Search

    Similar topics
    Who is online?
    In total there is 1 user online :: 0 Registered, 0 Hidden and 1 Guest

    None

    Most users ever online was 140 on July 4th 2021, 2:03 pm
    RSS feeds


    Poll
    Top posting users this week
    No user


    View previous topic View next topic Go down  Message [Page 1 of 1]

    Mr.EasyBB

    Image Slideshow: with progress bar

    Mr.EasyBB
    05/18/2013
    Ok so I've been asked to help you all with this tutorial. I haven't read the docs all the way yet, so I'm not sure if it is just confusing or not. In any case I will try to make this as easy as possible ok guys.

    Step 1:

    First go to your Style Sheet and add the CSS below

    Code:
    .pc_container {
        width: 600px;
        height: 200px;
        padding: 15px 1px 47px 1px;
        background-image: url("http://i79.servimg.com/u/f79/17/83/35/07/pc_bg10.png");
        margin: 0px auto;
    }

    .pc_container .pc_item {
        margin-top: 15px;
        margin-left: 1px;
        width: 600px;
        height: 200px;
    }

    .pc_container .pc_bar_container {
        position: absolute;
        top: 230px;
        color: white;
        padding: 0px 10px 0px 10px;
        width: 100%;
        overflow:visible;
    }

    .pc_bar_container_underflow {
        width: 90000px;
        overflow: visible;
    }

    .pc_bar_container_overflow {
        overflow: hidden;
        position: absolute;
        top: 230px;
        color: white;
        margin: 0px 10px 0px 10px;
        padding: 0px;
    }

    .left, .center, .right {
        background-position: left;
        background-repeat: no-repeat;
        overflow: hidden;
        font-size: 1px;
        float: left;
    }

    .bar {
        background-position: left;
        overflow: hidden;
        font-size: 1px;
        float: left;
    }

    .pc_item .desc {
        position: absolute;
        width: 250px;
        padding: 10px;
        height: 180px;
        line-height: 1.8em;
        right: 0px;
        background-image: url("http://i79.servimg.com/u/f79/17/83/35/07/slide_10.png");
    }

    .pc_item .desc h1 {
        color: #DE8F26;    
    }

    Save that.


    Step 2:
    Go to Modules>JavaScript Management>Create New
    Place this code in a new JS page labeled Core JS Presentation Cycle
    [hc=Main Slide show JavaScript]
    Code:
    /*
     * jQuery Cycle Plugin (with Transition Definitions)
     * Examples and documentation at: http://jquery.malsup.com/cycle/
     * Copyright (c) 2007-2009 M. Alsup
     * Version: 2.72 (09-SEP-2009)
     * Dual licensed under the MIT and GPL licenses:
     * http://www.opensource.org/licenses/mit-license.php
     * http://www.gnu.org/licenses/gpl.html
     * Requires: jQuery v1.2.6 or later
     *
     * Originally based on the work of:
     *   1) Matt Oakes
     *   2) Torsten Baldes (http://medienfreunde.com/lab/innerfade/)
     *   3) Benjamin Sterling (http://www.benjaminsterling.com/experiments/jqShuffle/)
     */
    (function($){var ver="2.72";if($.support==undefined){$.support={opacity:!($.browser.msie)};}function debug(s){if($.fn.cycle.debug){log(s);}}function log(){if(window.console&&window.console.log){window.console.log("[cycle] "+Array.prototype.join.call(arguments," "));}}$.fn.cycle=function(options,arg2){var o={s:this.selector,c:this.context};if(this.length===0&&options!="stop"){if(!$.isReady&&o.s){log("DOM not ready, queuing slideshow");$(function(){$(o.s,o.c).cycle(options,arg2);});return this;}log("terminating; zero elements found by selector"+($.isReady?"":" (DOM not ready)"));return this;}return this.each(function(){var opts=handleArguments(this,options,arg2);if(opts===false){return;}if(this.cycleTimeout){clearTimeout(this.cycleTimeout);}this.cycleTimeout=this.cyclePause=0;var $cont=$(this);var $slides=opts.slideExpr?$(opts.slideExpr,this):$cont.children();var els=$slides.get();if(els.length<2){log("terminating; too few slides: "+els.length);return;}var opts2=buildOptions($cont,$slides,els,opts,o);if(opts2===false){return;}var startTime=opts2.continuous?10:getTimeout(opts2.currSlide,opts2.nextSlide,opts2,!opts2.rev);if(startTime){startTime+=(opts2.delay||0);if(startTime<10){startTime=10;}debug("first timeout: "+startTime);this.cycleTimeout=setTimeout(function(){go(els,opts2,0,!opts2.rev);},startTime);}});};function handleArguments(cont,options,arg2){if(cont.cycleStop==undefined){cont.cycleStop=0;}if(options===undefined||options===null){options={};}if(options.constructor==String){switch(options){case"stop":cont.cycleStop++;if(cont.cycleTimeout){clearTimeout(cont.cycleTimeout);}cont.cycleTimeout=0;$(cont).removeData("cycle.opts");return false;case"pause":cont.cyclePause=1;return false;case"resume":cont.cyclePause=0;if(arg2===true){options=$(cont).data("cycle.opts");if(!options){log("options not found, can not resume");return false;}if(cont.cycleTimeout){clearTimeout(cont.cycleTimeout);cont.cycleTimeout=0;}go(options.elements,options,1,1);}return false;case"prev":case"next":var opts=$(cont).data("cycle.opts");if(!opts){log('options not found, "prev/next" ignored');return false;}$.fn.cycle[options](opts);return false;default:options={fx:options};}return options;}else{if(options.constructor==Number){var num=options;options=$(cont).data("cycle.opts");if(!options){log("options not found, can not advance slide");return false;}if(num<0||num>=options.elements.length){log("invalid slide index: "+num);return false;}options.nextSlide=num;if(cont.cycleTimeout){clearTimeout(cont.cycleTimeout);cont.cycleTimeout=0;}if(typeof arg2=="string"){options.oneTimeFx=arg2;}go(options.elements,options,1,num>=options.currSlide);return false;}}return options;}function removeFilter(el,opts){if(!$.support.opacity&&opts.cleartype&&el.style.filter){try{el.style.removeAttribute("filter");}catch(smother){}}}function buildOptions($cont,$slides,els,options,o){var opts=$.extend({},$.fn.cycle.defaults,options||{},$.metadata?$cont.metadata():$.meta?$cont.data():{});if(opts.autostop){opts.countdown=opts.autostopCount||els.length;}var cont=$cont[0];$cont.data("cycle.opts",opts);opts.$cont=$cont;opts.stopCount=cont.cycleStop;opts.elements=els;opts.before=opts.before?[opts.before]:[];opts.after=opts.after?[opts.after]:[];opts.after.unshift(function(){opts.busy=0;});if(!$.support.opacity&&opts.cleartype){opts.after.push(function(){removeFilter(this,opts);});}if(opts.continuous){opts.after.push(function(){go(els,opts,0,!opts.rev);});}saveOriginalOpts(opts);if(!$.support.opacity&&opts.cleartype&&!opts.cleartypeNoBg){clearTypeFix($slides);}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);}if(opts.startingSlide){opts.startingSlide=parseInt(opts.startingSlide);}if(opts.random){opts.randomMap=[];for(var i=0;i<els.length;i++){opts.randomMap.push(i);}opts.randomMap.sort(function(a,b){return Math.random()-0.5;});opts.randomIndex=0;opts.startingSlide=opts.randomMap[0];}else{if(opts.startingSlide>=els.length){opts.startingSlide=0;}}opts.currSlide=opts.startingSlide=opts.startingSlide||0;var first=opts.startingSlide;$slides.css({position:"absolute",top:0,left:0}).hide().each(function(i){var z=first?i>=first?els.length-(i-first):first-i:els.length-i;$(this).css("z-index",z);});$(els[first]).css("opacity",1).show();removeFilter(els[first],opts);if(opts.fit&&opts.width){$slides.width(opts.width);}if(opts.fit&&opts.height&&opts.height!="auto"){$slides.height(opts.height);}var reshape=opts.containerResize&&!$cont.innerHeight();if(reshape){var maxw=0,maxh=0;for(var j=0;j<els.length;j++){var $e=$(els[j]),e=$e[0],w=$e.outerWidth(),h=$e.outerHeight();if(!w){w=e.offsetWidth;}if(!h){h=e.offsetHeight;}maxw=w>maxw?w:maxw;maxh=h>maxh?h:maxh;}if(maxw>0&&maxh>0){$cont.css({width:maxw+"px",height:maxh+"px"});}}if(opts.pause){$cont.hover(function(){this.cyclePause++;},function(){this.cyclePause--;});}if(supportMultiTransitions(opts)===false){return false;}var requeue=false;options.requeueAttempts=options.requeueAttempts||0;$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($el.is("img")){var loadingIE=($.browser.msie&&this.cycleW==28&&this.cycleH==30&&!this.complete);var loadingFF=($.browser.mozilla&&this.cycleW==34&&this.cycleH==19&&!this.complete);var loadingOp=($.browser.opera&&((this.cycleW==42&&this.cycleH==19)||(this.cycleW==37&&this.cycleH==17))&&!this.complete);var loadingOther=(this.cycleH==0&&this.cycleW==0&&!this.complete);if(loadingIE||loadingFF||loadingOp||loadingOther){if(o.s&&opts.requeueOnImageNotLoaded&&++options.requeueAttempts<100){log(options.requeueAttempts," - img slide not loaded, requeuing slideshow: ",this.src,this.cycleW,this.cycleH);setTimeout(function(){$(o.s,o.c).cycle(options);},opts.requeueTimeout);requeue=true;return false;}else{log("could not determine size of image: "+this.src,this.cycleW,this.cycleH);}}}return true;});if(requeue){return false;}opts.cssBefore=opts.cssBefore||{};opts.animIn=opts.animIn||{};opts.animOut=opts.animOut||{};$slides.not(":eq("+first+")").css(opts.cssBefore);if(opts.cssFirst){$($slides[first]).css(opts.cssFirst);}if(opts.timeout){opts.timeout=parseInt(opts.timeout);if(opts.speed.constructor==String){opts.speed=$.fx.speeds[opts.speed]||parseInt(opts.speed);}if(!opts.sync){opts.speed=opts.speed/2;}while((opts.timeout-opts.speed)<250){opts.timeout+=opts.speed;}}if(opts.easing){opts.easeIn=opts.easeOut=opts.easing;}if(!opts.speedIn){opts.speedIn=opts.speed;}if(!opts.speedOut){opts.speedOut=opts.speed;}opts.slideCount=els.length;opts.currSlide=opts.lastSlide=first;if(opts.random){opts.nextSlide=opts.currSlide;if(++opts.randomIndex==els.length){opts.randomIndex=0;}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{opts.nextSlide=opts.startingSlide>=(els.length-1)?0:opts.startingSlide+1;}if(!opts.multiFx){var init=$.fn.cycle.transitions[opts.fx];if($.isFunction(init)){init($cont,$slides,opts);}else{if(opts.fx!="custom"&&!opts.multiFx){log("unknown transition: "+opts.fx,"; slideshow terminating");return false;}}}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.next){$(opts.next).bind(opts.prevNextEvent,function(){return advance(opts,opts.rev?-1:1);});}if(opts.prev){$(opts.prev).bind(opts.prevNextEvent,function(){return advance(opts,opts.rev?1:-1);});}if(opts.pager){buildPager(els,opts);}exposeAddSlide(opts,els);return opts;}function saveOriginalOpts(opts){opts.original={before:[],after:[]};opts.original.cssBefore=$.extend({},opts.cssBefore);opts.original.cssAfter=$.extend({},opts.cssAfter);opts.original.animIn=$.extend({},opts.animIn);opts.original.animOut=$.extend({},opts.animOut);$.each(opts.before,function(){opts.original.before.push(this);});$.each(opts.after,function(){opts.original.after.push(this);});}function supportMultiTransitions(opts){var i,tx,txs=$.fn.cycle.transitions;if(opts.fx.indexOf(",")>0){opts.multiFx=true;opts.fxs=opts.fx.replace(/\s*/g,"").split(",");for(i=0;i<opts.fxs.length;i++){var fx=opts.fxs[i];tx=txs[fx];if(!tx||!txs.hasOwnProperty(fx)||!$.isFunction(tx)){log("discarding unknown transition: ",fx);opts.fxs.splice(i,1);i--;}}if(!opts.fxs.length){log("No valid transitions named; slideshow terminating.");return false;}}else{if(opts.fx=="all"){opts.multiFx=true;opts.fxs=[];for(p in txs){tx=txs[p];if(txs.hasOwnProperty(p)&&$.isFunction(tx)){opts.fxs.push(p);}}}}if(opts.multiFx&&opts.randomizeEffects){var r1=Math.floor(Math.random()*20)+30;for(i=0;i<r1;i++){var r2=Math.floor(Math.random()*opts.fxs.length);opts.fxs.push(opts.fxs.splice(r2,1)[0]);}debug("randomized fx sequence: ",opts.fxs);}return true;}function exposeAddSlide(opts,els){opts.addSlide=function(newSlide,prepend){var $s=$(newSlide),s=$s[0];if(!opts.autostopCount){opts.countdown++;}els[prepend?"unshift":"push"](s);if(opts.els){opts.els[prepend?"unshift":"push"](s);}opts.slideCount=els.length;$s.css("position","absolute");$s[prepend?"prependTo":"appendTo"](opts.$cont);if(prepend){opts.currSlide++;opts.nextSlide++;}if(!$.support.opacity&&opts.cleartype&&!opts.cleartypeNoBg){clearTypeFix($s);}if(opts.fit&&opts.width){$s.width(opts.width);}if(opts.fit&&opts.height&&opts.height!="auto"){$slides.height(opts.height);}s.cycleH=(opts.fit&&opts.height)?opts.height:$s.height();s.cycleW=(opts.fit&&opts.width)?opts.width:$s.width();$s.css(opts.cssBefore);if(opts.pager){$.fn.cycle.createPagerAnchor(els.length-1,s,$(opts.pager),els,opts);}if($.isFunction(opts.onAddSlide)){opts.onAddSlide($s);}else{$s.hide();}};}$.fn.cycle.resetState=function(opts,fx){fx=fx||opts.fx;opts.before=[];opts.after=[];opts.cssBefore=$.extend({},opts.original.cssBefore);opts.cssAfter=$.extend({},opts.original.cssAfter);opts.animIn=$.extend({},opts.original.animIn);opts.animOut=$.extend({},opts.original.animOut);opts.fxFn=null;$.each(opts.original.before,function(){opts.before.push(this);});$.each(opts.original.after,function(){opts.after.push(this);});var init=$.fn.cycle.transitions[fx];if($.isFunction(init)){init(opts.$cont,$(opts.elements),opts);}};function go(els,opts,manual,fwd){if(manual&&opts.busy&&opts.manualTrump){$(els).stop(true,true);opts.busy=false;}if(opts.busy){return;}var p=opts.$cont[0],curr=els[opts.currSlide],next=els[opts.nextSlide];if(p.cycleStop!=opts.stopCount||p.cycleTimeout===0&&!manual){return;}if(!manual&&!p.cyclePause&&((opts.autostop&&(--opts.countdown<=0))||(opts.nowrap&&!opts.random&&opts.nextSlide<opts.currSlide))){if(opts.end){opts.end(opts);}return;}if(manual||!p.cyclePause){var fx=opts.fx;curr.cycleH=curr.cycleH||$(curr).height();curr.cycleW=curr.cycleW||$(curr).width();next.cycleH=next.cycleH||$(next).height();next.cycleW=next.cycleW||$(next).width();if(opts.multiFx){if(opts.lastFx==undefined||++opts.lastFx>=opts.fxs.length){opts.lastFx=0;}fx=opts.fxs[opts.lastFx];opts.currFx=fx;}if(opts.oneTimeFx){fx=opts.oneTimeFx;opts.oneTimeFx=null;}$.fn.cycle.resetState(opts,fx);if(opts.before.length){$.each(opts.before,function(i,o){if(p.cycleStop!=opts.stopCount){return;}o.apply(next,[curr,next,opts,fwd]);});}var after=function(){$.each(opts.after,function(i,o){if(p.cycleStop!=opts.stopCount){return;}o.apply(next,[curr,next,opts,fwd]);});};if(opts.nextSlide!=opts.currSlide){opts.busy=1;if(opts.fxFn){opts.fxFn(curr,next,opts,after,fwd);}else{if($.isFunction($.fn.cycle[opts.fx])){$.fn.cycle[opts.fx](curr,next,opts,after);}else{$.fn.cycle.custom(curr,next,opts,after,manual&&opts.fastOnEvent);}}}opts.lastSlide=opts.currSlide;if(opts.random){opts.currSlide=opts.nextSlide;if(++opts.randomIndex==els.length){opts.randomIndex=0;}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{var roll=(opts.nextSlide+1)==els.length;opts.nextSlide=roll?0:opts.nextSlide+1;opts.currSlide=roll?els.length-1:opts.nextSlide-1;}if(opts.pager){$.fn.cycle.updateActivePagerLink(opts.pager,opts.currSlide);}}var ms=0;if(opts.timeout&&!opts.continuous){ms=getTimeout(curr,next,opts,fwd);}else{if(opts.continuous&&p.cyclePause){ms=10;}}if(ms>0){p.cycleTimeout=setTimeout(function(){go(els,opts,0,!opts.rev);},ms);}}$.fn.cycle.updateActivePagerLink=function(pager,currSlide){$(pager).find("a").removeClass("activeSlide").filter("a:eq("+currSlide+")").addClass("activeSlide");};function getTimeout(curr,next,opts,fwd){if(opts.timeoutFn){var t=opts.timeoutFn(curr,next,opts,fwd);while((t-opts.speed)<250){t+=opts.speed;}debug("calculated timeout: "+t+"; speed: "+opts.speed);if(t!==false){return t;}}return opts.timeout;}$.fn.cycle.next=function(opts){advance(opts,opts.rev?-1:1);};$.fn.cycle.prev=function(opts){advance(opts,opts.rev?1:-1);};function advance(opts,val){var els=opts.elements;var p=opts.$cont[0],timeout=p.cycleTimeout;if(timeout){clearTimeout(timeout);p.cycleTimeout=0;}if(opts.random&&val<0){opts.randomIndex--;if(--opts.randomIndex==-2){opts.randomIndex=els.length-2;}else{if(opts.randomIndex==-1){opts.randomIndex=els.length-1;}}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{if(opts.random){if(++opts.randomIndex==els.length){opts.randomIndex=0;}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{opts.nextSlide=opts.currSlide+val;if(opts.nextSlide<0){if(opts.nowrap){return false;}opts.nextSlide=els.length-1;}else{if(opts.nextSlide>=els.length){if(opts.nowrap){return false;}opts.nextSlide=0;}}}}if($.isFunction(opts.prevNextClick)){opts.prevNextClick(val>0,opts.nextSlide,els[opts.nextSlide]);}go(els,opts,1,val>=0);return false;}function buildPager(els,opts){var $p=$(opts.pager);$.each(els,function(i,o){$.fn.cycle.createPagerAnchor(i,o,$p,els,opts);});$.fn.cycle.updateActivePagerLink(opts.pager,opts.startingSlide);}$.fn.cycle.createPagerAnchor=function(i,el,$p,els,opts){var a;if($.isFunction(opts.pagerAnchorBuilder)){a=opts.pagerAnchorBuilder(i,el);}else{a='<a href="#">'+(i+1)+"</a>";}if(!a){return;}var $a=$(a);if($a.parents("body").length===0){var arr=[];if($p.length>1){$p.each(function(){var $clone=$a.clone(true);$(this).append($clone);arr.push($clone);});$a=$(arr);}else{$a.appendTo($p);}}$a.bind(opts.pagerEvent,function(e){e.preventDefault();opts.nextSlide=i;var p=opts.$cont[0],timeout=p.cycleTimeout;if(timeout){clearTimeout(timeout);p.cycleTimeout=0;}if($.isFunction(opts.pagerClick)){opts.pagerClick(opts.nextSlide,els[opts.nextSlide]);}go(els,opts,1,opts.currSlide<i);return false;});if(opts.pagerEvent!="click"){$a.click(function(){return false;});}if(opts.pauseOnPagerHover){$a.hover(function(){opts.$cont[0].cyclePause++;},function(){opts.$cont[0].cyclePause--;});}};$.fn.cycle.hopsFromLast=function(opts,fwd){var hops,l=opts.lastSlide,c=opts.currSlide;if(fwd){hops=c>l?c-l:opts.slideCount-l;}else{hops=c<l?l-c:l+opts.slideCount-c;}return hops;};function clearTypeFix($slides){function hex(s){s=parseInt(s).toString(16);return s.length<2?"0"+s:s;}function getBg(e){for(;e&&e.nodeName.toLowerCase()!="html";e=e.parentNode){var v=$.css(e,"background-color");if(v.indexOf("rgb")>=0){var rgb=v.match(/\d+/g);return"#"+hex(rgb[0])+hex(rgb[1])+hex(rgb[2]);}if(v&&v!="transparent"){return v;}}return"#ffffff";}$slides.each(function(){$(this).css("background-color",getBg(this));});}$.fn.cycle.commonReset=function(curr,next,opts,w,h,rev){$(opts.elements).not(curr).hide();opts.cssBefore.opacity=1;opts.cssBefore.display="block";if(w!==false&&next.cycleW>0){opts.cssBefore.width=next.cycleW;}if(h!==false&&next.cycleH>0){opts.cssBefore.height=next.cycleH;}opts.cssAfter=opts.cssAfter||{};opts.cssAfter.display="none";$(curr).css("zIndex",opts.slideCount+(rev===true?1:0));$(next).css("zIndex",opts.slideCount+(rev===true?0:1));};$.fn.cycle.custom=function(curr,next,opts,cb,speedOverride){var $l=$(curr),$n=$(next);var speedIn=opts.speedIn,speedOut=opts.speedOut,easeIn=opts.easeIn,easeOut=opts.easeOut;$n.css(opts.cssBefore);if(speedOverride){if(typeof speedOverride=="number"){speedIn=speedOut=speedOverride;}else{speedIn=speedOut=1;}easeIn=easeOut=null;}var fn=function(){$n.animate(opts.animIn,speedIn,easeIn,cb);};$l.animate(opts.animOut,speedOut,easeOut,function(){if(opts.cssAfter){$l.css(opts.cssAfter);}if(!opts.sync){fn();}});if(opts.sync){fn();}};$.fn.cycle.transitions={fade:function($cont,$slides,opts){$slides.not(":eq("+opts.currSlide+")").css("opacity",0);opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.cssBefore.opacity=0;});opts.animIn={opacity:1};opts.animOut={opacity:0};opts.cssBefore={top:0,left:0};}};$.fn.cycle.ver=function(){return ver;};$.fn.cycle.defaults={fx:"fade",timeout:4000,timeoutFn:null,continuous:0,speed:1000,speedIn:null,speedOut:null,next:null,prev:null,prevNextClick:null,prevNextEvent:"click",pager:null,pagerClick:null,pagerEvent:"click",pagerAnchorBuilder:null,before:null,after:null,end:null,easing:null,easeIn:null,easeOut:null,shuffle:null,animIn:null,animOut:null,cssBefore:null,cssAfter:null,fxFn:null,height:"auto",startingSlide:0,sync:1,random:0,fit:0,containerResize:1,pause:0,pauseOnPagerHover:0,autostop:0,autostopCount:0,delay:0,slideExpr:null,cleartype:!$.support.opacity,cleartypeNoBg:false,nowrap:0,fastOnEvent:0,randomizeEffects:1,rev:0,manualTrump:true,requeueOnImageNotLoaded:true,requeueTimeout:250};})(jQuery);
    /*
     * jQuery Cycle Plugin Transition Definitions
     * This script is a plugin for the jQuery Cycle Plugin
     * Examples and documentation at: http://malsup.com/jquery/cycle/
     * Copyright (c) 2007-2008 M. Alsup
     * Version:    2.72
     * Dual licensed under the MIT and GPL licenses:
     * http://www.opensource.org/licenses/mit-license.php
     * http://www.gnu.org/licenses/gpl.html
     */
    (function($){$.fn.cycle.transitions.none=function($cont,$slides,opts){opts.fxFn=function(curr,next,opts,after){$(next).show();$(curr).hide();after();};};$.fn.cycle.transitions.scrollUp=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var h=$cont.height();opts.cssBefore={top:h,left:0};opts.cssFirst={top:0};opts.animIn={top:0};opts.animOut={top:-h};};$.fn.cycle.transitions.scrollDown=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var h=$cont.height();opts.cssFirst={top:0};opts.cssBefore={top:-h,left:0};opts.animIn={top:0};opts.animOut={top:h};};$.fn.cycle.transitions.scrollLeft=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var w=$cont.width();opts.cssFirst={left:0};opts.cssBefore={left:w,top:0};opts.animIn={left:0};opts.animOut={left:0-w};};$.fn.cycle.transitions.scrollRight=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var w=$cont.width();opts.cssFirst={left:0};opts.cssBefore={left:-w,top:0};opts.animIn={left:0};opts.animOut={left:w};};$.fn.cycle.transitions.scrollHorz=function($cont,$slides,opts){$cont.css("overflow","hidden").width();opts.before.push(function(curr,next,opts,fwd){$.fn.cycle.commonReset(curr,next,opts);opts.cssBefore.left=fwd?(next.cycleW-1):(1-next.cycleW);opts.animOut.left=fwd?-curr.cycleW:curr.cycleW;});opts.cssFirst={left:0};opts.cssBefore={top:0};opts.animIn={left:0};opts.animOut={top:0};};$.fn.cycle.transitions.scrollVert=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push(function(curr,next,opts,fwd){$.fn.cycle.commonReset(curr,next,opts);opts.cssBefore.top=fwd?(1-next.cycleH):(next.cycleH-1);opts.animOut.top=fwd?curr.cycleH:-curr.cycleH;});opts.cssFirst={top:0};opts.cssBefore={left:0};opts.animIn={top:0};opts.animOut={left:0};};$.fn.cycle.transitions.slideX=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$(opts.elements).not(curr).hide();$.fn.cycle.commonReset(curr,next,opts,false,true);opts.animIn.width=next.cycleW;});opts.cssBefore={left:0,top:0,width:0};opts.animIn={width:"show"};opts.animOut={width:0};};$.fn.cycle.transitions.slideY=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$(opts.elements).not(curr).hide();$.fn.cycle.commonReset(curr,next,opts,true,false);opts.animIn.height=next.cycleH;});opts.cssBefore={left:0,top:0,height:0};opts.animIn={height:"show"};opts.animOut={height:0};};$.fn.cycle.transitions.shuffle=function($cont,$slides,opts){var i,w=$cont.css("overflow","visible").width();$slides.css({left:0,top:0});opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,true,true);});if(!opts.speedAdjusted){opts.speed=opts.speed/2;opts.speedAdjusted=true;}opts.random=0;opts.shuffle=opts.shuffle||{left:-w,top:15};opts.els=[];for(i=0;i<$slides.length;i++){opts.els.push($slides[i]);}for(i=0;i<opts.currSlide;i++){opts.els.push(opts.els.shift());}opts.fxFn=function(curr,next,opts,cb,fwd){var $el=fwd?$(curr):$(next);$(next).css(opts.cssBefore);var count=opts.slideCount;$el.animate(opts.shuffle,opts.speedIn,opts.easeIn,function(){var hops=$.fn.cycle.hopsFromLast(opts,fwd);for(var k=0;k<hops;k++){fwd?opts.els.push(opts.els.shift()):opts.els.unshift(opts.els.pop());}if(fwd){for(var i=0,len=opts.els.length;i<len;i++){$(opts.els[i]).css("z-index",len-i+count);}}else{var z=$(curr).css("z-index");$el.css("z-index",parseInt(z)+1+count);}$el.animate({left:0,top:0},opts.speedOut,opts.easeOut,function(){$(fwd?this:curr).hide();if(cb){cb();}});});};opts.cssBefore={display:"block",opacity:1,top:0,left:0};};$.fn.cycle.transitions.turnUp=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false);opts.cssBefore.top=next.cycleH;opts.animIn.height=next.cycleH;});opts.cssFirst={top:0};opts.cssBefore={left:0,height:0};opts.animIn={top:0};opts.animOut={height:0};};$.fn.cycle.transitions.turnDown=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false);opts.animIn.height=next.cycleH;opts.animOut.top=curr.cycleH;});opts.cssFirst={top:0};opts.cssBefore={left:0,top:0,height:0};opts.animOut={height:0};};$.fn.cycle.transitions.turnLeft=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true);opts.cssBefore.left=next.cycleW;opts.animIn.width=next.cycleW;});opts.cssBefore={top:0,width:0};opts.animIn={left:0};opts.animOut={width:0};};$.fn.cycle.transitions.turnRight=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true);opts.animIn.width=next.cycleW;opts.animOut.left=curr.cycleW;});opts.cssBefore={top:0,left:0,width:0};opts.animIn={left:0};opts.animOut={width:0};};$.fn.cycle.transitions.zoom=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,false,true);opts.cssBefore.top=next.cycleH/2;opts.cssBefore.left=next.cycleW/2;opts.animIn={top:0,left:0,width:next.cycleW,height:next.cycleH};opts.animOut={width:0,height:0,top:curr.cycleH/2,left:curr.cycleW/2};});opts.cssFirst={top:0,left:0};opts.cssBefore={width:0,height:0};};$.fn.cycle.transitions.fadeZoom=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,false);opts.cssBefore.left=next.cycleW/2;opts.cssBefore.top=next.cycleH/2;opts.animIn={top:0,left:0,width:next.cycleW,height:next.cycleH};});opts.cssBefore={width:0,height:0};opts.animOut={opacity:0};};$.fn.cycle.transitions.blindX=function($cont,$slides,opts){var w=$cont.css("overflow","hidden").width();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.animIn.width=next.cycleW;opts.animOut.left=curr.cycleW;});opts.cssBefore={left:w,top:0};opts.animIn={left:0};opts.animOut={left:w};};$.fn.cycle.transitions.blindY=function($cont,$slides,opts){var h=$cont.css("overflow","hidden").height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.animIn.height=next.cycleH;opts.animOut.top=curr.cycleH;});opts.cssBefore={top:h,left:0};opts.animIn={top:0};opts.animOut={top:h};};$.fn.cycle.transitions.blindZ=function($cont,$slides,opts){var h=$cont.css("overflow","hidden").height();var w=$cont.width();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.animIn.height=next.cycleH;opts.animOut.top=curr.cycleH;});opts.cssBefore={top:h,left:w};opts.animIn={top:0,left:0};opts.animOut={top:h,left:w};};$.fn.cycle.transitions.growX=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true);opts.cssBefore.left=this.cycleW/2;opts.animIn={left:0,width:this.cycleW};opts.animOut={left:0};});opts.cssBefore={width:0,top:0};};$.fn.cycle.transitions.growY=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false);opts.cssBefore.top=this.cycleH/2;opts.animIn={top:0,height:this.cycleH};opts.animOut={top:0};});opts.cssBefore={height:0,left:0};};$.fn.cycle.transitions.curtainX=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true,true);opts.cssBefore.left=next.cycleW/2;opts.animIn={left:0,width:this.cycleW};opts.animOut={left:curr.cycleW/2,width:0};});opts.cssBefore={top:0,width:0};};$.fn.cycle.transitions.curtainY=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false,true);opts.cssBefore.top=next.cycleH/2;opts.animIn={top:0,height:next.cycleH};opts.animOut={top:curr.cycleH/2,height:0};});opts.cssBefore={left:0,height:0};};$.fn.cycle.transitions.cover=function($cont,$slides,opts){var d=opts.direction||"left";var w=$cont.css("overflow","hidden").width();var h=$cont.height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);if(d=="right"){opts.cssBefore.left=-w;}else{if(d=="up"){opts.cssBefore.top=h;}else{if(d=="down"){opts.cssBefore.top=-h;}else{opts.cssBefore.left=w;}}}});opts.animIn={left:0,top:0};opts.animOut={opacity:1};opts.cssBefore={top:0,left:0};};$.fn.cycle.transitions.uncover=function($cont,$slides,opts){var d=opts.direction||"left";var w=$cont.css("overflow","hidden").width();var h=$cont.height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,true,true);if(d=="right"){opts.animOut.left=w;}else{if(d=="up"){opts.animOut.top=-h;}else{if(d=="down"){opts.animOut.top=h;}else{opts.animOut.left=-w;}}}});opts.animIn={left:0,top:0};opts.animOut={opacity:1};opts.cssBefore={top:0,left:0};};$.fn.cycle.transitions.toss=function($cont,$slides,opts){var w=$cont.css("overflow","visible").width();var h=$cont.height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,true,true);if(!opts.animOut.left&&!opts.animOut.top){opts.animOut={left:w*2,top:-h/2,opacity:0};}else{opts.animOut.opacity=0;}});opts.cssBefore={left:0,top:0};opts.animIn={left:0};};$.fn.cycle.transitions.wipe=function($cont,$slides,opts){var w=$cont.css("overflow","hidden").width();var h=$cont.height();opts.cssBefore=opts.cssBefore||{};var clip;if(opts.clip){if(/l2r/.test(opts.clip)){clip="rect(0px 0px "+h+"px 0px)";}else{if(/r2l/.test(opts.clip)){clip="rect(0px "+w+"px "+h+"px "+w+"px)";}else{if(/t2b/.test(opts.clip)){clip="rect(0px "+w+"px 0px 0px)";}else{if(/b2t/.test(opts.clip)){clip="rect("+h+"px "+w+"px "+h+"px 0px)";}else{if(/zoom/.test(opts.clip)){var top=parseInt(h/2);var left=parseInt(w/2);clip="rect("+top+"px "+left+"px "+top+"px "+left+"px)";}}}}}}opts.cssBefore.clip=opts.cssBefore.clip||clip||"rect(0px 0px 0px 0px)";var d=opts.cssBefore.clip.match(/(\d+)/g);var t=parseInt(d[0]),r=parseInt(d[1]),b=parseInt(d[2]),l=parseInt(d[3]);opts.before.push(function(curr,next,opts){if(curr==next){return;}var $curr=$(curr),$next=$(next);$.fn.cycle.commonReset(curr,next,opts,true,true,false);opts.cssAfter.display="block";var step=1,count=parseInt((opts.speedIn/13))-1;(function f(){var tt=t?t-parseInt(step*(t/count)):0;var ll=l?l-parseInt(step*(l/count)):0;var bb=b<h?b+parseInt(step*((h-b)/count||1)):h;var rr=r<w?r+parseInt(step*((w-r)/count||1)):w;$next.css({clip:"rect("+tt+"px "+rr+"px "+bb+"px "+ll+"px)"});(step++<=count)?setTimeout(f,13):$curr.css("display","none");})();});opts.cssBefore={display:"block",opacity:1,top:0,left:0};opts.animIn={left:0};opts.animOut={left:0};};})(jQuery);
    [/hc]

    Save that.


    NOTE:
      If you are using this in an HTML page that is fine, just uncheck any location in the javascript location. We can still use it. Save it and then go back to the JS management, the file should be at the top, and you should see a name to it like so yourwebsite.com/34533.js well all we need is anything after your domain name. So if you are in an html page just add this to the HEAD of the HTML doc.

    <script src="/34533.js" type="text/javascript"></script>

    If you are using this in your website mark it to the corresponding page that you are going to use it (All Pages, Index, Portal, Topics etc.)




    Step 3:
    Now to the next JavaScript-
    This is going to make your Slide Show have a progress bar as well as the transition effects.

    [hc=JavaScript for Styles]
    Code:
    var presentationCycle = {
        
        /*
         * Presentation Cycle - a jQuery Cycle extension
         * Author:  Gaya Kessler
         * URL:     http://www.gayadesign.com
         * Date:   03-11-09
         */
        
        //slide options
        slideTimeout: 8000,
        containerId: "presentation_container",
        
        //cycle options
        cycleFx: 'scrollHorz',
        cycleSpeed: 600,  
        
        //progressbar options
        barHeight: 14,
        barDisplacement: 20,
        barImgLeft: "http://i79.servimg.com/u/f79/17/83/35/07/pc_ite10.gif",
        barImgRight: "http://i79.servimg.com/u/f79/17/83/35/07/pc_ite11.gif",
        barImgCenter: "http://i79.servimg.com/u/f79/17/83/35/07/pc_ite12.gif",
        barImgBarEmpty: "http://i79.servimg.com/u/f79/17/83/35/07/pc_bar11.gif",
        barImgBarFull: "http://i79.servimg.com/u/f79/17/83/35/07/pc_bar12.gif",
        
        //variables this script need
        itemCount: 0,
        currentItem: 0,
        itemBarWidth: 0,
        barContainer: "",
        barContainerActive: "",
        barContainerOverflow: "",
        disableAnimation: false,
        
        init: function() {
            
            presentationCycle.itemCount = $('#' + presentationCycle.containerId).children().length;




            presentationCycle.barContainer = $("<div></div>");
            $(presentationCycle.barContainer).addClass("pc_bar_container");
            
            var subtrackSpace = (presentationCycle.itemCount * presentationCycle.barHeight);
            var totalWidth = $('#' + presentationCycle.containerId).innerWidth() - presentationCycle.barDisplacement;
            var fillWidth = Math.floor((totalWidth - subtrackSpace) / (presentationCycle.itemCount - 1));
            presentationCycle.itemBarWidth = fillWidth;
            
            for (var i = 0; i < presentationCycle.itemCount; i++) {
                var item = $("<div>&nbsp;</div>").appendTo(presentationCycle.barContainer);
                var extra_bar = true;
                if (i == 0) {
                    $(item).addClass("left");
                    $(item).css({
                        backgroundImage: "url(" + presentationCycle.barImgLeft + ")",
                        height: presentationCycle.barHeight + "px",
                        width: presentationCycle.barHeight + "px"
                    });
                } else if (i == (presentationCycle.itemCount - 1)) {
                    $(item).addClass("right");
                    $(item).css({
                        backgroundImage: "url(" + presentationCycle.barImgRight + ")",
                        height: presentationCycle.barHeight + "px",
                        width: presentationCycle.barHeight + "px"
                    });
                    extra_bar = false;
                } else {
                    $(item).addClass("center");
                    $(item).css({
                        backgroundImage: "url(" + presentationCycle.barImgCenter + ")",
                        height: presentationCycle.barHeight + "px",
                        width: presentationCycle.barHeight + "px"
                    });
                }
                $(item).attr('itemNr', (i + 1));
                $(item).css('cursor', 'pointer');
                $(item).click(function() {
                   presentationCycle.gotoSlide($(this).attr('itemNr'));
                });
                
                if (extra_bar == true) {
                    var item = $("<div>&nbsp;</div>").appendTo(presentationCycle.barContainer);
                    $(item).addClass("bar");
                     $(item).css({
                        backgroundImage: "url(" + presentationCycle.barImgBarEmpty + ")",
                        height: presentationCycle.barHeight + "px",
                        width: fillWidth + "px"
                    });
                }
            }
            
            var overflow = $("<div></div>");
            $(overflow).addClass("pc_bar_container_overflow");
            $(overflow).css({
                overflow: "hidden",
                width: totalWidth + "px"
            });
            var underflow = $("<div></div>");
            $(underflow).addClass("pc_bar_container_underflow").appendTo(overflow);
            
            presentationCycle.barContainerActive = $(presentationCycle.barContainer).clone().appendTo(underflow);
            $(presentationCycle.barContainerActive).removeClass("pc_bar_container");
            $(presentationCycle.barContainerActive).children().each(function () {
                $(this).css({
                    backgroundPosition: "right"
                });
                if ($(this).css("background-image").match(presentationCycle.barImgBarEmpty)) {
                    var newImg = $(this).css("background-image").replace(presentationCycle.barImgBarEmpty, presentationCycle.barImgBarFull);
                    $(this).css("background-image", newImg);
                }
            });
            $(overflow).css({
                width: presentationCycle.barHeight + "px",
                height: presentationCycle.barHeight + "px"
            });
            
            presentationCycle.barContainerOverflow = overflow;
            
            $('#' + presentationCycle.containerId).cycle({
              fx: presentationCycle.cycleFx,
                speed: presentationCycle.cycleSpeed,
                timeout: presentationCycle.slideTimeout,
                before: function(currSlideElement, nextSlideElement) { presentationCycle.beforeSlide(currSlideElement, nextSlideElement); }
           });
            
            presentationCycle.barContainer.appendTo($('#' + presentationCycle.containerId));
            overflow.appendTo($('#' + presentationCycle.containerId));
            
            var i = 0;
            $(".pc_bar_container_overflow .left, .pc_bar_container_overflow .center, .pc_bar_container_overflow .right").each(function () {
                $(this).attr('itemNr', (i + 1));
                $(this).css('cursor', 'pointer');
                $(this).click(function() {
                    presentationCycle.gotoSlide($(this).attr('itemNr'));
                });
                i++;
            });
        },
        
        beforeSlide: function(currSlideElement, nextSlideElement) {
            if (presentationCycle.currentItem == 0) {
                presentationCycle.currentItem = 1;
            } else {
                presentationCycle.currentItem = (presentationCycle.itemCount - ($(nextSlideElement).nextAll().length)) + 2;
            }
            presentationCycle.animateProcess();
        },
        
        animateProcess: function() {
            var startWidth = (presentationCycle.itemBarWidth * (presentationCycle.currentItem - 1)) + (presentationCycle.barHeight * presentationCycle.currentItem);
            if (presentationCycle.currentItem != presentationCycle.itemCount) {
                var newWidth = (presentationCycle.itemBarWidth * (presentationCycle.currentItem)) + (presentationCycle.barHeight * (presentationCycle.currentItem + 1));   
            } else {
                var newWidth = presentationCycle.barHeight;
            }
            
            $(presentationCycle.barContainerOverflow).css({
                width: startWidth + "px"
            });
            if (presentationCycle.disableAnimation == false) {
                $(presentationCycle.barContainerOverflow).stop().animate({
                    width: newWidth + "px"
                }, (presentationCycle.slideTimeout - 100));   
            }
        },
        
        gotoSlide: function(itemNr) {
            $(presentationCycle.barContainerOverflow).stop();
            presentationCycle.disableAnimation = true;
            $('#' + presentationCycle.containerId).cycle((itemNr - 1));
            $('#' + presentationCycle.containerId).cycle('pause');
        }
        
    }
    [/hc]

    Save that, remember this goes for the same Note as above, it is ok if you use this for an HTML page just unmark anything inside the Javascript Position area. [IE: All Pages, Index, In the Topics,etc.]


    Step 4:

    Now how to set up the mark up for this code?


    Code:
    <div id="presentation_container" class="pc_container">
        <div class="pc_item">
            <div class="desc">
                <h1>Description title</h1>
                You can put your description in here.
            </div>
            <img src="http://i79.servimg.com/u/f79/17/83/35/07/slide110.jpg" alt="slide1" />
        </div>
    <div class="pc_item">
            <div class="desc">
                <h1>Description title</h1>
                You can put your description in here.
            </div>
            <img src="http://i79.servimg.com/u/f79/17/83/35/07/slide210.jpg" alt="slide2" />
        </div>
        <!-- ... repeat the previous item -->
    </div>

    That is all that you need. Though we have to initiate the Code now. So how do we do this?

    If you are in an HTML page,go to right before the </body> element in your HTML doc and place this

    Code:
    <script language ="javascript">
    presentationCycle.init();
    </script>

    If not, just simply place this in a new JavaScript Page.


    NOTE:
    [hc=HTML DOC Template]
    Code:

    <!DOCTYPE html>
    <html>
    <head>
     <title>PLACE PAGE TITLE HERE</title>
      <!--[if IE]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
    </body>
    </html>
    [/hc]

    To see this in action click [You must be registered and logged in to see this link.]

    To add more images add this to the HTML after any of the </div> right after the <img> tags...


    Code:
    <div class="pc_item">
            <div class="desc">
                <h1>Description title</h1>
                You can put your description in here.
            </div>
            <img src="http://i79.servimg.com/u/f79/17/83/35/07/slide210.jpg" alt="slide2" />
        </div>


    To adjust any of the settings go to the Second Script and find these

    //slide options
    slideTimeout: 8000,
    containerId: "presentation_container",
    //cycle options
    cycleFx: 'scrollHorz',
    cycleSpeed: 600,


    Allowed changes:

    slideTimeout:  Must be numerical, the higher the number the slower the speed
    containerID:  Honestly I wouldn't change this, though all you do is change the elements ID if you do
    cycleFx: a full list to change are as follows---
    [hc=Click to view List]
       

    • blindX
    • blindY
    • blindZ
    • cover
    • curtainX
    • curtainY
    • fade
    • fadeZoom
    • growX
    • growY
    • none
    • scrollUp
    • scrollDown
    • scrollLeft
    • scrollRight
    • scrollHorz
    • scrollVert
    • shuffle
    • slideX
    • slideY
    • toss
    • turnUp
    • turnDown
    • turnLeft
    • turnRight
    • uncover
    • wipe
    • zoom
         

    [/hc]
    cycleSpeed: Must be numerical, the higher the number the slower the speed.




    Well I hope this helped as I enjoyed writing again this is not written by myself or anyone at EasyBB the link can be found below

    [You must be registered and logged in to see this link.]

    Similar topics

    -

    » Image LightBox Code
    Share this post on: reddit

    mostone
    yeah, i done try, its work Smile

    thanks before mr.easyBB <3

    Post May 19th 2013, 1:00 pm by mostone

    Rukiafan
    How do you add this to a banner widget?

    Post May 30th 2013, 5:33 pm by Rukiafan

    Mr.EasyBB
    To a banner widget?

    Post May 30th 2013, 5:53 pm by Mr.EasyBB

    Rukiafan
    A widget for the forum!

    Post May 30th 2013, 5:53 pm by Rukiafan

    Rukiafan
    How can you make the title in each slide image a clickable link to a different page for each image?

    Post May 30th 2013, 7:48 pm by Rukiafan

    Mr.EasyBB
    I wouldn't place this in a widget, unless its a widget for the portal.

    And change these

    Code:
    <div class="pc_item">
            <div class="desc">
                <h1>Description title</h1>
                You can put your description in here.
            </div>
            <img src="http://i79.servimg.com/u/f79/17/83/35/07/slide210.jpg" alt="slide2" />
        </div>

    To something like this

    Code:
    <div class="pc_item">
            <div class="desc">
                <h1>Description title</h1>
                You can put your description in here.
            </div>
    <a href="">
            <img src="http://i79.servimg.com/u/f79/17/83/35/07/slide210.jpg" alt="slide2" />
    </a>    
    </div>

    Post May 30th 2013, 7:51 pm by Mr.EasyBB

    Rukiafan
    Liked
    What about the links?

    Post May 30th 2013, 7:52 pm by Rukiafan

    Mr.EasyBB
    I already provided them if you look at the html

    Post May 30th 2013, 7:57 pm by Mr.EasyBB

    Rukiafan
    Not a link to the image, a link to another page! I'm going to use this to show featured reviews in our reviews page so I need to link each featured image to each of the featured review articles. Wink

    Post May 30th 2013, 8:00 pm by Rukiafan

    Mr.EasyBB
    Yes and that is how you do it. You need to place the A href which href means Hyperlink REFerence place that href to the url you are trying to go to. There is no url to your Image except the <img src="" itself. I mean we can place a url there to get the image bigger but what I did was make the image clickable to go to any url



    Last edited by Mr.EasyBB on June 8th 2013, 9:04 pm; edited 1 time in total

    Post May 30th 2013, 10:06 pm by Mr.EasyBB

    Rukiafan
    How can I show my slideshow from my html page on a widget in the portal to let people who first enter our website see our featured reviews slide?

    Post June 8th 2013, 8:32 pm by Rukiafan

    runawayhorses
    Have you tried adding the codes to a widget on the portal?

    Post June 8th 2013, 9:00 pm by runawayhorses

    Rukiafan
    Well I don't want to have 2 separate codes for this as I want both to show the same thing. Wink

    Post June 8th 2013, 10:21 pm by Rukiafan

    Mr.EasyBB
    Just do an iframe then.

    Post June 8th 2013, 11:01 pm by Mr.EasyBB

    Post  by Sponsored content

    View previous topic View next topic Back to top  Message [Page 1 of 1]