JavaScript - Adding Hyperlinks To A Slideshow

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 */
});

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

Good day all,

I was hoping someone could help me out with the following. I currently have a slideshow that as thumbnails under a main image. The thumbnails slide left and right with hover on a button and with a click changes main image without any problems.

Few things I am looking to change/add:

1. The ability to mouse over the main image and have the caption appear than disappear when the mouse is moved off. Currently I have the caption as a static text under the main image.

2. Start the thumbnail position in the middle instead of the left

3. Add mouseover buttons to the main image to give the ability to cycle through the images instead of having to always use the thumbnails.

Below I've include the Javascript code: Is this the best way or is there a better way?

Example of slideshow: http://neileverosborne.com/portfolios/manatees.html

JAVASCRIPT:
Code:

	var displayWaitMessage=true;	// Display a please wait message while images are loading?


	var activeImage = false;
	var imageGalleryLeftPos = false;
	var imageGalleryWidth = false;
	var imageGalleryObj = false;
	var maxGalleryXPos = false;
	var slideSpeed = 0;
	var imageGalleryCaptions = new Array();
	function startSlide(e)
	{
		if(document.all)e = event;
		var id = this.id;
		if(this.id=='arrow_right'){
			slideSpeedMultiply = Math.floor((e.clientX - this.offsetLeft) / 5);
			slideSpeed = -1*slideSpeedMultiply;
			slideSpeed = Math.max(-10,slideSpeed);
		}else{
			slideSpeedMultiply = 10 - Math.floor((e.clientX - this.offsetLeft) / 5);
			slideSpeed = 1*slideSpeedMultiply;
			slideSpeed = Math.min(10,slideSpeed);
			if(slideSpeed<0)slideSpeed=10;
		}
	}

	function releaseSlide()
	{
		var id = this.id;
		slideSpeed=0;
	}

	function gallerySlide()
	{
		if(slideSpeed!=0){
			var leftPos = imageGalleryObj.offsetLeft;
			leftPos = leftPos/1 + slideSpeed;
			if(leftPos>maxGalleryXPos){
				leftPos = maxGalleryXPos;
				slideSpeed = 0;

			}
			if(leftPos<minGalleryXPos){
				leftPos = minGalleryXPos;
				slideSpeed=0;
			}

			imageGalleryObj.style.left = leftPos + 'px';
		}
		setTimeout('gallerySlide()',20);

	}

	function showImage()
	{
		if(activeImage){
			activeImage.style.filter = 'alpha(opacity=50)';
			activeImage.style.opacity = 0.5;
		}
		this.style.filter = 'alpha(opacity=100)';
		this.style.opacity = 1;
		activeImage = this;
	}

	function initSlideShow()
	{
		document.getElementById('arrow_left').onmousemove = startSlide;
		document.getElementById('arrow_left').onmouseout = releaseSlide;
		document.getElementById('arrow_right').onmousemove = startSlide;
		document.getElementById('arrow_right').onmouseout = releaseSlide;




		imageGalleryObj = document.getElementById('theImages');
		imageGalleryLeftPos = imageGalleryObj.offsetLeft;
		var galleryContainer = document.getElementById('galleryContainer');
		imageGalleryWidth = galleryContainer.offsetWidth - 20;
		maxGalleryXPos = imageGalleryObj.offsetLeft;
		minGalleryXPos = imageGalleryWidth - document.getElementById('slideEnd').offsetLeft;

		if (navigator.userAgent.indexOf('MSIE') >= 0) {
			var arrowWidth = document.getElementById('arrow_left').offsetWidth;
			var el = document.createElement('div');
			el.style.position = 'absolute';
			el.style.left = arrowWidth + 'px';
			el.style.width = (galleryContainer.offsetWidth - arrowWidth * 2) + 'px';
			el.style.overflow = 'hidden';
			el.style.height = '100%';

			document.getElementById('galleryContainer').appendChild(el);
			el.appendChild(document.getElementById('theImages'));
		}
		var slideshowImages = imageGalleryObj.getElementsByTagName('IMG');
		for(var no=0;no<slideshowImages.length;no++){
			slideshowImages[no].onmouseover = showImage;
		}

		var divs = imageGalleryObj.getElementsByTagName('DIV');
		for(var no=0;no<divs.length;no++){
			if(divs[no].className=='imageCaption')imageGalleryCaptions[imageGalleryCaptions.length] = divs[no].innerHTML;
		}
		gallerySlide();
	}

	function showPreview(imagePath,imageIndex){
		var subImages = document.getElementById('previewPane').getElementsByTagName('IMG');
		if(subImages.length==0){
			var img = document.createElement('IMG');
			document.getElementById('previewPane').appendChild(img);
		}else img = subImages[0];

		if(displayWaitMessage){
			document.getElementById('waitMessage').style.display='inline';
		}
		document.getElementById('largeImageCaption').style.display='none';
		img.onload = function() { hideWaitMessageAndShowCaption(imageIndex-1); };
		img.src = imagePath;

	}
	function hideWaitMessageAndShowCaption(imageIndex)
	{
		document.getElementById('waitMessage').style.display='none';
		document.getElementById('largeImageCaption').innerHTML = imageGalleryCaptions[imageIndex];
		document.getElementById('largeImageCaption').style.display='block';

	}
	window.onload = initSlideShow;

