JavaScript - Slideshow Help: Adding Hover Caption And Button Control

Hey guys. I am using a javascript slideshow called fadeshow. (Main code below).

I am wondering if there is a way to have thumbnail support, so I could allow the users to click on a thumbnail and have fadeshow go to that photo in the array. I have gotten a next / previous button working but also would like to add thumbnails.

How would I write an a href link to specify an image in the array? Can this be done?

Code:

<script type="text/javascript">
var mygallery2=new fadeSlideShow({
  wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
  dimensions: [1000, 665], //width/height of gallery in pixels. Should reflect dimensions of largest image
  imagearray: [
  ["images/1m.jpg"],
  ["images/2m.jpg"],
  ["images/3m.jpg"]
  ],
  displaymode: {type:'manual', pause:2500, cycles:0, wraparound:true},
  persist: false, //remember last viewed slide and recall within same session?
  fadeduration: 500, //transition duration (milliseconds)
  descreveal: "always",
  togglerid: "fadeshow2toggler"
})
</script>

<div id="fadeshow2toggler">

<a href="#" class="next"><div id="fadeshow2"></div></a><!--allows clicking the photo for next-->

<a href="#" class="prev">Previous</a>  <a href="#" class="next">Next Image</a> (&nbsp;<span class="status"></span>&nbsp;)</span>

</div><!--end fadeshow2toggler-->

<!--thumbnails i would like to work-->
<a href= # ><img src="images/thumbnail1.jpg"></a>
<a href= # ><img src="images/thumbnail2.jpg"></a>
<a href= # ><img src="images/thumbnail3.jpg"></a>

Any advice appreciated!

Hello all! This is my first time in the forum and I have been reading for a while. The information in here appears to be very accurate and useful. I am new to JavaScript. I have been programming sites for a while but have been using Flash for most of my animation and never really got into the ActionScript. Thanks to Apple... I can no longer use that crutch. So as I post in this forum please understand 2 things: 1 I am a beginner in JavaScript and 2. I want to learn not just copy, paste and move on!

Here is my issue: I have made a VERY SIMPLE slide show and it works perfectly. However, Now I want to add a fade in and out effect to the code. I have seen this done with the CSS opacity(alpha) and that seems to be the simplist way. However, I am having trouble fitting this into my code. Any direction in this matter would be great! Thanks so much!

Code:

	
var step=1
function switchImg()
{
if (!document.images)
return						
document.images.slide.src=eval("image"+step+".src")
if (step<9)
step++
else
step=1
setTimeout("switchImg()",3500)
}
switchImg()

Hey guys. This is vague because I dont know what exactly to tell you but please reply with me so I can fix this.

I want to add something to my forum. Specifically, I want to add a HTML and Picture button for when you go to reply. Like posting an article here, there are also these options (font, alignment, insert image)

I do not know how to achieve this but shouldnt be too hard.

Here are the two sources you will need to look through to help me fix the forum.

http://neoweather.com/FWFORUM.JS
http://static.websimages.com/JS/fw.js

THANKS

Hey guys.

I want to add something to my forum. Specifically, I want to add a HTML and Picture button for when you go to reply. Like posting an article here, there are also these options (font, alignment, insert image)

I do not know how to achieve this but shouldnt be too hard.

Here are the two sources you will need to look through to help me fix the forum.

http://neoweather.com/FWFORUM.JS
http://static.websimages.com/JS/fw.js

THANKS

Hello - I'm trying to add a fade effect between slideshow transitions. The script I'm building from is the Rich HTML Slideshow script which appears below.

The slides that rotate are wrapped in <div> tags with a class of "dyncontent" and I've managed to make the slideshow transition just fine, but not with any kind of fade effect. It just "snaps" from one slide to the next. Is this a fairly simple addition? Thanks!
<script type="text/javascript">

if (document.all || document.getElementById){ //if IE4 or NS6+
document.write('<style type="text/css">\n')
document.write('.dyncontent{display: none; width: 250px; height: 60px;}\n')
document.write('</style>')
}

var curcontentindex=0
var messages=new Array()

function getElementByClass(classname){
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
messages[inc++]=alltags[i]
}
}

function rotatecontent(){
//get current message index (to show it):
curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0
//get previous message index (to hide it):
prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1
messages[prevcontentindex].style.display="none" //hide previous message
messages[curcontentindex].style.display="block" //show current message
}


