[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Javascript SlideShow with Link Through

Posted on 2012-09-18
3
Medium Priority
?
238 Views
Last Modified: 2012-09-23
Hello Experts,

I have a slideshow on www.villasdirect.com, but I want the links to change with the slides, so when a particular image is shown, the relevant link also loads.

I have used http://www.barelyfitz.com/projects/slideshow/index.php to set this up, but can't get the linking to work (at the momen, it's a <a href></a> around the whole slideshow container...

Can someone please help, or direct me to a better solution if there is one?

My code to call the slideshow is:

                    </tr>
          <tr>
            <td height="309" align="center" valign="middle"> <a href="logon.asp"><div align="center"><img src="" name="swap" width="392" height="308" border="0" id="swap" style="filter:progid:DXImageTransform.Microsoft.Fade()" />
                    <script type="text/javascript">
<!--
ss.pre_update_hook = function() {
  return;
}

if (document.images) {
  ss.image = document.images.swap;
  ss.textid = "ss_text";
  ss.update();
  ss.play();
}

//-->
                          </script>
                    </div></a><!--</a>--></td>
          </tr>

Open in new window


And the code building the show is:

<script TYPE="text/javascript" SRC="../villagallery.js"></script>
<!-- added Slideshow Scripts-->
<script TYPE="text/javascript">
<!--

ss = new slideshow("ss");

ss.timeout = 5000;


s = new slide();
s.src =  "../images/indexss4.jpg";
s.link = "../index.asp";
s.title = "X";
s.text = "X";

ss.add_slide(s);

s = new slide();
s.src =  "../images/indexss1.jpg";
s.link = "../how-we-work.asp";
s.title = "X";
s.text = "X";

ss.add_slide(s);

s = new slide();
s.src =  "../images/indexss5.jpg";
s.link = "../index.asp";
s.title = "X";
s.text = "X";

ss.add_slide(s);

s = new slide();
s.src =  "../images/indexss2.jpg";
s.link = "../how-we-work.asp";
s.title = "X";
s.text = "X";

ss.add_slide(s);

s = new slide();
s.src =  "../images/indexss4.jpg";
s.link = "../index.asp";
s.title = "X";
s.text = "X";

ss.add_slide(s);

s = new slide();
s.src =  "../images/indexss3.jpg";
s.link = "../how-we-work.asp";
s.title = "X";
s.text = "X";

ss.add_slide(s);

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

  s = ss.slides[i];

}

//-->
</script>
<script type="text/javascript">

var preload_list = new Array("indexss4.jpg","indexss1.jpg", "indexss5.jpg", "indexss2.jpg", "indexss3.jpg"
);
var path_to_images = "../images/";

// preload (change path to images if necessary)
if (document.images) {
	var image_list = new Array();
	for (var preload_counter=0; preload_counter<preload_list.length; preload_counter++) {
  	image_list[preload_counter] = new Image(); 
		image_list[preload_counter].src = path_to_images + preload_list[preload_counter];	
  }
}

var swapTimer;
// delay before restoring original image onmouseout
var restore_delay = 800; // milliseconds

function swapImage(num) {
	if (swapTimer) clearTimeout(swapTimer);
	if (document.images) {
		document.swap.src = image_list[num].src;
	}
}

//-->
</script>
<!--end of added slideshow scripts-->

Open in new window


HELP appreciated!
0
Comment
Question by:Nico2011
  • 2
3 Comments
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38409346
If you don't get any posts on this - post back - to write some javascript to do what you want (without using a plugin) is very easy - 4 or 5 lines in Jquery. I am a bit pushed for time now so will leave this for other experts but if you don't come write post back.
0
 

Accepted Solution

by:
Nico2011 earned 0 total points
ID: 38409779
Thanks but I have just found a solution, implemented it and it works great - http://www.barelyfitz.com/projects/slideshow/wizard/

I appreciated your offer - thanks again.
0
 

Author Closing Comment

by:Nico2011
ID: 38426010
Found a wizard to do exactly what I needed.
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question