Hey all,

I'm trying to add rel="lightbox" somewhere in the slideshow I have on my client's site slideshow [www.bobbovanstudio.com/work.php] but anything I try is unsuccessful.

Slideshow javascript piece for the picture's link:
Code:

this.hotlink = function() {
    // This method jumps to the slide's link.
    // If a window was specified for the slide, then it opens a new window.

    var mywindow;

    // If this slide does not have a link, do nothing
    if (!this.link) return;

    // Open the link in a separate window?
    if (this.target) {

      // If window attributes are specified,
      // use them to open the new window
      if (this.attr) {
        mywindow = window.open(this.link, this.target, this.attr);
  
      } else {
        // If window attributes are not specified, do not use them
        // (this will copy the attributes from the originating window)
        mywindow = window.open(this.link, this.target);
      }

      // Pop the window to the front
      if (mywindow && mywindow.focus) mywindow.focus();

    } else {
      // Open the link in the current window
      location.href = this.link;
    }
  }
}

Hyperlink on slideshow for picture link
Code:

<a HREF="javascript:SLIDES.hotlink()" rel="lightbox"><IMG NAME="SLIDESIMG" SRC="#" BORDER="0" ALT="slideshow image" STYLE="height:300px;filter:progid:DXImageTransform.Microsoft.Fade()"></a>

Any ideas on how to fix this?

Thanks in advance!

Following are my script to toggle b/w two different links,

<html lang="en-US">
<head>
<title>toggle b/w 2 different links</title>
<script type="text/javascript"><!--
display=1;
function displayvalue()
{
document.getElementById("sv1").style.display = "block";
document.getElementById("dw1").style.display = "none";
}
function ShowHide()
{
if (display==1) {
document.getElementById("sv1").style.display = "none";
document.getElementById("dw1").style.display = "block";
//document.getElementById('javaFun') calling java func from javascript
display=2;
}
else {
document.getElementById("sv1").style.display = "block";
document.getElementById("dw1").style.display = "none";
//document.getElementById('javaFun1') calling java func from javascript
display=1;
}
}
function Func1Delay()
{
document.getElementById("sv1").style.display = "none";
document.getElementById("loadimage").innerHTML="<input type='image' src='Loading.gif'>";
setTimeout("LoadImage()", 300);
}


function LoadImage()
{
document.getElementById("loadimage").innerHTML="";
ShowHide();
}


--></script>
</head>
<body background="GsNJNwuI-UM.gif"onload="displayvalue()">