window.onload=function(){
if (document.all || document.getElementById){
getElementByClass("dyncontent")
setInterval("rotatecontent()", 2000)
}
}

</script>

Hello coding world,

After hours of searching the net I found this awesome slideshow. Check it out:

http://tympanus.net/codrops/2011/01/...comment-409563

I really do like this slideshow but I am having problems adding a caption to each image. I am hoping to have the caption located under the image and slide in with each image.

Can anyone help me out? Please.

Thanks in advance.
Best regards,
Alan

PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="images/slideshow/image001.jpg"
var image2=new Image()
image2.src="images/slideshow/image002.jpg"
var image3=new Image()
image3.src="images/slideshow/image003.jpg"
var image4=new Image()
image4.src="images/slideshow/image004.jpg"
var image5=new Image()
image5.src="images/slideshow/image005.jpg"
var image6=new Image()
image6.src="images/slideshow/image006.jpg"
var image7=new Image()
image7.src="images/slideshow/image007.jpg"
var image8=new Image()
image8.src="images/slideshow/image008.jpg"
var image9=new Image()
image9.src="images/slideshow/image009.jpg"
var image10=new Image()
image10.src="images/slideshow/image010.jpg"
var image11=new Image()
image11.src="images/slideshow/image011.jpg"
var image12=new Image()
image12.src="images/slideshow/image012.jpg"
var image13=new Image()
image13.src="images/slideshow/image013.jpg"
var image14=new Image()
image14.src="images/slideshow/image014.jpg"
var image15=new Image()
image15.src="images/slideshow/image015.jpg"
var image16=new Image()
image16.src="images/slideshow/image016.jpg"
var image17=new Image()
image17.src="images/slideshow/image017.jpg"
var image18=new Image()
image18.src="images/slideshow/image018.jpg"
var image19=new Image()
image19.src="images/slideshow/image019.jpg"
var image20=new Image()
image20.src="images/slideshow/image020.jpg"
//-->
</script>
</head>

<body>
<img src="images/slideshow/image001.jpg" name="slide">

<script type="text/javascript">
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src" )
if (step<20)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>
</body>
</html> 

I'm trying to add next and previous buttons to this slideshow done in jQuery. I've gotten stuck trying to figure it out with no progress. Could anyone help me out with this? Thanks.

Here's the code:
Code:

$(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */
	
	var totWidth=0;
	var positions = new Array();
	
	$('#slides .slide').each(function(i){
		
		/* Traverse through all the slides and store their accumulative widths in totWidth */
		
		positions[i]= totWidth;
		totWidth += $(this).width();
		
		/* The positions array contains each slide's commulutative offset from the left part of the container */
		
		if(!$(this).width())
		{
			alert("Please, fill in width & height for all your images!");
			return false;
		}
		
	});
	
	$('#slides').width(totWidth);

	/* Change the cotnainer div's width to the exact width of all the slides combined */

	$('#menu ul li a').click(function(e,keepScroll){

			/* On a thumbnail click */

			$('li.menuItem').removeClass('act').addClass('inact');
			$(this).parent().addClass('act');
			
			var pos = $(this).parent().prevAll('.menuItem').length;
			
			$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
			/* Start the sliding animation */
			
			e.preventDefault();
			/* Prevent the default action of the link */
			
			
			// Stopping the auto-advance if an icon has been clicked:
			if(!keepScroll) clearInterval(itvl);
	});
	
	$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
	/* On page load, mark the first thumbnail as active */
	
	
	
	/*****
	 *
	 *	Enabling auto-advance.
	 *
	 ****/
	 
	var current=1;
	function autoAdvance()
	{
		if(current==-1) return false;
		
		$('#menu ul li a').eq(current%$('#menu ul li a').length).trigger('click',[true]);	// [true] will be passed as the keepScroll parameter of the click function on line 28
		current++;
	}

	// The number of seconds that the slider will auto-advance in:
	
	var changeEvery = 7;

	var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);

	/* End of customizations */
});

On my website http://smstext.jigowatt.co.uk i have a menu which when you hover over certain parts popups with information.

I have designed a Mooflow document that I want to popup instead (i will design a different one for each section).

