Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,458
There are 91 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     Programming     Javascript :

Bahhhhh Javascript Slideshow Help

Thread title: Bahhhhh Javascript Slideshow Help
Reply    
    Thread tools Search this thread Display Modes  
09-14-2011, 06:11 PM
 #1
Geeko is offline Geeko
Status: Member
Join date: Sep 2007
Location: Denver, USA
Expertise: Design, Programming
Software: Photoshop, Notepad++
 
Posts: 313
iTrader: 8 / 100%
 

Geeko is on a distinguished road

Send a message via MSN to Geeko

  Old  Bahhhhh Javascript Slideshow Help

I've purchased the Artboard theme from Themeforest.net and it comes with a slideshow plugin but the slideshow only swaps image if you click the next/previous icons. I'm going crazy trying to figure out how to automate the slideshow. Heres the code...

Example seen at TAUCreative.com/mpc

HTML Code:
<script type="text/javascript">
//config
//set default images view mode
$defaultViewMode="<?php if (get_option_tree('artboard_default_size')) : ?><?php echo get_option_tree('artboard_default_size'); ?><?php else : echo "full"; endif; ?>"; //full, normal, original

$tsMargin=30; //first and last thumbnail margin (for better cursor interaction) 

$scrollEasing=<?php if (get_option_tree('scroll_easing')) : ?><?php echo get_option_tree('scroll_easing'); ?><?php else : echo "500"; endif; ?>; //scroll easing amount (0 for no easing) 

$scrollEasingType="easeOutCirc"; //scroll easing type 

$thumbnailsContainerOpacity=<?php if (get_option_tree('thumbnail_bg_opacity')) : ?><?php echo get_option_tree('thumbnail_bg_opacity'); ?><?php else : echo "0.8"; endif; ?>; //thumbnails area default opacity

$thumbnailsContainerMouseOutOpacity=<?php if (get_option_tree('thumbnail_mouseout_opacity')) : ?><?php echo get_option_tree('thumbnail_mouseout_opacity'); ?><?php else : echo "0"; endif; ?>; //thumbnails area opacity on mouse out

$thumbnailsOpacity=<?php if (get_option_tree('thumbnail_opacity')) : ?><?php echo get_option_tree('thumbnail_opacity'); ?><?php else : echo "0.6"; endif; ?>; //thumbnails default opacity

$nextPrevBtnsInitState="<?php if (get_option_tree('button_state')) : ?><?php echo get_option_tree('button_state'); ?><?php else : echo "show"; endif; ?>"; //next/previous image buttons initial state ("hide" or "show")
$keyboardNavigation="on"; //enable/disable keyboard navigation ("on" or "off")


//cache vars
$thumbnails_wrapper=$("#thumbnails_wrapper");
$outer_container=$("#outer_container");
$thumbScroller=$(".thumbScroller");
$thumbScroller_container=$(".thumbScroller .container");
$thumbScroller_content=$(".thumbScroller .slide");
$thumbScroller_thumb=$(".thumbScroller .thumb");
$preloader=$("#preloader");
$toolbar=$("#toolbar");
$toolbar_a=$("#toolbar a");
$bgimg=$("#bgimg");
$img_title=$("#img_title");
$nextImageBtn=$(".nextImageBtn");
$prevImageBtn=$(".prevImageBtn");