<div id="sv1" >
<a onclick ="Func1Delay()" href="javascript:;">click me</a>
</div>
<div id="loadimage"></div>
<div id="dw1" >
<a onclick ="ShowHide()" href="javascript:;">Download me</a>
</div>
</body>
</html>

whenever we call a java method , (consider this line:- document.getElementById('javaFun');)after the completion of java call the page is reloading, how control this reloading after the server completing the request....?

I'm new to programming,
Here's my problem:

I'm using a for loop to generate a list of hyperlinks

for(i = 100; i < 200; i++)
{

var str = "link";
document.write(str.link('http://someWebsite.com/' + i +'.html'));
document.write("<br />");
}


so the list that is generated looks like...

link
link
link
---------and so on until the loop is finished.

My question: is it possible for each links text to be dependent on the pages title?

for example instead of the the text "link", the program would follow the URL and know in the pages header was the title "Bob's website" or whatever the pages title was and would generate the list.

Example:

bobs website
daves website
rons website
susies website
betsys website
______________________________
Any help to differentiate the links text based on following the URL would be helpful Thank you!

I am working with an InDesign CS3 document, with multiple books, and what I want to do is search for a string and turn that string or some how attach an InDesign Hyperlink object to that string. I can find the string using the findText() method
var myFoundItems = app.documents.item(0).findText();
And it is returned as a TextStyleRange with its parent being a Story object. What I'm having trouble with is either replacing or attaching a Hyperlink object to string or TextStyleRange. Hyperlink objects to not have a contructor so I don't know how to instantiate a new one and once I get a new one created and the fields populated I don't know how to replace or attach the Hyperlink to that TextStyleRange.

I need someone who can help me create javascript code which will create a hyperlink string with a changing variable:

This script should write and execute a hyperlink string which opens a separate pop-up window, nothing more. No image files, no subfolders, forget all that stuff. JUST A HYPERLINK.

The hyperlink SYNTAX does all the work in loading and selecting the images, NOT THE SCRIPT. There is only one changing variable, the value following clipart_id= Here is the basic hyperlink syntax:

<a href="http://www.websitename.com/clipart/manipulate? clipart_id= 00000 &path=%2Fclipart%2Feps%2F&lockRatio=true&width=500&height=500"></a>

THERE ARE ALWAYS 2 WINDOWS: ONE WINDOW HOLDS THE HTML; THE OTHER IS A POP-UP WINDOW (The opened hyperlink)

The basic html page will contain only 2 objects, an input box and a NEXT BUTTON.

Step 1: Initialize the variable from an input box, this variable is used to set the value following clipart_id= which is part of the hyperlink syntax

Step 2: The user inputs the initial variable which is used to write the first hyperlink string; click NEXT to launch the first pop-up window

Step 3: For each subsequent action Click NEXT - OnClick - This ADDS +1 to the initial variable, this variable is passed to be inserted in a new hyperlink string AND then launches a NEW hyperlink to open a NEW popup window. This is an infinite type of action which advances the value of clipart_id= every time the NEXT button is clicked.

Each time you click the NEXT button it advances a counter which executes a NEW hyperlink in a NEW popup window. The only thing that ever changes is the variable after clipart_id=, BUT the entire url syntax of the hyperlink string must be maintained exactly as shown below. If you change the syntax it will not work.

So, if the first value to start with is lets say 13000 ; this is input in a box; then the first hyperlink string will automatically be written and open using this:

<a href="http://www.websitename.com/clipart/manipulate?clipart_id= 13000 &path=%2Fclipart%2Feps%2F&lockRatio=true&width=500&height=500"></a>

Click the NEXT BUTTON and now a new hyperlink window will open which reads like this:

<a href="http://www.websitename.com/clipart/manipulate?clipart_id= 13001 &path=%2Fclipart%2Feps%2F&lockRatio=true&width=500&height=500"></a>

click the NEXT BUTTON and now a new hyperlink hyperlink window will open reads like this:

<a href="http://www.websitename.com/clipart/manipulate?clipart_id= 13002 &path=%2Fclipart%2Feps%2F&lockRatio=true&width=500&height=500"></a>

