|
JavaScript - Need Help With Javascript Code For My Clickable Slideshow.
My 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> Similar TutorialsI 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 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> Dear Forum Members HI, I am no coder, however I am modifying my website and changing the slideshow to the one found on this website, most wonderful, the Cut & Paste JavaScript Slideshow( http://www.javascriptkit.com/script/.../jsslide.shtml ) I have it working now, and I have but one question, does the code include a way to limit the number of times that it cycles through the slides? So it just freezes on one photo after x number of cycles? many thanks, and happy holidays... I have called a table through XML with four fields. One of them is Excel file name. I like to make a clickable link with Excel file name to open it. XML code: Code: <?xml version="1.0" encoding="ISO-8859-1" ?>
<searchable_index>
<item name="Ana" title="Data" link="doc\ana.xls">Member</item>
<item name="Ana" title="Data" link="doc\ana.xls">Member</item>
<item name="Ana" title="Data" link="doc\ana.xls">Member</item>
<item name="Ana" title="Data" link="doc\ana.xls">Member</item>
</searchable_index>
Javascript code
document.write('<table border="1" style="width: 100%;">');
document.write('<tr><th>name</th><th>title</th><th>link</th></tr>');
for(var i=0; i<results.length; i++) {
document.write('<tr>');
document.write('<td>' + results[i].getAttribute("name") + '</td>');
document.write('<td>' + results[i].getAttribute("title") + '</td>');
document.write('<td>' + results[i].getAttribute("link")" > + '</td>'); //<a href="url">Link text</a>
document.write('</tr>');
}
document.write('<table>');
document.close();
I found the code for how to create a basic slideshow on javascript kit. It tells you the code for 3 images. I am adding more images to my slide show, but when I go to preview it, it loops through the first 3 pictures only. Is there something else I need to change in order to get it to loop through all my pictures? Here is the code I got from the site: <html> <head> <script type="text/javascript"> <!-- var image1=new Image() image1.src="firstcar.gif" var image2=new Image() image2.src="secondcar" var image3=new Image() image3.src="thirdcar.gif" //--> </script> </head> <body> <img src="firstcar.gif" name="slide" width="100" height="56" /> <script> <!-- //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<3) step++ else step=1 //call function "slideit()" every 2.5 seconds setTimeout("slideit()",2500) } slideit() //--> </script> </body> </html> My code looks like this: <!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" /> <script type="text/javascript"> <!-- var image1=new Image() image1.src="Model01.jpg" var image2=new Image() image2.src="Model02.jpg" var image3=new Image() image3.src="Model03.jpg" var image4=new Image() image4.src="Model04.jpg" var image5=new Image() image5.src="Model05.jpg" var image6=new Image() image6.src="Model06.jpg" var image7=new Image() image7.src="Model07.jpg" var image8=new Image() image8.src="Model08.jpg" var image9=new Image() image9.src="Model09.jpg" var image10=new Image() image10.src="Model10.jpg" var image11=new Image() image11.src="Model11.jpg" var image12=new Image() image12.src="Model12.jpg" var image13=new Image() image13.src="Model13.jpg" var image14=new Image() image14.src="Model14.jpg" var image15=new Image() image15.src="Model15.jpg" var image16=new Image() image16.src="Model16.jpg" var image17=new Image() image17.src="Model17.jpg" var image18=new Image() image18.src="Model18.jpg" var image19=new Image() image19.src="Model19.jpg" var image20=new Image() image20.src="Model20.jpg" //--> </script> <title>Untitled Document</title> </head> <body> <img src="file:///K|/Michaels Homes Web/Images/Model01.jpg" name="slide" width=500 height=375> <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<3) step++ else step=1 //call function "slideit()" every 3.0 seconds setTimeout("slideit()",3000) } slideit() //--> </script> </body> </html> This is just the code for the slideshow, not any of the code from the rest of my website. It does the same thing when I test it either the code only or the whole webpage. If I am missing something in the steps, please let me know. Thanks Hey guys, this should be a very easy fix for someone who knows Javascript (which I don't). The following code allows the class "ul.slideshow-nav li" to control the navigation of the slideshow, I want to adjust this script to allow "ul.slideshow-nav li" AND "ul.slideshow-nav2 li" to do this, possible? Code: $slideshow = {
context: false,
tabs: false,
timeout: 8000,
fx: 'scrollLeft',
slideSpeed: 900,
tabSpeed: 900,
init: function() {
this.context = $('#content-slideshow');
this.tabs = $('ul.slideshow-nav li', this.context);
this.tabs.remove();
this.startSlideshow();
},
startSlideshow: function() {
$('div.slideshow > ul', $slideshow.context).cycle({
fx: $slideshow.fx,
pager: $('ul.slideshow-nav', $slideshow.context),
pagerAnchorBuilder: $slideshow.startTabs,
befo $slideshow.Tabactive,
timeout: $slideshow.timeout,
speed: $slideshow.slideSpeed,
fastOnEvent: $slideshow.tabSpeed,
pauseOnPagerHover: true,
pause: true
});
},
startTabs: function(i, slide) {
return $slideshow.tabs.eq(i);
},
Tabactive: function(currentSlide, nextSlide) {
var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context);
if(activeTab.length) {
$slideshow.tabs.removeClass('on');
activeTab.parent().addClass('on');
}
}
};
$(function() {
$slideshow.init();
});
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 Hey guys; I work as a webmaster for my school and I am trying to develop a JavaScript slideshow for pictures. I am a beginner to JavaScript, so if my coding is off, please let me know. What I am trying to do is have multiple automatic slideshows for this website. I want each of the slideshow boxes to run through the images, however the coding is wrong, causing the first box to switch through the images for the second box and the second one not switching at all. Sorry if thats confusing, please ask if you need any other specifications. Here is my JavaScript coding: //Slideshow //September 18 NewImg = new Array ("Pictures/Sept18/290.jpg", "Pictures/Sept18/293.jpg", "Pictures/Sept18/304.jpg", "Pictures/Sept18/310b.jpg", "Pictures/Sept18/311.jpg", "Pictures/Sept18/317.jpg", "Pictures/Sept18/323.jpg", "Pictures/Sept18/327.jpg", "Pictures/Sept18/328.jpg", "Pictures/Sept18/331.jpg", "Pictures/Sept18/333.jpg", "Pictures/Sept18/337.jpg", "Pictures/Sept18/339.jpg", "Pictures/Sept18/340.jpg", "Pictures/Sept18/342.jpg", "Pictures/Sept18/344.jpg", "Pictures/Sept18/346.jpg", "Pictures/Sept18/351.jpg", "Pictures/Sept18/352.jpg", "Pictures/Sept18/353.jpg", "Pictures/Sept18/354.jpg", "Pictures/Sept18/356.jpg", "Pictures/Sept18/359.jpg", "Pictures/Sept18/360b.jpg", "Pictures/Sept18/361.jpg", "Pictures/Sept18/362.jpg", "Pictures/Sept18/363b.jpg", "Pictures/Sept18/366.jpg", "Pictures/Sept18/370.jpg", "Pictures/Sept18/374b.jpg", "Pictures/Sept18/379.jpg", "Pictures/Sept18/385.jpg", "Pictures/Sept18/391.jpg", "Pictures/Sept18/392.jpg", "Pictures/Sept18/393.jpg", "Pictures/Sept18/394.jpg", "Pictures/Sept18/398.jpg", "Pictures/Sept18/408.jpg", "Pictures/Sept18/410.jpg", "Pictures/Sept18/415.jpg", "Pictures/Sept18/419.jpg", "Pictures/Sept18/427.jpg", "Pictures/Sept18/428b.jpg", "Pictures/Sept18/429.jpg", "Pictures/Sept18/432.jpg", "Pictures/Sept18/435.jpg", "Pictures/Sept18/440.jpg", "Pictures/Sept18/441.jpg", "Pictures/Sept18/443.jpg", "Pictures/Sept18/448.jpg", "Pictures/Sept18/449.jpg", "Pictures/Sept18/450.jpg", "Pictures/Sept18/455.jpg", "Pictures/Sept18/456.jpg", "Pictures/Sept18/460.jpg", "Pictures/Sept18/461.jpg", "Pictures/Sept18/463.jpg", "Pictures/Sept18/467.jpg", "Pictures/Sept18/470.jpg", "Pictures/Sept18/474b.jpg", "Pictures/Sept18/478b.jpg", "Pictures/Sept18/481.jpg", "Pictures/Sept18/484.jpg", "Pictures/Sept18/486.jpg", "Pictures/Sept18/491b.jpg", "Pictures/Sept18/496.jpg", "Pictures/Sept18/498b.jpg", "Pictures/Sept18/503.jpg", "Pictures/Sept18/505b.jpg", "Pictures/Sept18/506b.jpg", "Pictures/Sept18/508.jpg", "Pictures/Sept18/509.jpg", "Pictures/Sept18/514.jpg", "Pictures/Sept18/525b.jpg", "Pictures/Sept18/527.jpg", "Pictures/Sept18/531b.jpg", "Pictures/Sept18/532b.jpg", "Pictures/Sept18/533b.jpg", "Pictures/Sept18/538b.jpg", "Pictures/Sept18/542.jpg", "Pictures/Sept18/544b.jpg", "Pictures/Sept18/547.jpg", "Pictures/Sept18/549.jpg", "Pictures/Sept18/557b.jpg", "Pictures/Sept18/560.jpg", "Pictures/Sept18/565.jpg", "Pictures/Sept18/567.jpg", "Pictures/Sept18/571b.jpg", "Pictures/Sept18/574b.jpg", "Pictures/Sept18/583b.jpg", "Pictures/Sept18/587.jpg", "Pictures/Sept18/588.jpg", "Pictures/Sept18/597b.jpg", "Pictures/Sept18/610b.jpg"); var ImgNum = 0; var ImgLength = NewImg.length - 1; var delay = 2500; var lock = false; var run; function chgImg(direction) { if (document.images) { ImgNum = ImgNum + direction; if (ImgNum > ImgLength) { ImgNum = 0; } if (ImgNum < 0) { ImgNum = ImgLength; } document.sept18.src = NewImg[ImgNum]; } } function auto() { if (lock == false) { lock = true; run = setInterval("chgImg(1)", delay); } } //September 25 NewImg = new Array ("Pictures/Sept25/626b.jpg", "Pictures/Sept25/633.jpg", "Pictures/Sept25/634.jpg", "Pictures/Sept25/636.jpg", "Pictures/Sept25/639.jpg"); var ImgNum = 0; var ImgLength = NewImg.length - 1; var delay = 2500; var lock = false; var run; function chgImg(direction) { if (document.images) { ImgNum = ImgNum + direction; if (ImgNum > ImgLength) { ImgNum = 0; } if (ImgNum < 0) { ImgNum = ImgLength; } document.sept18.src = NewImg[ImgNum]; } } function auto() { if (lock == false) { lock = true; run = setInterval("chgImg(1)", delay); } } And here is where in the HTML the coding is referred to: <?php include 'top.php' ?> <img src="Images/Bar_Images/home.png" class="header" /> <p>Welcome to the TCNJ Women's Club Rugby homepage!</p><br /> <p class="sub">Pictures</p> <div class="box"> <a href="http://www.tcnj.edu/~rugby/sept18.php"><img name="sept18" src="Pictures/Sept18/290.jpg" class="slides" align="left" /></a> <p align="right">September 18th, 2010</p> </div> <div class="box"> <a href="http://www.tcnj.edu/~rugby/sept25.php"><img name="Sept25" src="Pictures/Sept25/626b.jpg" class="slides" align="left" /></a> <p align="right">September 25th, 2010</p> </div> <?php include 'bottom.php' ?> As you can see, I am using PHP to refer to other pages, but the JavaScript coding is referred to in the <head> and the <body> tag is onloading the auto() function. Please help me fix this code, or if it is impossible to do it this way, let me know. Thank you. Hi, Pretty simple problem I hope Ive somehow changed something in my coding on my html page to stop the slide show working correctly. Any ideas heres the link: http://sparekeys.org.uk/ Please help i know its something stupid but I just cant see it. Hi, I don't really know much about Javascript but I was wondering if anyone could tell me how to change this script so when you click on a link it doesn't open in a new window? Any help would be much appreciated! Code: <script language="JavaScript1.1">
<!--
var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}
function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}
//-->
</script><br>
<a href="javascript:gotoshow()"><img src="/images/brochure/2010/homepage_freestyle/Feb/Banner-Paris-special-129.jpg" name="slide" border=0 width=429 height=90></a>
<script>
<!--
//configure the paths of the images, plus corresponding target links
slideshowimages("/images/brochure/2010/homepage_freestyle/Feb/Banner-Paris-special-129.jpg","/images/brochure/2010/homepage_freestyle/Feb/Banner-3-for-1.jpg","/images/brochure/2010/homepage_freestyle/Feb/Banner-London-89.jpg","/images/brochure/2010/homepage_freestyle/Feb/Banner-Brussels-special-155.jpg")
slideshowlinks("/dl/holidayoffers.jsp?destination=DISCOVER_PARIS_BREAKS,RE,TO","/dl/holidayoffers.jsp?destination=MAILER_EUROSTAR_3_FOR_1,RE,TO,","/dl/holidayoffers.jsp?destination=london_rail_breaks,RE,TO,","/dl/holidayoffers.jsp?destination=DISCOVER_BRUSSELS,RE,TO,")
//configure the speed of the slideshow, in miliseconds
var slideshowspeed=3000
var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()
//-->
</script>
<p>
I have created two pages. One with a selection of images one with a working slideshow. How do I get it that a user can select 4 images that are then transferred to the slideshow and played in that slideshow? I appolgise if this is a simple fix but I am very new to JavaScript. Thank you all in advance Ok, I am in a small pickle here. I created a sidebar gadget for work originally with only 4 images that needed to cycle though it. Easy enough script done. Now they have 6 images that need to rotate through. Easy enough again, script done. The issue I have is now I have to re-push this updated html file to all 1000 PC's on my network. Plus every time a change is made I will have to do it again. And we change the images multiple times a month. So what I need help doing if its possible is to modify the html file i am listing below to have a second IF parameter that not only steps the image but also checks to see if the file is even there. This is the spot I need help at. Code: function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<10)
step++
else
step=1
I wanted to add another part to the IF statement like maybe. Code: If (step<10 && file_exists("http://www.akronlibrary.org/Gadget/Gadget Pic 1.bmp"))
Basically a step that checks to see if I have at that moment a file named gadet pic 1. (I would do or statements for all of the file names) The point is to make this whole thing dynamic, so that I change image 1 on the server and every gadget on every PC looking for image 1 now see the new image. This way I just change the image file name when I want a different image to display. Same thing with the var for the slidelink function. points to a static named html file on my web server and I just change the redirect in the static named html file to go where i want it. I am by NO means a programmer, I am actually a network admin that came up with this idea and I am trying to fumble through it. Thanks in advance! Code: <html>
<head>
<meta hrrp-equiv="Content-Type" content="text/html; charset=Unicode" />
<style type="text/css">
body{
margin: 0px;
width: 405px;
height: 205px;
font-family; Georgia;
}
</style>
<script type="text/javascript">
var image1=new Image()
image1.src="http://www.akronlibrary.org/Gadget/Gadget Pic 1.bmp"
var image2=new Image()
image2.src="http://www.akronlibrary.org/Gadget/Gadget Pic 2.bmp"
var image3=new Image()
image3.src="http://www.akronlibrary.org/Gadget/Gadget Pic 3.bmp"
var image4=new Image()
image4.src="http://www.akronlibrary.org/Gadget/Gadget Pic 4.bmp"
var image5=new Image()
image5.src="http://www.akronlibrary.org/Gadget/Gadget Pic 5.bmp"
var image6=new Image()
image6.src="http://www.akronlibrary.org/Gadget/Gadget Pic 6.bmp"
var image7=new Image()
image7.src="http://www.akronlibrary.org/Gadget/Gadget Pic 7.bmp"
var image8=new Image()
image8.src="http://www.akronlibrary.org/Gadget/Gadget Pic 8.bmp"
var image9=new Image()
image9.src="http://www.akronlibrary.org/Gadget/Gadget Pic 9.bmp"
var image10=new Image()
image10.src="http://www.akronlibrary.org/Gadget/Gadget Pic 10.bmp"
</script>
</head>
<body>
<a href="javascript:slidelink()"><img title="Akron-Summit County Public Library" name="slide" /></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<10)
step++
else
step=1
setTimeout("slideit()",6000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 1 Link.html"
else if (whichimage==2)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 2 Link.html"
else if (whichimage==3)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 3 Link.html"
else if (whichimage==4)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 4 Link.html"
else if (whichimage==5)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 5 Link.html"
else if (whichimage==6)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 6 Link.html"
else if (whichimage==7)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 7 Link.html"
else if (whichimage==8)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 8 Link.html"
else if (whichimage==9)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 9 Link.html"
else if (whichimage==10)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 10 Link.html"
}
</script>
</body>
</html>
Hello - My question revolves around a photo slider that will automatically advance to the next photo in a matter of seconds. . . Before you write this thread off as, 'GO GOOGLE IT, THERE'S TONS OF CODE ALREADY OUT THERE IN THREADS LIKE THIS'. . . The tricky part of this is, I already have a photo slider that you advance by a button click and it transitions 2 portions of the page. It is a custom module in Joomla that just basically uses some custom HTML to display a picture on the left and text on the right. . .and you click the button and it advances to another picture and different text to match the image. HERE IS MY CURRENT HTML THAT DISPLAYS THE IMAGE AND TEXT Code: <div class="images"><!-- first slide --> <div><img class="img-slider" src="images/stories/slider_img_1.jpg" border="0" /> <span class="slider-text-indent"> <h3 class="slider-titile">We listen.</h3> <span class="slider-text">Tired of unreliable computer consultants who are impossible to reach, nickel and dime you, and fail to deliver results that you deserve?<br /><br />ABC Computers is here to help you!</span> </span></div> <!-- second slide --> <div><img class="img-slider" src="images/stories/slider_img_2.jpg" border="0" /> <span class="slider-text-indent"> <h3 class="slider-titile">We Guarantee.</h3> <span class="slider-text">We are committed to doing whatever is necessary, period. In our 25 history, we have never had a failed implementation; we guarantee yours will not be the first.</span> </span></div> <!-- third slide --> <div><img class="img-slider" src="images/stories/slider_img_3.jpg" border="0" /> <span class="slider-text-indent"> <h3 class="slider-titile">We Care.</h3> <span class="slider-text">We treat your network as if it was our own. We protect your data as if it was ours. We don't look at your budget as a mine of money; we won't ask you to spend one dollar that we wouldn't spend on our own network!</span> </span></div> </div> <p><a class="backward">prev</a> <a class="forward">next</a></p> <!-- the tabs --> <div class="tabs"><a></a> <a></a> <a></a></div> Again, I would like to make this advance automatically through javascript (or perhaps there's a better way). . . but I do not want to lose the functionality of moving it manually with the button too. Is this possible to do and if so, does anyone have suggestions? Typically this isn't an issue for me to figure out but since I already have it how the client wants it to look, they basically want it to move automatically as if someone pushed the button. . .but still keep the manual button to advance and reverse it. Thank you in advance for any advice or help on this matter. how do i make those two lines go away in the backround? EDIT: UP! http://insidehb.com/main/default.html EDIT: Now works with ie http://www.javascriptkit.com/script/...2/3slide.shtml Hi i have the above image slideshow script running fine on a webpage can anybody tell me how i can get it to run a second time to show a second different slideshow on the same page? Ive tried editing variables but i cant work it out. would be much appreciated Ta Hello, looking for simple javascript slideshow script, similar to this: http://www.jimex.co.jp/veh_details.php?id=4541 I like the mousover effect when the main image is changed once the mouse is over the thumbnails on the right hand side. Has anyone got something like this? Thanks Thanks to Old Pedant , in this forum, I am using this basic code for a slideshow he posted: Code: var slides = [
[ "abc.jpg", 3000 ],
[ "xyz.png", 5000 ],
[ "foo.gif", 1500 ]
];
var curSlide = 0;
function nextSlide( )
{
document.getElementById("thePicture").src = slides[curSlide][0].src;
setTimeout( nextSlide, slides[curSlide][1] );
curSlide = ( curSlide + 1 ) % slides.length;
}
function setUp( )
{
for ( var s = 0; s < slides.length; ++s )
{
var image = new Image();
image.src = slides[s];
slides[s] = image;
}
nextSlide( );
}
window.onload = setUp;
which works just fine. But I can't find a way for it to play one round of the slides then stop. Could someone please help me with the right bit of code to stop the show? I know the code is a bit basic (no fades etc) but I have been unable to find a similar slideshow product that gives variable time delays for each slide. I've googled endlessly but nothing could i find.... TIA Richard ========= I am very new to Javascript - as in this is the first day I'm using it. I am using a code I got offline to fade three pictures together, but when it gets to the last image, it loops back to the first. How do I code it so that when it gets to the last image, it stops? Here is the code - sorry if its messy. Javascript: /***** Image Cross Fade Redux Version 1.0 Last revision: 02.15.2006 steve@slayeroffice.com Please leave this notice intact. Rewrite of old code found he http://slayeroffice.com/code/imageCrossFade/index.html *****/ window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so _init); var d=document, imgs = new Array(), zInterval = null, current=0, pause=false; function so_init() { if(!d.getElementById || !d.createElement)return; // DON'T FORGET TO GRAB THIS FILE AND PLACE IT ON YOUR SERVER IN THE SAME DIRECTORY AS THE JAVASCRIPT! // http://slayeroffice.com/code/imageCrossFade/xfade2.css css = d.createElement("link"); css.setAttribute("href","xfade2.css"); css.setAttribute("rel","stylesheet"); css.setAttribute("type","text/css"); d.getElementsByTagName("head")[0].appendChild(css); imgs = d.getElementById("imageContainer").getElementsByTagName("img"); for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0; imgs[0].style.display = "block"; imgs[0].xOpacity = .99; setTimeout(so_xfade,3000); } function so_xfade() { cOpacity = imgs[current].xOpacity; nIndex = imgs[current+1]?current+1:0; nOpacity = imgs[nIndex].xOpacity; cOpacity-=.05; nOpacity+=.05; imgs[nIndex].style.display = "block"; imgs[current].xOpacity = cOpacity; imgs[nIndex].xOpacity = nOpacity; setOpacity(imgs[current]); setOpacity(imgs[nIndex]); if(cOpacity<=0) { imgs[current].style.display = "none"; current = nIndex; setTimeout(so_xfade,3000); } else { setTimeout(so_xfade,50); } function setOpacity(obj) { if(obj.xOpacity>.99) { obj.xOpacity = .99; return; } obj.style.opacity = obj.xOpacity; obj.style.MozOpacity = obj.xOpacity; obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")"; } } HTML: <!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" xml:lang="en"> <head> <div class="container"> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="imagetoolbar" content="false" /> <link rel="stylesheet" href="style.css" type="text/css" /> <script type="text/javascript" src="slideshow.js"></script> <title>Diamonds in the Rough</title> </head> <body> <div id="container"> <img src="images/top2.jpg" usemap="#Map2"/> <map name="Map2" id="Map2"> <area shape="rect" coords="69,56,145,84" href="invite.html" rel="nofollow" target="_self" alt="The Gala" /> <area shape="rect" coords="171,53,356,87" href="diamonds.html" rel="nofollow" target="_self" alt="Diamonds in the Rough" /> <area shape="rect" coords="377,52,498,87" href="mariama.html" rel="nofollow" target="_self" alt="Speaker Mariama Elliot" /> <area shape="rect" coords="525,52,636,86" href="contact.html" rel="nofollow" target="_self" alt="Get Involved" /> </map> <div id="imageContainer"> <img src="images/index.jpg"/> <img src="images/index2.jpg"/> <img src="images/invite.jpg"/> </div> <div id="container2"> <img src="images/BOTTOM.jpg"/> </div> </body> </html> Thanks for your help! I've created a slideshow on our site using the java template at http://www.javascriptkit.com/script/.../jsslide.shtml Are there simple modifications I can make to this code in order to cause clicking on the image links to go straight to them, rather than creating a new window/tab? Thanks for the help. |
|||||||