$(window).load(function() {
	$toolbar.data("imageViewMode",$defaultViewMode); //default view mode
	if($defaultViewMode=="full"){
		$toolbar_a.html("<img src='<?php bloginfo('template_directory'); ?>/assets/img/fullscreen/scaler_in.png'  />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restore");
	} else {
		$toolbar_a.html("<img src='<?php bloginfo('template_directory'); ?>/assets/img/fullscreen/scaler_out.png'   />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximize");
	}
	ShowHideNextPrev($nextPrevBtnsInitState);
	
	//thumbnail scroller
	$thumbScroller_container.css("marginLeft",$tsMargin+"px"); //add margin
	sliderLeft=$thumbScroller_container.position().left;
	sliderWidth=$outer_container.width();
	$thumbScroller.css("width",sliderWidth);
	var totalContent=0;
	fadeSpeed=200;
	
	var $the_outer_container=document.getElementById("outer_container");
	var $placement=findPos($the_outer_container);
	
	$thumbScroller_content.each(function () {
		var $this=$(this);
		totalContent+=$this.innerWidth();
		$thumbScroller_container.css("width",totalContent);
		$this.children().children().children(".thumb").fadeTo(fadeSpeed, $thumbnailsOpacity);
	});

	$thumbScroller.mousemove(function(e){
		if($thumbScroller_container.width()>sliderWidth){
	  		var mouseCoords=(e.pageX - $placement[1]);
	  		var mousePercentX=mouseCoords/sliderWidth;
	  		var destX=-((((totalContent+($tsMargin*2))-(sliderWidth))-sliderWidth)*(mousePercentX));
	  		var thePosA=mouseCoords-destX;
	  		var thePosB=destX-mouseCoords;
	  		if(mouseCoords>destX){
		  		$thumbScroller_container.stop().animate({left: -thePosA}, $scrollEasing,$scrollEasingType); //with easing
	  		} else if(mouseCoords<destX){
		  		$thumbScroller_container.stop().animate({left: thePosB}, $scrollEasing,$scrollEasingType); //with easing
	  		} else {
				$thumbScroller_container.stop();  
	  		}
		}
	});

	
	$thumbnails_wrapper.hover(
		function(){ //mouse over
			var $this=$(this);
			$this.stop().fadeTo("slow", 1);
		},
		function(){ //mouse out
			var $this=$(this);
			$this.stop().fadeTo("slow", $thumbnailsContainerMouseOutOpacity);
		}
	);

	$thumbScroller_thumb.hover(
		function(){ //mouse over
			var $this=$(this);
			$this.stop().fadeTo(fadeSpeed, 1);
		},
		function(){ //mouse out
			var $this=$(this);
			$this.stop().fadeTo(fadeSpeed, $thumbnailsOpacity);
		}
	);

	//on window resize scale image and reset thumbnail scroller
	$(window).resize(function() {
		FullScreenBackground("#bgimg",$bgimg.data("newImageW"),$bgimg.data("newImageH"));
		$thumbScroller_container.stop().animate({left: sliderLeft}, 400,"easeOutCirc"); 
		var newWidth=$outer_container.width();
		$thumbScroller.css("width",newWidth);
		sliderWidth=newWidth;
		$placement=findPos($the_outer_container);
	});

	//load 1st image
	var the1stImg = new Image();
	the1stImg.onload = CreateDelegate(the1stImg, theNewImg_onload);
	the1stImg.src = $bgimg.attr("src");
	$outer_container.data("nextImage",$(".slide").first().next().find("a").attr("href"));
	$outer_container.data("prevImage",$(".slide").last().find("a").attr("href"));
});


function BackgroundLoad($this,imageWidth,imageHeight,imgSrc){
	$this.fadeOut("fast",function(){
		$this.attr("src", "").attr("src", imgSrc); //change image source
		FullScreenBackground($this,imageWidth,imageHeight); //scale background image
		$preloader.fadeOut("fast",function(){$this.delay(100).fadeIn("slow");});
		var imageTitle=$img_title.data("imageTitle");
		if(imageTitle){
			$this.attr("alt", imageTitle).attr("title", imageTitle);
			$img_title.fadeOut("fast",function(){
				$img_title.html(imageTitle).fadeIn();	
				Cufon.refresh('#img_title');			
			});
		} else {
			$img_title.fadeOut("fast",function(){
				$img_title.html($this.attr("title")).fadeIn();
				Cufon.replace('#img_title');
			});
		}
	});
}


//mouseover toolbar
if($toolbar.css("display")!="none"){
	$toolbar.fadeTo("fast", 0.3);
}
$toolbar.hover(
	function(){ //mouse over
		var $this=$(this);
		$this.stop().fadeTo("fast", 1);
	},
	function(){ //mouse out
		var $this=$(this);
		$this.stop().fadeTo("fast", 0);
	}
);

//mouseover previous button
if($prevImageBtn.css("display")!="none"){
	$prevImageBtn.fadeTo("fast", 0.3);
}
$prevImageBtn.hover(
	function(){ //mouse over
		var $this=$(this);
		$this.stop().fadeTo("fast", 1);
	},
	function(){ //mouse out
		var $this=$(this);
		$this.stop().fadeTo("fast", 0.3);
	}
);
	
    
    