I cant get it to show up when you hover? I am trying to add a php link in the javascript file that links the hover images.

This is my code at the moment

Code:

var ddimgtooltip={

	tiparray:function(){
		var tooltips=[]
		//define each tooltip below: tooltip[inc]=['path_to_image', 'optional desc', optional_CSS_object]
		//For desc parameter, backslash any special characters inside your text such as apotrophes ('). Example: "I\'m the king of the world"
		//For CSS object, follow the syntax: {property1:"cssvalue1", property2:"cssvalue2", etc}

		tooltips[0]=["http://i1189.photobucket.com/albums/z423/creativeedge1/Golf-Popup1.gif", "", {background:"#FFFFFF", color:"black", border:"2px ridge #0099FF"}]
		tooltips[1]=["http://i1189.photobucket.com/albums/z423/creativeedge1/hospitals_popup_copy.gif", "", {background:"#FFFFFF", color:"black", border:"2px ridge #0099FF"}]
		tooltips[2]=["../dynamicindex14/winter.jpg"]
		tooltips[3]=["../dynamicindex17/bridge.gif", "Bridge to somewhere.", {background:"white", font:"bold 12px Arial"}]

		return tooltips //do not remove/change this line
	}(),

	tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips

When I am trying to link the php I use this code

Code:

var ddimgtooltip={

	tiparray:function(){
		var tooltips=[]
		//define each tooltip below: tooltip[inc]=['path_to_image', 'optional desc', optional_CSS_object]
		//For desc parameter, backslash any special characters inside your text such as apotrophes ('). Example: "I\'m the king of the world"
		//For CSS object, follow the syntax: {property1:"cssvalue1", property2:"cssvalue2", etc}

		tooltips[0]=[<link href="<?php bloginfo('template_directory'); ?>/index2.php", "", {background:"#FFFFFF", color:"black", border:"2px ridge #0099FF"}]
		tooltips[1]=["http://i1189.photobucket.com/albums/z423/creativeedge1/hospitals_popup_copy.gif", "", {background:"#FFFFFF", color:"black", border:"2px ridge #0099FF"}]
		tooltips[2]=["../dynamicindex14/winter.jpg"]
		tooltips[3]=["../dynamicindex17/bridge.gif", "Bridge to somewhere.", {background:"white", font:"bold 12px Arial"}]

		return tooltips //do not remove/change this line
	}(),

	tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips

Obviously I am doing something wrong but I'm not sure what!??

Help Please

How can I add fadeIn and fadeOut with a duration that I can set/adjust to this javascript?
The site is using Zencart and the the Image Hover effect comes from the Image Handler 2 Add-on.

Thank you in advance for your help. Your time and attention in helping me with this is greatly appreciated.

Here is a link to the site residing on a subdomain I use to build sites on http://test3.fullspecweb.com

I read the "Read Before Posting" and it said to only post the code you are having trouble with, but I have no idea which section that would be so I apologize for being such a noob

Here is the script from the jscript_imagehover.js file...
Code:

var offsetfrommouse=[20,20]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0; //duration in seconds image should remain visible. 0 for always.
var currentimageheight = 400;    // maximum image size.
var padding=10; // padding must by larger than specified div padding in stylessheet

// Global variables for sizes of hoverimg
// Defined in "showtrail()", used in "followmouse()"
var zoomimg_w=0;
var zoomimg_h=0;
var vpos;
//Detect IE
var stIsIE = /*@cc_on!@*/false;
//detect opera
var isOpera =
    window.opera?1:0;
// Detect Webkit browsers
var isWebKit =
  navigator.userAgent.indexOf("AppleWebKit") > -1;

if (document.getElementById || document.all){
  document.write('<div id="trailimageid">');
  document.write('</div>');
}

function getObj(name) {
  if (document.getElementById) {
        this.obj = document.getElementById(name);
    this.style = document.getElementById(name).style;
  } else if (document.all) {
    this.obj = document.all[name];
    this.style = document.all[name].style;
  } else if (document.layers) {
    this.obj = document.layers[name];
    this.style = document.layers[name];
  }
}

function gettrail(){
  return new getObj("trailimageid");
}

function truebody(){
if (isWebKit){
  return document.body;
  }else if (isOpera) {
  return document.documentElement;
  }else{
  return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
  }
}

function showtrail(imagename,title,oriwidth,oriheight,zoomimgwidth,zoomimgheight, image, startx, starty, startw, starth){
    zoomimg_w=zoomimgwidth;
    zoomimg_h=zoomimgheight;
  if (zoomimgheight > 0){ currentimageheight = zoomimgheight; }
  trailobj = gettrail().obj;
  trailobj.style.width=(zoomimgwidth+(2*padding))+"px";
  trailobj.style.height=(zoomimgheight+(2*padding))+"px";
  trailobj.setAttribute("startx", startx);
  trailobj.setAttribute("starty", starty);
  trailobj.setAttribute("startw", startw);
  trailobj.setAttribute("starth", starth);
  trailobj.setAttribute("imagename", imagename);
  trailobj.setAttribute("imgtitle", title);
  document.onmousemove=followmouse;
}

function hidetrail(){
  trailstyle = gettrail().style;
  trailstyle.visibility = "hidden";
  document.onmousemove = "";
  trailstyle.left = "-2000px";
  trailstyle.top = "-2000px";
}

function followmouse(e){

  var xcoord=offsetfrommouse[0];
  var ycoord=offsetfrommouse[1];
if (stIsIE){
  var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;
  var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight);
}
else
{
  var docwidth=pageXOffset+window.innerWidth-15;
  var docheight=Math.min(window.innerHeight);

}
  var relativeX = null;
  var relativeY = null;
  if (typeof e != "undefined"){
    if ((typeof e.layerX != "undefined") && (typeof e.layerY != "undefined")) {
      relativeX = e.layerX;
      relativeY = e.layerY;
    } else if ((typeof e.x != "undefined") && (typeof e.y != "undefined")) {
//      relativeX = e.x; // original code replaced to work with Opera
//      relativeY = e.y; // original code replaced to work with Opera
      relativeX = event.offsetX;
      relativeY = event.offsetX;
    }
    if (docwidth - e.pageX < zoomimg_w + (3 * padding)) {
      xcoord = e.pageX - xcoord - zoomimg_w - (2 * offsetfrommouse[0]);
    } else {
      xcoord += e.pageX;
    }
    if (docheight - e.pageY < zoomimg_h + (2 * padding)){
      ycoord += e.pageY - Math.max(0,(0 + zoomimg_h + (5 * padding) + e.pageY - docheight - truebody().scrollTop));
      // returning different values for ff and (opera and webkit) - fixed 12th june 2010
    } else {
      ycoord += e.pageY;
    }

  } else if (typeof window.event != "undefined"){ // Seems to be IE
    if ((typeof event.x != "undefined") && (typeof event.y != "undefined")) {
      relativeX = event.x;
      relativeY = event.y;
    } else if ((typeof event.offsetX != "undefined") && (event.offsetY != "undefined")) {
      relativeX = event.offsetX;
      relativeY = event.offsetY;
    }

    if (docwidth - event.clientX < zoomimg_w + (3 * padding)) {
      xcoord = event.clientX - xcoord - zoomimg_w - (2 * offsetfrommouse[0]);
    } else {
      xcoord += truebody().scrollLeft+event.clientX;
    }
/* event.clientY is not valid in firefox netscape or opera, but ie has to use it */
var ie_offset = -20;
    if ( docheight - event.clientY < zoomimg_h + (2 * padding) ){
      /*
    ycoord += event.clientY - Math.max(0,(0 + zoomimg_h + (5 * padding) - (docheight + truebody().scrollTop -event.clientY) ) );
*/
        ycoord += ie_offset + truebody().scrollTop + event.clientY - Math.max(0,(0 + zoomimg_h + (2 * padding) - (docheight - event.clientY) ) );
    } else {
        ycoord += ie_offset + truebody().scrollTop + event.clientY;
    }
  }

  trail = gettrail();
  startx    = trail.obj.getAttribute("startx");
  starty    = trail.obj.getAttribute("starty");
  startw    = trail.obj.getAttribute("startw");
  starth    = trail.obj.getAttribute("starth");
  imagename = trail.obj.getAttribute("imagename");
  title     = trail.obj.getAttribute("imgtitle");

  // calculate and set position BEFORE switching to visible
if (stIsIE){
  var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;
  var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight);
}else{
  var docwidth=pageXOffset+window.innerWidth-15;
  var docheight=Math.max(document.body.offsetHeight, window.innerHeight);
}

  if(ycoord < 0) { ycoord = ycoord*-1; }
  if ((trail.style.left == "-2000px") || (trail.style.left == "")) { trail.style.left=xcoord+"px"; }
  if ((trail.style.top == "-2000px") || (trail.style.top == "")) { trail.style.top=ycoord+"px"; }
  trail.style.left=xcoord+"px";
  trail.style.top=ycoord+"px";

  if (trail.style.visibility != "visible") {
    if (((relativeX == null) || (relativeY == null)) ||
      ((relativeX >= startx) && (relativeX <= (startx + startw))
      && (relativeY >= starty) && (relativeY <= (starty + starth)))){
      newHTML = '<div><h1>' + title + '</h1>';
      newHTML = newHTML + '<img src="' + imagename + '"></div>';
      trail.obj.innerHTML = newHTML;
      trail.style.visibility="visible";
    }
  }
}