And so on and so on... Nothing else changes. So the "nextpath" after a CLICK is a complete new hyperlink string which contains a vew variable for the value following clipart_id=

All I am trying to do is execute a standardized hyperlink string with one changing variable.

CAN ANYONE HELP ME TO WRITE THIS CODE?

I'm using JavaScript (rssplayer.js) to display a feed from a Blogger blog. I want the feed to be displayed as plain text without the hyperlink to the original posts. Does anyone know how to do this?

Thanks


rssplayer: http://www.javascriptkit.com/dhtmltu...jaxfeed3.shtml

Here's the code in my page:

Code:

<script type="text/javascript">
//USAGE SYNTAX: new rssdisplayer("divid", "rssurl", numberofitems, "displayoptions")
new rssdisplayer("rssdiv", "http://jms8bscience-assignments.blogspot.com/feeds/posts/default?alt=rss", 6, "")</script>

Here's the code for the rssdisplayer.js

Code:

google.load("feeds", "1") //Load Google Ajax Feed API (version 1)

function rssdisplayer(divid, url, feedlimit, showoptions){
this.showoptions=showoptions || "" //get string of options to show ("date" and/or "description")
var feedpointer=new google.feeds.Feed(url) //create new instance of Google Ajax Feed API
feedpointer.setNumEntries(feedlimit) //set number of items to display
document.write('<div id="'+divid+'">Loading feed...</div>')
this.feedcontainer=document.getElementById(divid)
var displayer=this
feedpointer.load(function(r){displayer.formatoutput(r)}) //call Feed.load() to retrieve and output RSS feed
}


rssdisplayer.prototype.formatdate=function(datestr){
var itemdate=new Date(datestr)
return "<span style='color:gray; font-size: 90%'>"+itemdate.toLocaleString()+"</span>"
}


rssdisplayer.prototype.formatoutput=function(result){
if (!result.error){ //if RSS feed successfully fetched
var thefeeds=result.feed.entries //get all feed entries as a JSON array
var rssoutput="<ul>"
for (var i=0; i<thefeeds.length; i++){ //loop through entries
var itemtitle="<a href=\"" + thefeeds[i].link + "\">" + thefeeds[i].title + "</a>"
var itemdate=/date/i.test(this.showoptions)? this.formatdate(thefeeds[i].publishedDate) : ""
var itemdescription=/description/i.test(this.showoptions)? "<br />"+thefeeds[i].content : ""
rssoutput+="<li>" + itemtitle + " " + itemdate + itemdescription + "</li>"
}
rssoutput+="</ul>"
this.feedcontainer.innerHTML=rssoutput
}
else //else, output error
alert("Error fetching feeds: "+result.error.message)
}

//USAGE SYNTAX: new rssdisplayer("divid", "rssurl", numberofitems, "displayoptions")
//new rssdisplayer("adiv", "http://www.cssdrive.com/index.php/news/rss_2.0/", 5, "date, description")

hi there,

I'm looking for a method to use several hyperlinks to submit a form and then return the page within the link for example

Code:

<a href="thispage.php?mode=1" Onclick="javascript:form.submit();">
<a href="thispage.php?mode=2" Onclick="javascript:form.submit();">

the reason for this is so that no matter which link a user navigates to the form will be submitted and no data lost.

however the above code obviously loses the POST info as the form action will be different from the a tag.