//mouseover next button
if($nextImageBtn.css("display")!="none"){
	$nextImageBtn.fadeTo("fast", 0.3);
}
$nextImageBtn.hover(
	function(){ //mouse over
		var $this=$(this);
		$this.stop().fadeTo("fast", 1);
	},
	function(){ //mouse out
		var $this=$(this);
		$this.stop().fadeTo("fast", 0.3);
	}
);

//mouseover the slider, the prev/next buttons slide in
$("#thumbnails_wrapper").stop().delay(2000).fadeTo("fast", 0);
$(".prevImageBtn").stop().delay(2000).animate({marginLeft: '-100px'}, 400).fadeTo("fast", 0.3);
$(".nextImageBtn").stop().delay(2000).animate({marginRight: '-100px'}, 400).fadeTo("fast", 0.3);


//mouseout, the GUI elements hide themselves... sliiiick!
$("#bg").hover(
		function() {
		$(".prevImageBtn").stop().animate({marginLeft: '0px'}, 200);
		$(".nextImageBtn").stop().animate({marginRight: '0px'}, 200);

	} , function() {
		$(".prevImageBtn").stop().delay(2000).animate({marginLeft: '-100px'}, 400);
		$(".nextImageBtn").stop().delay(2000).animate({marginRight: '-100px'}, 400);
});


//detect iPhone/iPad/Android and make the next/Prev buttons a bit more obvious
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
	
$(".prevImageBtn").stop().delay(2000).animate({marginLeft: '0px'}, 400).fadeTo("fast", 1);
$(".nextImageBtn").stop().delay(2000).animate({marginRight: '0px'}, 400).fadeTo("fast", 1);
	
}

var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {

$(".prevImageBtn").stop().delay(2000).animate({marginLeft: '0px'}, 400).fadeTo("fast", 1);
$(".nextImageBtn").stop().delay(2000).animate({marginRight: '0px'}, 400).fadeTo("fast", 1);

}

window.scrollTo(0, 1); 




//Clicking on thumbnail changes the background image
$("#outer_container a.bglink").click(function(event){
	event.preventDefault();
	var $this=$(this);
	GetNextPrevImages($this);
	GetImageTitle($this);
	SwitchImage(this);
	ShowHideNextPrev("show");
}); 

//next/prev images buttons
 $nextImageBtn.click(function(event){
	event.preventDefault();
	SwitchImage($outer_container.data("nextImage"));
	var $this=$("#outer_container a.bglink[href='"+$outer_container.data("nextImage")+"']");
	GetNextPrevImages($this);
	GetImageTitle($this);
});

$prevImageBtn.click(function(event){
	event.preventDefault();
	SwitchImage($outer_container.data("prevImage"));
	var $this=$("#outer_container a.bglink[href='"+$outer_container.data("prevImage")+"']");
	GetNextPrevImages($this);
	GetImageTitle($this);
});


//next/prev images keyboard arrows
if($keyboardNavigation=="on"){
$(document).keydown(function(ev) {
    if(ev.keyCode == 39) { //right arrow
        SwitchImage($outer_container.data("nextImage"));
		var $this=$("#outer_container a.bglink[href='"+$outer_container.data("nextImage")+"']");
		GetNextPrevImages($this);
		GetImageTitle($this);
        return false; // don't execute the default action (scrolling or whatever)
    } else if(ev.keyCode == 37) { //left arrow
        SwitchImage($outer_container.data("prevImage"));
		var $this=$("#outer_container a.bglink[href='"+$outer_container.data("prevImage")+"']");
		GetNextPrevImages($this);
		GetImageTitle($this);
        return false; // don't execute the default action (scrolling or whatever)
    }
});
}

function ShowHideNextPrev(state){
	if(state=="hide"){
		$nextImageBtn.fadeOut();
		$prevImageBtn.fadeOut();
	} else {
		$nextImageBtn.fadeIn();
		$prevImageBtn.fadeIn();
	}
}

//get image title
function GetImageTitle(elem){
	var title_attr=elem.children("img").attr("title"); //get image title attribute
	$img_title.data("imageTitle", title_attr); //store image title
}