i have this slideshow, Swiss Army Image slideshow i got from DDrive. it has forward and back buttons that are disabled unless the Play/Stop button is in Stop mode. i cannot for the life of me figure out how to enable the buttons always. please can someone help? i have a maniac client who's now threatening not to pay because of this one thing!!!

installation:
http://cssphpmysql.com/dev/westermancm/library2.html

js:
http://cssphpmysql.com/dev/westermancm/js/swissarmy.js

thanks so much!
GN

Hi everyone,

Im new to the whole website thing as a whole but my mate got me onto joomla which has been great and iv got a site up im almost happy with and have learnt quite alot about coding etc.

My problem is:
Im utilising a vertical menu, just simple text as links, i want to add an effect on hover and clicking on that makes the text slide elegantly to the right about 16pixels.
I have another unpublished template that iv bought (that doesnt quite work at all, module position all messed up etc) but it does this hover effect perfectly on the menu.

So i have the .js file from that template and iv read some tutorials on how to add a js file to my template but its just not doing anything.

Is it a good idea to try to add this file from a different template to my template or is there a easier way to do this (what i think is a) simple effect.

Thanks.

ps i can post the js code if wanted

Hey I'm trying to use the adipose plugin to make rollover buttons, Everything works the first time around. I click on the button and it takes me to the link, but when I click on the 'back button' on the browser window, the rollover button stays in the hover state and stops working. Can you help please?