Therefore I think maybe a way of creating a variable that changes the form action to match the a link selected (as the form(s) are submitted to the same php page.

hope someone can think clearer than me!

cheers

Consider the following piece of code:

PHP Code:
<form method='post' name='myform'>
  <input type='submit' name='sub' value='submit 1' />
  <input type='submit' name='sub' value='submit 2' />
  <a href='javascript:document.myform.submit();'>submit 3</a>
</form>

<?php echo "You clicked ".$_POST["sub"]; ?>

So if you click "submit 1", the output will be You clicked submit 1.
And if you click "submit 2", the output will be You clicked submit 2.

That's obvious.

But ... what do I need to do to pass the key/value pair "sub" = "submit 3" to the server via POST when I click on the hyperlink showing "submit 3" - so that the output is You clicked submit 3 (i.e. so that $_POST contains "submit 3" referenced to index "sub").

I've tried <a href='javascript: a = {"x" : 1}; document.myform.submit(a);'>submit 3</a>, but that doesn't cause a to be passed via POST.

Hi there,
this is my first post so forgive me if it is frustrating to those who try to help.

I am trying to create a side navigation menu that I want to just be a heading then once clicked it toggles on a list. Each item must be a link to a different webpage.
so far i have only managed to create a toggle list but cannot control each item to make it a unique link. I'll post the script I have so far;
--------------------------------------------------------------------------
<script language="javascript" type="text/javascript">

function list_colours()
{
var i=0;
var colours = new Array();

colours[0]=<a href="../Yellow Inventory.html"> Yellow </a>;
colours[1]=<a href="../Orange Inventory.html">"Orange"</a>;
colours[2]=<a href="../Pink Inventory.html">"Pink"</a>;
colours[3]=<a href="../Green Inventory.html">"Green"</a>;
colours[4]=<a href="../Blue Inventory.html">"Blue"</a>;
colours[5]=<a href="../Red Inventory.html">"Red"</a>;

var text="";

for(var i=0; i < colours.length; i++) {

text = text + colours[i] + "</a><br/>";
}

return text;


}

//creating a toggle menu

var onOff = "off"

function insertText()
{

if(onOff == "off")
{

var paragraph = document.getElementById("colour-items");
var colours_list = list_colours();
paragraph.innerHTML=colours_list;
onOff="on"
}

else
{
var paragraph = document.getElementById("colour-items");
var colours_list="";
paragraph.innerHTML=colours_list;
onOff="off"
}

}


</script>


<div id="left-container">

<div id="Nav-title"><h3 onmouseover="insertText();">Colours</h3></div>

<p id="colour-items"></p>




</div>
-------------------------------------------------------------------------

It is my guess that you make the array lists a list of a links, though I can't seem to find the correct way how.




The second problem I have is that I have a large number of images of products on my page.
I would like 4 headings that contain all my images, like the toggle menu above. so I click the heading and only those images come up.

I will be happy to answer any questions that may help.

Thanks all.

Hi guys.. I am just starting to learn JavaScript. I wanted to know how to have multiple hyperlinks (Containing links to Youtube Videos) that when clicked, cause the corresponding videos to play on the Youtube Player Embedded on the site. I hope my question is not too confusing. Thank you in advance!

P.S.
I saw some Source Code relating to this on StackOverflow and copied it and couldn't get it to work.. Here's my source code.

Code:

<html>
<head>
<title> Sample Page </title>
<script>
// Get element holding the video (embed or object)
var player = document.getElementById("MOVIE");
 
//Create a simple function and check if player exists
function play() {
    if(player) {
        player.playVideo();
    }
}
</script>
</head>
<body>
<object width="420" height="315"><param name="MOVIE" value="http://www.youtube.com/v/HsQIoPyfQzM?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/HsQIoPyfQzM?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</br></br>
<a href="http://youtu.be/sPvqNMb4StI" onclick="play()"> THIS IS FIRST Video Link </a></br></br>
<a href="http://youtu.be/w7_Ccu21QVs" onclick="play()"> THIS IS SECOND Video Link </a>
</body>
</html>

Hi,

I desperately need a javascript slideshow that does the following:

1--shows still images with thumbnails
2--can be played manually or automatically
3--can embed youtube videos
4--audio can accompany slideshows
5--powered by javascript, not Flash so it shows up on iPad

Does anyone know where I can get such a slideshow? Thanks

Hey im looking to get 3 slide shows on 1 website (coded in php).

I need the slide shows to all show different images however all change images at the exact same time and have the exact same layout... how can i do this?