//get next/prev images
function GetNextPrevImages(curr){
	var nextImage=curr.parents(".slide").next().find("a.bglink").attr("href");
	if(nextImage==null){ //if last image, next is first
		var nextImage=$(".slide").first().find("a.bglink").attr("href");
	}
	$outer_container.data("nextImage",nextImage);
	var prevImage=curr.parents(".slide").prev().find("a.bglink").attr("href");
	if(prevImage==null){ //if first image, previous is last
		var prevImage=$(".slide").last().find("a.bglink").attr("href");
	}
	$outer_container.data("prevImage",prevImage);
}

//switch image
function SwitchImage(img){
	$preloader.delay(100).fadeIn("fast"); //show preloader
	var theNewImg = new Image();
	theNewImg.onload = CreateDelegate(theNewImg, theNewImg_onload);
	theNewImg.src = img;
}

//get new image dimensions
function CreateDelegate(contextObject, delegateMethod){
	return function(){
		return delegateMethod.apply(contextObject, arguments);
	}
}

//new image on load
function theNewImg_onload(){
	$bgimg.data("newImageW",this.width).data("newImageH",this.height);
	BackgroundLoad($bgimg,this.width,this.height,this.src);
}

//Image scale function
function FullScreenBackground(theItem,imageWidth,imageHeight){
	var winWidth=$(window).width();
	var winHeight=$(window).height() -95;
	if($toolbar.data("imageViewMode")!="original"){ //scale
		var picHeight = imageHeight / imageWidth;
		var picWidth = imageWidth / imageHeight;
		if($toolbar.data("imageViewMode")=="full"){ //fullscreen size image mode
			if ((winHeight / winWidth) < picHeight) {
				$(theItem).attr("width",winWidth);
				$(theItem).attr("margin-top","65px");
				$(theItem).attr("height",picHeight*winWidth);
			} else {
				$(theItem).attr("height",winHeight);
				$(theItem).attr("margin-top","65px");
				$(theItem).attr("width",picWidth*winHeight);
			};
		} else { //normal size image mode
			if ((winHeight / winWidth) > picHeight) {
				$(theItem).attr("width",winWidth);
				$(theItem).attr("height",picHeight*winWidth);
			} else {
				$(theItem).attr("height",winHeight);
				$(theItem).attr("width",picWidth*winHeight);
			};
		}
		$(theItem).css("margin-left",(winWidth-$(theItem).width())/2);
		$(theItem).css("margin-top",(winHeight-$(theItem).height())/2);
	} else { //no scale
		$(theItem).attr("width",imageWidth);
		$(theItem).attr("height",imageHeight);
		$(theItem).css("margin-left",(winWidth-imageWidth)/2);
		$(theItem).css("margin-top","65px");
	}
}

//Image view mode function - fullscreen or normal size




//function to find element Position
	function findPos(obj) {
		var curleft = curtop = 0;
		if (obj.offsetParent) {
			curleft = obj.offsetLeft
			curtop = obj.offsetTop
			while (obj = obj.offsetParent) {
				curleft += obj.offsetLeft
				curtop += obj.offsetTop
			}
		}
		return [curtop, curleft];
	}
</script>
09-18-2011, 03:53 PM
 #2
ronaldroe is offline ronaldroe
Status: I'm new around here
Join date: Aug 2011
Location: Oklahoma City
Expertise: Design, HTML/CSS
Software: Webmatrix, Photoshop
 
Posts: 9
iTrader: 0 / 0%
 

ronaldroe is on a distinguished road

  Old

The easiest way to go would be to replace it with Nivo Slider.
09-18-2011, 06:06 PM
 #3
Village Genius is offline Village Genius
Village Genius's Avatar
Status: Geek
Join date: Apr 2006
Location: Denver, CO
Expertise: Software
Software: Chrome, Notepad++
 
Posts: 6,894
iTrader: 18 / 100%
 

Village Genius will become famous soon enough

  Old

There's no way anyone is going to debug a script that large for you. Just use a jQuery slideshow script, that stuff usually works great.
Reply With Quote
Reply    

« Previous Thread | Next Thread »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes
Linear Mode Linear Mode

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed  

Home   |     |   News   |   Rules   |   FAQ   |  


Powered by HandsOnWebHosting.com

The time is now 01:50 PM (GMT).


Powered by: vBulletin Version 3.8.4 Copyright ©2000 - 2023, Jelsoft Enterprises Ltd.