|
|
Line 673: |
Line 673: |
| <script type="text/javascript" src="http://simsekburak.com/fatihigem/ddsmoothmenu.js"></script> | | <script type="text/javascript" src="http://simsekburak.com/fatihigem/ddsmoothmenu.js"></script> |
| | | |
- | <script type="text/javascript"> | + | <script type="text/javascript" src="http://simsekburak.com/fatihigem/jquery.nivo.slider.js"></script> |
- | /*
| + | |
- | * jQuery Nivo Slider v2.3
| + | |
- | * http://nivo.dev7studios.com
| + | |
- | *
| + | |
- | * Copyright 2010, Gilbert Pellegrom
| + | |
- | * Free to use and abuse under the MIT license.
| + | |
- | * http://www.opensource.org/licenses/mit-license.php
| + | |
- | *
| + | |
- | * May 2010 - Pick random effect from specified set of effects by toronegro
| + | |
- | * May 2010 - controlNavThumbsFromRel option added by nerd-sh
| + | |
- | * May 2010 - Do not start nivoRun timer if there is only 1 slide by msielski
| + | |
- | * April 2010 - controlNavThumbs option added by Jamie Thompson (http://jamiethompson.co.uk)
| + | |
- | * March 2010 - manualAdvance option added by HelloPablo (http://hellopablo.co.uk)
| + | |
- | */
| + | |
| | | |
- | (function($) {
| |
- |
| |
- | var NivoSlider = function(element, options){
| |
- | //Defaults are below
| |
- | var settings = $.extend({}, $.fn.nivoSlider.defaults, options);
| |
- |
| |
- | //Useful variables. Play carefully.
| |
- | var vars = {
| |
- | currentSlide: 0,
| |
- | currentImage: '',
| |
- | totalSlides: 0,
| |
- | randAnim: '',
| |
- | running: false,
| |
- | paused: false,
| |
- | stop:false
| |
- | };
| |
- |
| |
- | //Get this slider
| |
- | var slider = $(element);
| |
- | slider.data('nivo:vars', vars);
| |
- | slider.css('position','relative');
| |
- | slider.addClass('nivoSlider');
| |
- |
| |
- | //Find our slider children
| |
- | var kids = slider.children();
| |
- | kids.each(function() {
| |
- | var child = $(this);
| |
- | var link = '';
| |
- | if(!child.is('img')){
| |
- | if(child.is('a')){
| |
- | child.addClass('nivo-imageLink');
| |
- | link = child;
| |
- | }
| |
- | child = child.find('img:first');
| |
- | }
| |
- | //Get img width & height
| |
- | var childWidth = child.width();
| |
- | if(childWidth == 0) childWidth = child.attr('width');
| |
- | var childHeight = child.height();
| |
- | if(childHeight == 0) childHeight = child.attr('height');
| |
- | //Resize the slider
| |
- | if(childWidth > slider.width()){
| |
- | slider.width(childWidth);
| |
- | }
| |
- | if(childHeight > slider.height()){
| |
- | slider.height(childHeight);
| |
- | }
| |
- | if(link != ''){
| |
- | link.css('display','none');
| |
- | }
| |
- | child.css('display','none');
| |
- | vars.totalSlides++;
| |
- | });
| |
- |
| |
- | //Set startSlide
| |
- | if(settings.startSlide > 0){
| |
- | if(settings.startSlide >= vars.totalSlides) settings.startSlide = vars.totalSlides - 1;
| |
- | vars.currentSlide = settings.startSlide;
| |
- | }
| |
- |
| |
- | //Get initial image
| |
- | if($(kids[vars.currentSlide]).is('img')){
| |
- | vars.currentImage = $(kids[vars.currentSlide]);
| |
- | } else {
| |
- | vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
| |
- | }
| |
- |
| |
- | //Show initial link
| |
- | if($(kids[vars.currentSlide]).is('a')){
| |
- | $(kids[vars.currentSlide]).css('display','block');
| |
- | }
| |
- |
| |
- | //Set first background
| |
- | slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
| |
- |
| |
- | //Add initial slices
| |
- | for(var i = 0; i < settings.slices; i++){
| |
- | var sliceWidth = Math.round(slider.width()/settings.slices);
| |
- | if(i == settings.slices-1){
| |
- | slider.append(
| |
- | $('<div class="nivo-slice"></div>').css({ left:(sliceWidth*i)+'px', width:(slider.width()-(sliceWidth*i))+'px' })
| |
- | );
| |
- | } else {
| |
- | slider.append(
| |
- | $('<div class="nivo-slice"></div>').css({ left:(sliceWidth*i)+'px', width:sliceWidth+'px' })
| |
- | );
| |
- | }
| |
- | }
| |
- |
| |
- | //Create caption
| |
- | slider.append(
| |
- | $('<div class="nivo-caption"><p></p></div>').css({ display:'none', opacity:settings.captionOpacity })
| |
- | );
| |
- | //Process initial caption
| |
- | if(vars.currentImage.attr('title') != ''){
| |
- | var title = vars.currentImage.attr('title');
| |
- | if(title.substr(0,1) == '#') title = $(title).html();
| |
- | $('.nivo-caption p', slider).html(title);
| |
- |
| |
- | /*Using Cufon in title*/
| |
- | Cufon.replace('.nivo-caption p > h1,.nivo-caption p > h2,.nivo-caption p > h3,.nivo-caption p > h4,.nivo-caption p > h5,.nivo-caption p > h6');
| |
- |
| |
- | $('.nivo-caption', slider).fadeIn(settings.animSpeed);
| |
- | }
| |
- |
| |
- | //In the words of Super Mario "let's a go!"
| |
- | var timer = 0;
| |
- | if(!settings.manualAdvance && kids.length > 1){
| |
- | timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
| |
- | }
| |
- |
| |
- | //Add Direction nav
| |
- | if(settings.directionNav){
| |
- | slider.append('<div class="nivo-directionNav"><a class="nivo-prevNav">Prev</a><a class="nivo-nextNav">Next</a></div>');
| |
- |
| |
- | //Hide Direction nav
| |
- | if(settings.directionNavHide){
| |
- | $('.nivo-directionNav', slider).hide();
| |
- | slider.hover(function(){
| |
- | $('.nivo-directionNav', slider).show();
| |
- | }, function(){
| |
- | $('.nivo-directionNav', slider).hide();
| |
- | });
| |
- | }
| |
- |
| |
- | $('a.nivo-prevNav', slider).live('click', function(){
| |
- | if(vars.running) return false;
| |
- | clearInterval(timer);
| |
- | timer = '';
| |
- | vars.currentSlide-=2;
| |
- | nivoRun(slider, kids, settings, 'prev');
| |
- | });
| |
- |
| |
- | $('a.nivo-nextNav', slider).live('click', function(){
| |
- | if(vars.running) return false;
| |
- | clearInterval(timer);
| |
- | timer = '';
| |
- | nivoRun(slider, kids, settings, 'next');
| |
- | });
| |
- | }
| |
- |
| |
- | //Add Control nav
| |
- | if(settings.controlNav){
| |
- | var nivoControl = $('<div class="nivo-controlNav"></div>');
| |
- | slider.append(nivoControl);
| |
- | for(var i = 0; i < kids.length; i++){
| |
- | if(settings.controlNavThumbs){
| |
- | var child = kids.eq(i);
| |
- | if(!child.is('img')){
| |
- | child = child.find('img:first');
| |
- | }
| |
- | if (settings.controlNavThumbsFromRel) {
| |
- | nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('rel') + '" alt="" /></a>');
| |
- | } else {
| |
- | nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('src').replace(settings.controlNavThumbsSearch, settings.controlNavThumbsReplace) +'" alt="" /></a>');
| |
- | }
| |
- | } else {
| |
- | nivoControl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');
| |
- | }
| |
- |
| |
- | }
| |
- | //Set initial active link
| |
- | $('.nivo-controlNav a:eq('+ vars.currentSlide +')', slider).addClass('active');
| |
- |
| |
- | $('.nivo-controlNav a', slider).live('click', function(){
| |
- | if(vars.running) return false;
| |
- | if($(this).hasClass('active')) return false;
| |
- | clearInterval(timer);
| |
- | timer = '';
| |
- | slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
| |
- | vars.currentSlide = $(this).attr('rel') - 1;
| |
- | nivoRun(slider, kids, settings, 'control');
| |
- | });
| |
- | }
| |
- |
| |
- | //Keyboard Navigation
| |
- | if(settings.keyboardNav){
| |
- | $(window).keypress(function(event){
| |
- | //Left
| |
- | if(event.keyCode == '37'){
| |
- | if(vars.running) return false;
| |
- | clearInterval(timer);
| |
- | timer = '';
| |
- | vars.currentSlide-=2;
| |
- | nivoRun(slider, kids, settings, 'prev');
| |
- | }
| |
- | //Right
| |
- | if(event.keyCode == '39'){
| |
- | if(vars.running) return false;
| |
- | clearInterval(timer);
| |
- | timer = '';
| |
- | nivoRun(slider, kids, settings, 'next');
| |
- | }
| |
- | });
| |
- | }
| |
- |
| |
- | //For pauseOnHover setting
| |
- | if(settings.pauseOnHover){
| |
- | slider.hover(function(){
| |
- | vars.paused = true;
| |
- | clearInterval(timer);
| |
- | timer = '';
| |
- | }, function(){
| |
- | vars.paused = false;
| |
- | //Restart the timer
| |
- | if(timer == '' && !settings.manualAdvance){
| |
- | timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
| |
- | }
| |
- | });
| |
- | }
| |
- |
| |
- | //Event when Animation finishes
| |
- | slider.bind('nivo:animFinished', function(){
| |
- | vars.running = false;
| |
- | //Hide child links
| |
- | $(kids).each(function(){
| |
- | if($(this).is('a')){
| |
- | $(this).css('display','none');
| |
- | }
| |
- | });
| |
- | //Show current link
| |
- | if($(kids[vars.currentSlide]).is('a')){
| |
- | $(kids[vars.currentSlide]).css('display','block');
| |
- | }
| |
- | //Restart the timer
| |
- | if(timer == '' && !vars.paused && !settings.manualAdvance){
| |
- | timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
| |
- | }
| |
- | //Trigger the afterChange callback
| |
- | settings.afterChange.call(this);
| |
- | });
| |
- |
| |
- | // Private run method
| |
- | var nivoRun = function(slider, kids, settings, nudge){
| |
- | //Get our vars
| |
- | var vars = slider.data('nivo:vars');
| |
- |
| |
- | //Trigger the lastSlide callback
| |
- | if(vars && (vars.currentSlide == vars.totalSlides - 1)){
| |
- | settings.lastSlide.call(this);
| |
- | }
| |
- |
| |
- | // Stop
| |
- | if((!vars || vars.stop) && !nudge) return false;
| |
- |
| |
- | //Trigger the beforeChange callback
| |
- | settings.beforeChange.call(this);
| |
- |
| |
- | //Set current background before change
| |
- | if(!nudge){
| |
- | slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
| |
- | } else {
| |
- | if(nudge == 'prev'){
| |
- | slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
| |
- | }
| |
- | if(nudge == 'next'){
| |
- | slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
| |
- | }
| |
- | }
| |
- | vars.currentSlide++;
| |
- | //Trigger the slideshowEnd callback
| |
- | if(vars.currentSlide == vars.totalSlides){
| |
- | vars.currentSlide = 0;
| |
- | settings.slideshowEnd.call(this);
| |
- | }
| |
- | if(vars.currentSlide < 0) vars.currentSlide = (vars.totalSlides - 1);
| |
- | //Set vars.currentImage
| |
- | if($(kids[vars.currentSlide]).is('img')){
| |
- | vars.currentImage = $(kids[vars.currentSlide]);
| |
- | } else {
| |
- | vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
| |
- | }
| |
- |
| |
- | //Set acitve links
| |
- | if(settings.controlNav){
| |
- | $('.nivo-controlNav a', slider).removeClass('active');
| |
- | $('.nivo-controlNav a:eq('+ vars.currentSlide +')', slider).addClass('active');
| |
- | }
| |
- |
| |
- | //Process caption
| |
- | if(vars.currentImage.attr('title') != ''){
| |
- | var title = vars.currentImage.attr('title');
| |
- | if(title.substr(0,1) == '#') title = $(title).html();
| |
- |
| |
- | if($('.nivo-caption', slider).css('display') == 'block'){
| |
- | $('.nivo-caption p', slider).fadeOut(settings.animSpeed, function(){
| |
- | $(this).html(title);
| |
- | /*Using Cufon in title*/
| |
- | Cufon.replace('.nivo-caption p > h1,.nivo-caption p > h2,.nivo-caption p > h3,.nivo-caption p > h4,.nivo-caption p > h5,.nivo-caption p > h6');
| |
- | $(this).fadeIn(settings.animSpeed);
| |
- | });
| |
- | } else {
| |
- | $('.nivo-caption p', slider).html(title);
| |
- | /*Using Cufon in title*/
| |
- | Cufon.replace('.nivo-caption p > h1,.nivo-caption p > h2,.nivo-caption p > h3,.nivo-caption p > h4,.nivo-caption p > h5,.nivo-caption p > h6');
| |
- | }
| |
- | $('.nivo-caption', slider).fadeIn(settings.animSpeed);
| |
- | } else {
| |
- | $('.nivo-caption', slider).fadeOut(settings.animSpeed);
| |
- | }
| |
- |
| |
- | //Set new slice backgrounds
| |
- | var i = 0;
| |
- | $('.nivo-slice', slider).each(function(){
| |
- | var sliceWidth = Math.round(slider.width()/settings.slices);
| |
- | $(this).css({ height:'0px', opacity:'0',
| |
- | background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%' });
| |
- | i++;
| |
- | });
| |
- |
| |
- | if(settings.effect == 'random'){
| |
- | var anims = new Array("sliceDownRight","sliceDownLeft","sliceUpRight","sliceUpLeft","sliceUpDown","sliceUpDownLeft","fold","fade");
| |
- | vars.randAnim = anims[Math.floor(Math.random()*(anims.length + 1))];
| |
- | if(vars.randAnim == undefined) vars.randAnim = 'fade';
| |
- | }
| |
- |
| |
- | //Run random effect from specified set (eg: effect:'fold,fade')
| |
- | if(settings.effect.indexOf(',') != -1){
| |
- | var anims = settings.effect.split(',');
| |
- | vars.randAnim = $.trim(anims[Math.floor(Math.random()*anims.length)]);
| |
- | }
| |
- |
| |
- | //Run effects
| |
- | vars.running = true;
| |
- | if(settings.effect == 'sliceDown' || settings.effect == 'sliceDownRight' || vars.randAnim == 'sliceDownRight' ||
| |
- | settings.effect == 'sliceDownLeft' || vars.randAnim == 'sliceDownLeft'){
| |
- | var timeBuff = 0;
| |
- | var i = 0;
| |
- | var slices = $('.nivo-slice', slider);
| |
- | if(settings.effect == 'sliceDownLeft' || vars.randAnim == 'sliceDownLeft') slices = $('.nivo-slice', slider)._reverse();
| |
- | slices.each(function(){
| |
- | var slice = $(this);
| |
- | slice.css('top','0px');
| |
- | if(i == settings.slices-1){
| |
- | setTimeout(function(){
| |
- | slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
| |
- | }, (100 + timeBuff));
| |
- | } else {
| |
- | setTimeout(function(){
| |
- | slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed);
| |
- | }, (100 + timeBuff));
| |
- | }
| |
- | timeBuff += 50;
| |
- | i++;
| |
- | });
| |
- | }
| |
- | else if(settings.effect == 'sliceUp' || settings.effect == 'sliceUpRight' || vars.randAnim == 'sliceUpRight' ||
| |
- | settings.effect == 'sliceUpLeft' || vars.randAnim == 'sliceUpLeft'){
| |
- | var timeBuff = 0;
| |
- | var i = 0;
| |
- | var slices = $('.nivo-slice', slider);
| |
- | if(settings.effect == 'sliceUpLeft' || vars.randAnim == 'sliceUpLeft') slices = $('.nivo-slice', slider)._reverse();
| |
- | slices.each(function(){
| |
- | var slice = $(this);
| |
- | slice.css('bottom','0px');
| |
- | if(i == settings.slices-1){
| |
- | setTimeout(function(){
| |
- | slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
| |
- | }, (100 + timeBuff));
| |
- | } else {
| |
- | setTimeout(function(){
| |
- | slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed);
| |
- | }, (100 + timeBuff));
| |
- | }
| |
- | timeBuff += 50;
| |
- | i++;
| |
- | });
| |
- | }
| |
- | else if(settings.effect == 'sliceUpDown' || settings.effect == 'sliceUpDownRight' || vars.randAnim == 'sliceUpDown' ||
| |
- | settings.effect == 'sliceUpDownLeft' || vars.randAnim == 'sliceUpDownLeft'){
| |
- | var timeBuff = 0;
| |
- | var i = 0;
| |
- | var v = 0;
| |
- | var slices = $('.nivo-slice', slider);
| |
- | if(settings.effect == 'sliceUpDownLeft' || vars.randAnim == 'sliceUpDownLeft') slices = $('.nivo-slice', slider)._reverse();
| |
- | slices.each(function(){
| |
- | var slice = $(this);
| |
- | if(i == 0){
| |
- | slice.css('top','0px');
| |
- | i++;
| |
- | } else {
| |
- | slice.css('bottom','0px');
| |
- | i = 0;
| |
- | }
| |
- |
| |
- | if(v == settings.slices-1){
| |
- | setTimeout(function(){
| |
- | slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
| |
- | }, (100 + timeBuff));
| |
- | } else {
| |
- | setTimeout(function(){
| |
- | slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed);
| |
- | }, (100 + timeBuff));
| |
- | }
| |
- | timeBuff += 50;
| |
- | v++;
| |
- | });
| |
- | }
| |
- | else if(settings.effect == 'fold' || vars.randAnim == 'fold'){
| |
- | var timeBuff = 0;
| |
- | var i = 0;
| |
- | $('.nivo-slice', slider).each(function(){
| |
- | var slice = $(this);
| |
- | var origWidth = slice.width();
| |
- | slice.css({ top:'0px', height:'100%', width:'0px' });
| |
- | if(i == settings.slices-1){
| |
- | setTimeout(function(){
| |
- | slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
| |
- | }, (100 + timeBuff));
| |
- | } else {
| |
- | setTimeout(function(){
| |
- | slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed);
| |
- | }, (100 + timeBuff));
| |
- | }
| |
- | timeBuff += 50;
| |
- | i++;
| |
- | });
| |
- | }
| |
- | else if(settings.effect == 'fade' || vars.randAnim == 'fade'){
| |
- | var i = 0;
| |
- | $('.nivo-slice', slider).each(function(){
| |
- | $(this).css('height','100%');
| |
- | if(i == settings.slices-1){
| |
- | $(this).animate({ opacity:'1.0' }, (settings.animSpeed*2), '', function(){ slider.trigger('nivo:animFinished'); });
| |
- | } else {
| |
- | $(this).animate({ opacity:'1.0' }, (settings.animSpeed*2));
| |
- | }
| |
- | i++;
| |
- | });
| |
- | }
| |
- | }
| |
- |
| |
- | // For debugging
| |
- | var trace = function(msg){
| |
- | if (this.console && typeof console.log != "undefined")
| |
- | console.log(msg);
| |
- | }
| |
- |
| |
- | // Start / Stop
| |
- | this.stop = function(){
| |
- | if(!$(element).data('nivo:vars').stop){
| |
- | $(element).data('nivo:vars').stop = true;
| |
- | trace('Stop Slider');
| |
- | }
| |
- | }
| |
- |
| |
- | this.start = function(){
| |
- | if($(element).data('nivo:vars').stop){
| |
- | $(element).data('nivo:vars').stop = false;
| |
- | trace('Start Slider');
| |
- | }
| |
- | }
| |
- |
| |
- | //Trigger the afterLoad callback
| |
- | settings.afterLoad.call(this);
| |
- | };
| |
- |
| |
- | $.fn.nivoSlider = function(options) {
| |
- |
| |
- | return this.each(function(){
| |
- | var element = $(this);
| |
- | // Return early if this element already has a plugin instance
| |
- | if (element.data('nivoslider')) return;
| |
- | // Pass options to plugin constructor
| |
- | var nivoslider = new NivoSlider(this, options);
| |
- | // Store plugin object in this element's data
| |
- | element.data('nivoslider', nivoslider);
| |
- | });
| |
- |
| |
- | };
| |
- |
| |
- | //Default settings
| |
- | $.fn.nivoSlider.defaults = {
| |
- | effect:'random',
| |
- | slices:15,
| |
- | animSpeed:500,
| |
- | pauseTime:3000,
| |
- | startSlide:0,
| |
- | directionNav:true,
| |
- | directionNavHide:true,
| |
- | controlNav:true,
| |
- | controlNavThumbs:false,
| |
- | controlNavThumbsFromRel:false,
| |
- | controlNavThumbsSearch:'.jpg',
| |
- | controlNavThumbsReplace:'_thumb.jpg',
| |
- | keyboardNav:true,
| |
- | pauseOnHover:true,
| |
- | manualAdvance:false,
| |
- | captionOpacity:0.8,
| |
- | beforeChange: function(){},
| |
- | afterChange: function(){},
| |
- | slideshowEnd: function(){},
| |
- | lastSlide: function(){},
| |
- | afterLoad: function(){}
| |
- | };
| |
- |
| |
- | $.fn._reverse = [].reverse;
| |
- |
| |
- | })(jQuery);
| |
- | </script>
| |
| | | |
| | | |
| <script> | | <script> |
- |
| + | jQuery(window).load(function() { |
- | jQuery(window).load(function() {
| + | |
| setTimeout(function(){ | | setTimeout(function(){ |
| jQuery('#slider').nivoSlider({ | | jQuery('#slider').nivoSlider({ |