Here is the link for that javascript, it's not gonna fit in he

http://jobyj.in/adipoli/#download

Help will be greatly appreciated!

Situation:
I have a very long page divided into many sections vertical-wise marked by bookmarks, say pageX.html#s1 to s10. I need to show the section inside an iframe (iFrame1) on the mainpage (mainpage.html). I am thinking of having 4 buttons, sitting on the mainpage, to help navigate between these sections on pageX, namely NEXT, PREVIOUS, TOP, END.

condition of the frame, fixed width/height, no scroll, no border.

Very new to javascript but need this code to make a page work for BIZ.

Thank you in advance for anyone kind enough to point the right direction!

Hi,

I was trying to add some simple javascript (toggle visibility function of a div) to the FB 'like' button and 'Google +1' button. This to simply create some more visitor interactivity by showing a thank you message for doing so.

I've tried by just adding 'onclick=' to the element that actually shows the button, with a <a href="#" onlcick="..."> --element--</a> manner, and with a <span> and a <div> element around it.

Neither of them work. The toggle script is 100% correct (using it actively with <a href="javascript:void(0);" onclick="javascript:toggleVisibility('feedbackform')">feedback</a> ) Of course I made sure the div id had correct name and it is unique for the toggle function.

Anybody got any ideas on how to go with this?

JS:
Code:

function toggleVisibility(controlId) {
	if (document.getElementById) { // DOM3 = IE5, NS6
		var control = document.getElementById(controlId);
		if(control.style.display == "")
			control.style.display = "none";
		else
			control.style.display = "";        
	}
	else {
		if (document.layers) { // Netscape 4
			if(document.controlId.display == "")
				document.controlId.display = "none";
			else
				document.controlId.display = "";        
		}
		else { // IE 4
			if(document.all.controlId.style.display == "")
				document.all.controlId.style.display = "none";
			else
				document.all.controlId.style.display = "";        
		}
	}
}