|
JavaScript - Using Jquery Slideshow And Having Issues With Making Larger Image Clickable
So i purchased a template from template monster for wordpress.
http://www.templatemonster.com/demo/28861.html On the front page when you click on the thumbnail it changes the big image in the middle. I can't figure out how for the life of me to make that image also a link. My main problem is the code below. img_b1.jpg is the full size image and image_1.jpg is the thumbnail image. When you click on the thumbnail it changes the big image in the middle. When I add a clickable href=" to the main image it breaks the whole chain. --------------------------------------------------------------------- <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b1.jpg" title="Agrocore"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_1.jpg" alt="Agrocore" /> </a> ------------------------------------------------------------------------ Full code below <div id="thumbs" class="navigation"> <ul class="thumbs noscript"> <li> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b1.jpg" title="Agrocore"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_1.jpg" alt="Agrocore" /> </a> <div class="caption"> <div class="indent1">living set </div> <div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br /> Sleek and stylish interior to suit your taste.</div> <div class="indent"><h4>Contemporary</h4></div> </div> </li> <li> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b2.jpg" title="ProClinique"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_2.jpg" alt="ProClinique" /> </a> <div class="caption"> <div class="indent1">in grey</div> <div class="image-desc">Luxury living is being redefined and emphasis is being laid on comfortable living, without compromising on style, modest in the color codes</div> <div class="indent"><h4>Sitting room </h4></div> </div> </li> <li> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b3.jpg" title="Beauty"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_3.jpg" alt="Beauty" /> </a> <div class="caption"> <div class="indent1">living set </div> <div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br /> Sleek and stylish interior to suit your taste.</div> <div class="indent"><h4>Contemporary</h4></div> </div> </li> <li> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b4.jpg" title="Market"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_4.jpg" alt="Market" /> </a> <div class="caption"> <div class="indent1">in grey </div> <div class="image-desc">Luxury living is being redefined and emphasis is being laid on comfortable living, without compromising on style, modest in the color codes</div> <div class="indent"><h4>Sitting room </h4></div> </div> </li> <li class="last"> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b5.jpg" title="Business"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_5.jpg" alt="Business" /> </a> <div class="caption"> <div class="indent1">living set </div> <div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br /> Sleek and stylish interior to suit your taste.</div> <div class="indent"><h4>Contemporary</h4></div> </div> </li> </ul> </div> </div> </div> Similar TutorialsMy slideshow links will only open inside my inline frame. I'm sure there's something simple I need to change in the code to make it open full screen. Here is my code. Any help would be so much appreciated! Thank you. Shawnel <head> <style type="text/css"> .style1 { vertical-align: top; } </style> </head> <script type="text/javascript"> <!-- //preload images var image1=new Image() image1.src="Images/Picture Box/PictureBox1.jpg" var image2=new Image() image2.src="Images/Picture Box/PictureBox2.jpg" var image3=new Image() image3.src="Images/Picture Box/PictureBox3.jpg" var image4=new Image() image4.src="Images/Picture Box/PictureBox4.jpg" var image5=new Image() image5.src="Images/Picture Box/PictureBox5.jpg" //--> </script> <body style="margin-top: 0"> <a href="javascript:slidelink()"><img src="Images/Picture Box/PictureBox1.jpg" name="slide" border="0" width="539" height="314" class="style1" /></a> <script type="text/javascript"> <!-- var step=1 var whichimage=1 function slideit(){ if (!document.images) return document.images.slide.src=eval("image"+step+".src") whichimage=step if (step<5) step++ else step=1 setTimeout("slideit()",3000) } slideit() function slidelink(){ if (whichimage==1) window.location="learnmore.htm" else if (whichimage==2) window.location="contactus.htm" else if (whichimage==3) window.location="hungerheroes.htm" else if (whichimage==4) window.location="donate.htm" else if (whichimage==5) window.location="volunteer.htm" } //--> </script> I have created a slideshow before but I want to create a slideshow where a person clicks on a link and it goes to a certain picture which might have one or more links embedded into the picture something like this: http://www.myeloma.org.uk/ any guides on how to do this? help much appreciated I would like to take a series of images and paste them into a final larger image before displaying it to the user. From what I've read there are libraries that use HTMLcanvas that could achieve this but they don't work even with newer versions of IE. I was wondering if there were functions similar to the PHP image editing functions that work with newer versions of IE? Cheers. I'm teaching myself how to build websites; up until now I have made websites using tables within tables and it's all fairly straight forward, now I realise that divs and css allow you to do soooo much more! I have put these files in a temp folder on my website so not to over write the current site. Basically I have followed this online tutorial (http://www.cryer.co.uk/resources/jav...show_links.htm) but when I test the slideshow, it doesn't work. the link is: www.telecaretechnology.com/telecare2/index.html Since I have started writing this, my css file seems to have had a wobbly - I assume my problem is where I'm trying to use server-side include?? Is that the best way to add these files? the javascript I have used to make the slideshow run is he http://www.telecaretechnology.com/te...2/slideshow.js I would really appreciate any advice! Kind Regards, Jamie Hi there! i want to know, what should I do to make the j query simple slide show repeat playing as currently it stops when the slide show finishes. How can I do it repetitive? I have this code for my webpage Code:
<head>
<style type="text/css">
#ss_image{
-ms-filter: "progid:DXImageTransform.Microsoft.Fade(duration=2)";
filter :progid:DXImageTransform.Microsoft.Fade(duration=2);
}
</style>
</style>
</head>
<body onload="onload()">
<script type="text/javascript">
function onload(){
for(;;) {
setTimeout(slideshow(),3000);
}
}
function slideshow(){
var image=document.getElementById("ss_image")
if (image.filters && image.filters.length>0) //if filters[] collection is defined (only in IE)
image.filters[0].apply()
image.src=(image.src.indexOf("one.png")!=-1)? " two.png" : "one.png" //alternate between two images to change to
if (image.filters && image.filters.length>0)
image.filters[0].play(2) //2 seconds transition
}
</script>
<img id="ss_image" src="one.png" height="296" width="401" /><br />
</body>
</html>
My problems a The slideshow stops after one chage Why is this? Also could someone tell me who i could add more images, and how to link each one to a page. I have a slideshow that allows the user to see the previous slide title and the next slide title along with the current slide and its content. I tested locally not in WP and the code worked fine. Once I placed my source within WP everything went south. I inspector the first line in the script seems to be what is having the issues - $(window).load(function(){ and I am unsure what to do next. The source was used from Edit fiddle - JSFiddle the page I am trying to get to work is located here - Sevices | Q&D CONSTRUCTION, INC.Q&D CONSTRUCTION, INC. I am open to any suggestions. Code: <script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130801/jquery.cycle2.min.js"></script>
<style type='text/css'>
.cycle-slide {
width: 100%;
text-align: center;
}
img {
max-width: 300px;
}
#next {
float: right;
}
#prev {
float: left;
}
.center {
text-align: center;
}
</style>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
var slideshow = $('.cycle-slideshow');
maxSlides = slideshow.data('cycle.opts').slideCount;
slideshow.on({
'cycle-update-view': function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
UpdateTitles();
}
});
function UpdateTitles(){
var currentSlide = slideshow.data('cycle.opts').currSlide;
activeSlide = $(".cycle-slide-active");
activeTitle = activeSlide.data('title');
if(currentSlide == 0){
nextTitle = activeSlide.next().data('title');
prevTitle = $(".cycle-slide").eq(maxSlides).data('title');
}
else if(currentSlide == maxSlides-1){
prevTitle = activeSlide.prev().data('title');
nextTitle = $(".cycle-slide").eq(0).data('title');
}
else {
nextTitle = activeSlide.next().data('title');
prevTitle = activeSlide.prev().data('title');
}
$('h1').html(activeTitle);
$('#prev').html("Previous: "+prevTitle);
$('#next').html("Next: "+nextTitle);
}
UpdateTitles();
});//]]>
</script>
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 */
});
NOT SURE WHAT IS GOING ON, WHEN I COMMENT OUT THE CREATE ARRAY FUNCTION EVERYTHING SEEMS TO WORK FINE, SO WHAT IS UP WITH THE CREATEARRAY FUNCTION???? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Photoviewer</title>
</head>
<body bgcolor="#FFF1CC">
<h1><u> Viewer </u></h1>
<p>
<img id="myImage" src="InitialImage.jpg" width="444" height="293" alt="viewerImg" />
</p>
<hr />
<!--Entry boxes-->
<form action="" method="post">
<p>Photo's Folder
<input type="text" id="photofold" value="umcp/" /><br />
</p>
<p>Common Name
<input type="text" id="commonName" value="college" /><br />
</p>
<p> Start Photo Number
<input type="text" id="Startval" value="1" />
</p>
<p>End Photo Number
<input type="text" id="Endval" value="1" />
</p>
<!--Action buttons-->
<p>
<input type="button"id="displayShowButton" value="Slide Show" />
<input type="button"id="displayRandoButton" value="Random Slide Show" />
<input type="button"id="displayNextButton" value="Previous Slide" />
<input type="button"id="displayLastButton" value="Next Slide" />
</p>
<!--Reset Button-->
<p>
<input type="reset" value="Reset" />
</p>
</form>
<script type="text/javascript">
/*<![CDATA[*/
/*setting global variables*/
var photosArrayGlobal;
var photoIndexGlobal;
var displayGlobal=document.getElementById("myImage")
/* calling main */
main();
function main() {
document.getElementById("displayShowButton").onclick= setSequential;
document.getElementById("displayRandoButton").onclick=setRandom;
}
/*Generate the size of the photoarrays */
function createArray() {
window.alert("create array");
if (number > 0) {
window.alert("there are"+number+"photos in your range");
photosArrayGlobal= new Array (number);
return photoArrayGlobal;
getArrayPhotosNames();
}
Else {
window.alert("there is one photo in your range");
photosArrayGlobal = new Array (1);
return photosArrayGlobal;
getArrayPhotosNames();
}
}
/*Designate that either a random or a sequential order has been requested,sequential=1/random=0*/
function setSequential() {
var mode= 1;
window.alert("set sequential");
checkRange();
}
function setRandom () {
var mode= 0;
window.alert("set random");
checkRange ();
}
/*make sure end is start is less than end*/
function checkRange() {
window.alert("check range");
var Start= document.getElementById("Startval");
var Startnum = Start.value;
var End = document.getElementById("Endval");
var Endnum = End.value
if (Endnum < Startnum){
window.alert("Invalid Numbers");
}
else {
window.alert("correct input");
var range = Endnum - Startnum;
window.alert(range);
var number=Number(range);
createArray ();
}
}
/* This function will read the folder name, common name, start photo number, and end photo number and will return an array with the names of the photos that belong to the specified number range. Each photo's name consists of the folder name, followed by the common name, the photo's number and the ".jpg" extension*/
function getArrayPhotosNames () {
window.alert("all done for now");
}
/*]]>*/
</script>
</body>
</html>
Hello all.. I am relatively new to javascript. I am using a javascript code for a slideshow inside a photo gallery. With the current code there is some degree of overlap between consecutive images so that the images merge for a second. I want a traditional slideshow where one image stays for 3 seconds, fade out without any steps, and next image entering without any delay. Dont want any merging. Which function should I change for that? Is it parameters in set interval? I am not sure if this is a javascript problem or an html problem. I have posted the code below. The main two areas that I am interested in are 1) the area where the photo is shown in the larger size, and 2) the thumbnails below the larger picture. Right now in the img tag of the first image I have specified a height and width of 450px. The result is that when one hovers the mouse over the thumbnails, all pictures are shown at that size, regardless if they are larger or smaller than 450 x 450 pixels. I am not concerned about the larger images because I will use a script to scale those that someone on this forum was so kind enough to provide me with. The IMPORTANT PART IS HE I am concerned with smaller images. If you remove the height and width portion from the image tag, when you hover the mouse over a picture that's smaller than the others, such as the last one, which is smaller than all the others that are at 450 x 450, the thumbnails "move up". I would like the thumbnails to remain where they are at / for the top area where the photos are displayed to always be the same size, such as 450 x 450 px., and for the smaller pictures to be shown in the center in that area. How can this be done? Note: The entire portion of the stylesheet is not present. Let me know if something important is missing. Code: <html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>MouseOver-Images</title>
<style type="text/css">
td#kdwhdMAINPHOTO { width: 616px; vertical-align: top; }
table#kdwhdTHUMB { margin-top: 12px; }
td#kdwhdTHUMBNAILS { background-image:
url(http://www.sunandfuninoc.com/testingsites/gems4me/images/t_28.jpg);
width: 616px; height: 114px; text-align: center; }
td#kdwhdTHUMBNAILS img { border: 1px solid #696969; }
td#kdwhdTABLE { width: 296px; vertical-align: top; }
-->
</style>
</head>
<body>
<table style="width: 924px;" border="0" cellpadding="0"
cellspacing="0">
<tbody>
<tr>
<td id="kdwhdMAINPHOTO"
style="text-align: center; background-color: white;">
<!--Image 1--> <img
src="http://site.gems4me.com/images/red2.jpg" alt="Item photo"
name="swap" style="border: 0px solid rgb(105, 105, 105);"
height="450" width="450">
<table id="kdwhdTHUMB" border="0" cellpadding="0"
cellspacing="0" width="616">
<tbody>
<tr>
<td><img
src="http://www.sunandfuninoc.com/testingsites/gems4me/images/t_26.jpg"
alt="Click on the picture below to enlarge" height="25"
width="616"></td>
</tr>
<tr>
<td><img
src="http://www.sunandfuninoc.com/testingsites/gems4me/images/t_27.jpg"
alt="" height="10" width="616"></td>
</tr>
<tr>
<td id="kdwhdTHUMBNAILS"><!--Image 1--><img
src="http://site.gems4me.com/images/450by450.jpg"
alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/450by450.jpg';"
height="80">
<!--Image 2--> <img
src="http://site.gems4me.com/images/450by450-2.jpg"
alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/450by450-2.jpg';"
height="80">
<!--Image 3--> <img
src="http://site.gems4me.com/images/450by450.jpg"
alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/450by450.jpg';"
height="80">
<!--Image 4--> <img
src="http://site.gems4me.com/images/450by450-2.jpg"
alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/450by450-2.jpg';"
height="80">
<!--Image 5--> <img
src="http://site.gems4me.com/images/red2.jpg" alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/red2.jpg';"
height="80"></td>
</tr>
<tr>
<td><img
src="http://www.sunandfuninoc.com/testingsites/gems4me/images/t_29.jpg"
alt="" height="10" width="616"></td>
</tr>
</tbody>
</table>
</td>
<td><img
src="http://www.sunandfuninoc.com/testingsites/gems4me/images/spacer.gif"
alt="" height="1" width="12"></td>
<td id="kdwhdTABLE">
<table border="0" cellpadding="5" cellspacing="0"
width="296">
<tbody>
<tr>
<td colspan="2" id="kdwhdTABLETITLE">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR1C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR1C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff
</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I am looking for tutorials on creating a slideshow with thumbnails, but i need one where i can put the mouse over the thumbnail depending on the direction i am the mouse the thumbnail will move left or right thanks Hi, Following this jQuery slideshow tutorial (Usecase 3 sample, about 2/3 down the page, this is the one without thumbnails): http://www.gcmingati.net/wordpress/w...vwt/index.html I constructed the slideshow: http://backstageweb.net/Salon/slideshowcode.htm ...which works perfectly in browser view locally (FF and IE). When uploaded to the server, however, I've got a static list of photos as you can see. Can someone shed some light on what the problem is? All relevant files are attached (I changed the images to simple colors to get the file size within the attachment limit). Thanks. John I have a "button" that calls formA, which in turns calls formB, all done through javascript. As a button: Code: <input type="button" value="Preview" onClick="popupform();"> works perfectly. Of course the user doesn't want some ugly standard button. They want this beautiful image to show instead (personally, I think the .gif they made looks like barf, but that's besides the point...sorry). When I substitute Code: <input type="image" src="/preview/preview_button.gif" name-"preview" alt="Preview Your Item" border="0" onClick="popupform();"> everything works as it should, except the original form, the one that has the button/image on it, becomes a 404 Object not found. The popupform() sets a bunch of cookies, and calls formB. FormB is a .php which reads the cookies and does some other stuff. Not that it should matter, but I am running everything locally in Vista using the XAMPP Apache Friends Edition and going through localhost (because formB is a .php) Thanks in advance. Hiya, I created this thread on the html forum but I'm not sure if it can be done with javascript, so I'll post here as well. I was wondering if there's a way to make various sections of the image clickable? The sections on the image are not rectangular so I can't make divs. I don't think I can use imagemap either since that only works for making one clickable area right? I already cut out these sections in photoshop and saved them with alpha background, and created a "glowing" version of each section, since I want to make it so that when mouse hovers over it, it will glow. But I can't stack them on top of each other, since if I do that only the topmost layer will be clickable for those areas where they will overlap with rectangular divs. This is example of what I mean: Thanks Hi, im having 2 javascript problems that maybe you guys could help with. my website is: www.pagefrog.net In chrome the drop down works great however on my other laptop using chrome also the drop down is extremely choppy, why is it choppy on one but not the other? - and if you go to www.pagefrog.net/questions.html ive used a togglebox script to expand the answers. This works fine in chrome and safari but in IE8 it just wont expand, why? As an added note the questions script is also really choppy on my 2nd laptop.. Any suggestions are greatly appreciated thank you.. Okay, 3 questions I'm afraid, all in reference to the JQuery Galleria on this page: http://digital.tmhcentral.com/pratt/a... Apologies for my explanations as I am a newby to anything beyond html & css. 1. I have a number of images placed in my html page simply using the img tag. When the page is loading I see these images stacked (full size) for a few seconds before galleria loads and then begins to convert them into thumbnails. Any idea how to hide the images on the page but only to appear in the galleria as the images start to load as thumbnails? 2. I wish to have the same 5px (horizontal) gap between each thumbnail. However my images are of different sizes and have been optimized to a max width or max height. I do not wish for the thumbnails to be cropped so have set: thumb_crop: false, This has now visually created an inconsistent horizontal space between each thumbnail (highlighted in pink to show the gap left and right of each one). I have already attempted to change the thumbnail width to auto in the css, but with no success. How do I remove the 'excess' left & right space from each thumbnail so that the gap appears consistent? 3. Lastly, upon page load, is it possible to hide the main stage image until a thumbnail is selected? I wish to initially display some text (where the main image sits) which is then replaced with the main image when the user clicks on one of the thumbnails. I would appreciate help on any of the above. Thanks in advance, Paul Hi, I'm working on an image slideshow for a website (please see the codes below). So far I've got the big images to change whenever I scroll to a thumbnail. There are two more things/functions I'd like to add to it, 1) make the big images clickable and each links to a webpage and 2) make the big images rotating (from first to last image continuously), but still maintain the ability to view other big images when scrolling over to the thumbnails. Here are the codes: Code:
<html>
<head>
<title>Image Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body>
<table height="15" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="../images/image_thumb01.jpg" alt="" name="thumb01" width="15" height="12" id="thumb01" onMouseOver="MM_swapImage('image','','http://www.chinesebookonline.com/images/Books_T/110812/m_cookbooks65.jpg',1)"></td>
<td><img src="../images/image_thumb02.jpg" alt="" name="thumb02" width="15" height="12" id="thumb02" onMouseOver="MM_swapImage('image','','http://www.chinesebookonline.com/images/Books_T/110812/m_jingdian.jpg',1)"></td>
<td><img src="../images/image_thumb03.jpg" alt="" name="thumb03" width="15" height="12" id="thumb03" onMouseOver="MM_swapImage('image','','http://www.chinesebookonline.com/images/Books_T/110812/m_summerend.jpg',1)"></td>
<td> <img src="../images/image_thumb04.jpg" alt="" name="thumb04" width="15" height="12" id="thumb04" onMouseOver="MM_swapImage('image','','http://www.chinesebookonline.com/images/Books_T/110805/m_weichuan.jpg',1)"></td>
<td><img src="../images/image_thumb05.jpg" alt="" name="thumb05" width="15" height="12" id="thumb05" onMouseOver="MM_swapImage('image','','http://www.chinesebookonline.com/images/Books_T/110805/m_music.jpg',1)"></td>
<td><img src="../images/image_thumb06_off.jpg" width="15" height="12" alt=""></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="http://www.chinesebookonline.com/images/Books_T/110812/m_cookbooks65.jpg" alt="" name="image" id="image" border=""></td>
</tr>
</table>
</body>
</html>
Thanks!!! Hello everyone, I'm trying to add a 5th image to this pre-fabricated script: http://www.javascriptkit.com/script/...tionshow.shtml I added another line similar to ["autumn.jpg", "", "", "Ah the cool breeze of autumn."] for my 5th image but the slideshow doesn't load at all. Once I delete the added line, it loads properly with no problems. I'm guessing there's a stipulation somewhere in the .js file but I can't seem to find what's preventing it from loading 5 images. Please help. Thank you very much. |
|||||||