|
JavaScript - Javascript Slideshow | Change To Onload Autostart
Hello can please help convert this real simple slide show so that is plays immediately on page load. Thank you
PHP Code: var ImgNum = 0; var ImgLength = NewImg.length - 1; //Time delay between Slides in milliseconds var delay = 7000; 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.slideshow.src = NewImg[ImgNum]; } } function auto() { if (lock == true) { lock = false; window.clearInterval(run); } else if (lock == false) { lock = true; run = setInterval("chgImg(1)", delay); } } Similar TutorialsHello Can anyone help with the following problem On the following page http://www.stroudskittles.co.uk/signingon.html I have a Body onload event (to load the chained Menu) and a windows.onload event (to load the IFrame Ticker) If I open the page in Internet explorer both scripts function; however in Firefox I'm having problems. The Chained Menu works, however the IFrame Ticker does not display. Both events ahave ben placed on the boady tag. Can anyone advise how I can get both to display in Firefox Can anyone I have a simple html document that is dynamically created. It comes to me like this: <body> 432 (Locked) (Disabled) <br /> 545 (Unlocked) (Enabled) <br /> 756 (Unlocked) (Disabled) <br /> </body> The actual list is much longer and varies in length. What I am attempting to do is when a user opens the page, if a line contains Locked or Disabled, change the color of those words (or the whole line that contains them) to red. Thanks Hi I am new to javascript and designing websites as a whole. I have been playing around with a drag and drop java script from this site: http://www.redips.net/javascript/dra...table-content/ A switch content setting is currently available to check in a checklist: <input name="drop_option" type="radio" class="checkbox" title="Switch content" onclick="set_drop_option(this)" value="switch"/> I wan it to run without any checklist or button whatsoever just from the page load. I am not sure how I would do this. Any suggestions? Thank you Jonathan Hi, I need to use more than one javascripts that use onload event. Every time I try this only one from these scripts work correctly. How can I make these scripts work together? 1) Code: var kmrSimpleTabs = {
sbContainerClass: "simpleTabs",
sbNavClass: "simpleTabsNavigation",
sbContentClass: "simpleTabsContent",
sbCurrentNavClass: "current",
sbCurrentTabClass: "currentTab",
sbIdPrefix: "tabber",
init: function(){
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
var containerDiv = document.getElementsByTagName("div");
for(var i=0; i<containerDiv.length; i++){
if (containerDiv[i].className == kmrSimpleTabs.sbContainerClass) {
// assign a unique ID for this tab block and then grab it
containerDiv[i].setAttribute("id",kmrSimpleTabs.sbIdPrefix+[i]);
var containerDivId = containerDiv[i].getAttribute("id");
// Navigation
var ul = containerDiv[i].getElementsByTagName("ul");
for(var j=0; j<ul.length; j++){
if (ul[j].className == kmrSimpleTabs.sbNavClass) {
var a = ul[j].getElementsByTagName("a");
for(var k=0; k<a.length; k++){
a[k].setAttribute("id",containerDivId+"_a_"+k);
// get current
if(kmrSimpleTabs.readCookie('simpleTabsCookie')){
var cookieElements = kmrSimpleTabs.readCookie('simpleTabsCookie').split("_");
var curTabCont = cookieElements[1];
var curAnchor = cookieElements[2];
if(a[k].parentNode.parentNode.parentNode.getAttribute("id")==kmrSimpleTabs.sbIdPrefix+curTabCont){
if(a[k].getAttribute("id")==kmrSimpleTabs.sbIdPrefix+curTabCont+"_a_"+curAnchor){
a[k].className = kmrSimpleTabs.sbCurrentNavClass;
} else {
a[k].className = "";
}
} else {
a[0].className = kmrSimpleTabs.sbCurrentNavClass;
}
} else {
a[0].className = kmrSimpleTabs.sbCurrentNavClass;
}
a[k].onclick = function(){
kmrSimpleTabs.setCurrent(this,'simpleTabsCookie');
return false;
}
}
}
}
// Tab Content
var div = containerDiv[i].getElementsByTagName("div");
var countDivs = 0;
for(var l=0; l<div.length; l++){
if (div[l].className == kmrSimpleTabs.sbContentClass) {
div[l].setAttribute("id",containerDivId+"_div_"+[countDivs]);
if(kmrSimpleTabs.readCookie('simpleTabsCookie')){
var cookieElements = kmrSimpleTabs.readCookie('simpleTabsCookie').split("_");
var curTabCont = cookieElements[1];
var curAnchor = cookieElements[2];
if(div[l].parentNode.getAttribute("id")==kmrSimpleTabs.sbIdPrefix+curTabCont){
if(div[l].getAttribute("id")==kmrSimpleTabs.sbIdPrefix+curTabCont+"_div_"+curAnchor){
div[l].className = kmrSimpleTabs.sbContentClass+" "+kmrSimpleTabs.sbCurrentTabClass;
} else {
div[l].className = kmrSimpleTabs.sbContentClass;
}
} else {
div[0].className = kmrSimpleTabs.sbContentClass+" "+kmrSimpleTabs.sbCurrentTabClass;
}
} else {
div[0].className = kmrSimpleTabs.sbContentClass+" "+kmrSimpleTabs.sbCurrentTabClass;
}
countDivs++;
}
}
// End navigation and content block handling
}
}
},
// Function to set the current tab
setCurrent: function(elm,cookie){
this.eraseCookie(cookie);
//get container ID
var thisContainerID = elm.parentNode.parentNode.parentNode.getAttribute("id");
// get current anchor position
var regExpAnchor = thisContainerID+"_a_";
var thisLinkPosition = elm.getAttribute("id").replace(regExpAnchor,"");
// change to clicked anchor
var otherLinks = elm.parentNode.parentNode.getElementsByTagName("a");
for(var n=0; n<otherLinks.length; n++){
otherLinks[n].className = "";
}
elm.className = kmrSimpleTabs.sbCurrentNavClass;
// change to associated div
var otherDivs = document.getElementById(thisContainerID).getElementsByTagName("div");
var RegExpForContentClass = new RegExp(kmrSimpleTabs.sbContentClass);
for(var i=0; i<otherDivs.length; i++){
if ( RegExpForContentClass.test(otherDivs[i].className) ) {
otherDivs[i].className = kmrSimpleTabs.sbContentClass;
}
}
document.getElementById(thisContainerID+"_div_"+thisLinkPosition).className = kmrSimpleTabs.sbContentClass+" "+kmrSimpleTabs.sbCurrentTabClass;
// get Tabs container ID
var RegExpForPrefix = new RegExp(kmrSimpleTabs.sbIdPrefix);
var thisContainerPosition = thisContainerID.replace(RegExpForPrefix,"");
// set cookie
this.createCookie(cookie,'simpleTabsCookie_'+thisContainerPosition+'_'+thisLinkPosition,1);
},
// Cookies
createCookie: function(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
},
readCookie: function(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
},
eraseCookie: function(name) {
this.createCookie(name,"",-1);
},
// Loader
addLoadEvent: function(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
// END
};
// Load SimpleTabs
kmrSimpleTabs.addLoadEvent(kmrSimpleTabs.init);
2) Code: function hideMessage() {
document.getElementById("thanks").style.display="none";
}
function startTimer() {
var tim = window.setTimeout("hideMessage()", 5000); // 5000 milliseconds = 5 seconds
}
3) Code: var ids=new Array();
function QAinit(){
if(document.getElementById){
var tids=document.getElementsByTagName('div');
for(i=0;i<tids.length;i++)if(tids[i].className=="question")ids[ids.length]=tids[i];
for(i=0;i<ids.length;i++)ids[i].onmouseup=setstate;
}}
function setstate(){
for(i=0;i<ids.length;i++){
if(ids[i]==this){
var d=this.parentNode.getElementsByTagName('div')[1];
if(d.style.display=="block")d.style.display="none";
else d.style.display="block";
}}}
function expandall(){
if(document.getElementById){
for(i=0;i<ids.length;i++)ids[i].parentNode.getElementsByTagName('div')[1].style.display="block";
}}
function collapseall(){
if(document.getElementById){
for(i=0;i<ids.length;i++)ids[i].parentNode.getElementsByTagName('div')[1].style.display="none";
}}
window.onload=QAinit;
Can anyone please help? Hi, I am trying to get a javascript if else function to initiate during the page onload. In IE the if command doesn't work if I add an else command (the command shown though the session value is set to comply with the if command). While when using Firefox neither works. Any help would be fantastic. Code: <?php
session_start();
$_SESSION['ID']='x';
?>
<html>
<head>
<script type="text/javascript">
if ($_SESSION['ID']=='x'){
function loadXMLDoc()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
}
else{
function loadXMLDoc()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_mine.txt",true);
xmlhttp.send();
}
}
</script>
</head>
<body onload="loadXMLDoc()">
<div id="myDiv"><h2>Page Loading</h2></div>
</body>
</html>
The ajax_info.txt file and the ajax_mine.txt file both show basic information only. When I call my controller function template it should select the template name from database and find the matching image.png Currently when I call the function from view via json it only displays no_image.png even though both links work. I have echoed and tested. For my controller it is CodeIgniter Based. How can I get my json script code work. It is calling URL fine. If image name does not match the $this->input->get('template') name should display no image. Codeigniter Controller Function Code: public function template() {
$this->load->library('response');
if ($this->input->server('HTTPS')) {
$server = HTTPS_SERVER;
} else {
$server = HTTP_SERVER;
}
if (is_file(FCPATH . '/image/' . 'templates/' . basename($this->input->get('template')) . '.png')) {
$this->response->setOutput($server . 'image/templates/' . basename($this->input->get('template')) . '.png');
} else {
$this->response->setOutput($server . 'image/no_image.jpg');
}
}
View Code: <div class="form-group">
<label class="col-sm-2 control-label" for="input-template"><?php echo $entry_template; ?></label>
<div class="col-sm-10">
<select name="config_template" id="input-template" class="form-control">
<?php foreach ($templates as $template) { ?>
<?php if ($template == $config_template) { ?>
<option value="<?php echo $template; ?>" selected="selected"><?php echo $template; ?></option>
<?php } else { ?>
<option value="<?php echo $template; ?>"><?php echo $template; ?></option>
<?php } ?>
<?php } ?>
</select>
<br />
<img src="" alt="" id="template" class="img-thumbnail" />
</div>
</div>
</div><!-- / End Tab Website -->
<div class="tab-pane" id="tab-local">
</div>
<div class="tab-pane" id="tab-option">Option</div>
<div class="tab-pane" id="tab-server">Server</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript"><!--
$('select[name=\'config_template\']').on('change', function() {
$.ajax({
url: 'http://localhost/codeigniter/admin/?c=website/&m=template&template=' + encodeURIComponent(this.value),
dataType: 'html',
beforeSend: function() {
$('select[name=\'country_id\']').after(' <i class="fa fa-circle-o-notch fa-spin"></i>');
},
complete: function() {
$('.fa-spin').remove();
},
success: function(html) {
$('.fa-spin').remove();
$('#template').attr('src', html);
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
});
$('select[name=\'config_template\']').trigger('change');
//--></script>
Okay so i need help getting this video to autostart. Here is the code Code: <script type='text/javascript' src='http://s3.amazonaws.com/mem_vid/sw4fobject.js'></script>
<div id='mediaspace221'>This text will be replaced</div>
<!--Where it says /player.swf is where you specify the player that you uploaded in step 2b
-->
<script type='text/javascript'>
var so = new SWFObject('http://s3.amazonaws.com/player.swf','mpl','470','290','9');
so.addParam('autostart','true');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
<!--This next line is where you specify your video file (uploaded in step 2c). For .flv files, you must write it as below ('e'), *without* the extension.
-->
so.addVariable('file','flv:intro');
<!--This next line is where you point to your streaming distribution on cloudfront (done in step 3 above). NOTE: you *MUST* add "/cfx/st/" for it to work. This specifies it is a cloudfront object (cfx) and that it is to be streamed (st). This is the URL of the streaming distribution--it ends with .cloudfront.net. In the example above, I would write: 'rtmp:// s1jng0.cloudfront.net/cfx/st/'
-->
so.addVariable('streamer','rtmp://s28a90vrw5net/cfx/st/intro.flv');
so.write('mediaspace221');
so.start
</script>
Ive tried adding the following parameter and it did not work Code: so.addParam('autostart','true');
Hello all, I am new here and have a question about a AP Div I am using as a dropin. It drops in when the page loads and I would like it to only drop in if a visitor clicks a link I designate as the dropin link. Can someone please tell me how to accomplish this? I am pasting in the js file and I will also need to know how to set up the "a href" link to call the dropin! Thanks is advance for any help you may give! Code: // JavaScript Document
var ie=document.all
var dom=document.getElementById
var ns4=document.layers
var calunits=document.layers? "" : "px"
var bouncelimit=32 //(must be divisible by 8)
var direction="up"
function initbox(){
if (!dom&&!ie&&!ns4)
return
crossobj=(dom)?document.getElementById("dropin").style : ie? document.all.dropin : document.dropin
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossobj.top=scroll_top-250+calunits
crossobj.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropin()",50)
}
function dropin(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossobj.top)<100+scroll_top)
crossobj.top=parseInt(crossobj.top)+40+calunits
else{
clearInterval(dropstart)
bouncestart=setInterval("bouncein()",50)
}
}
function bouncein(){
crossobj.top=parseInt(crossobj.top)-bouncelimit+calunits
if (bouncelimit<0)
bouncelimit+=8
bouncelimit=bouncelimit*-1
if (bouncelimit==0){
clearInterval(bouncestart)
}
}
function dismissbox(){
if (window.bouncestart) clearInterval(bouncestart)
crossobj.visibility="hidden"
}
function truebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
window.onload=window.setTimeout(initbox,5000);
I have music set to start playing when my website starts up...is there any way to keep it from restarting everytime I go back to the home page through clicking the home link from another page?
I have the following javascript function: [ function addNewWindowEvent(evType, fn) { if (window.addEventListener) { this.addEventListener("load", fn, false); return true; } else if (window.attachEvent) { var onload = "onload" this.attachEvent(onload, fn); return true; } else { return false; } } ] which is giving me a an exception every time a page on our site loads. The actual exception in firefox is this: uncaught exception: [Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: https://cms-dev.stchas.edu/global/js/hdvscripts.js :: addNewWindowEvent :: line 5" data: no] and I'm not sure exactly what it's complaining about. I'm relatively new to javascript so diagnosing and fixing this problem has me quite puzzled, and so far I have been unable to find anything helpful when I try and google for information on this. I would appreciate any help or suggestions. Thanks. henryv 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. 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 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>
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. 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. 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 Hi there, I am currently creating my first ever website and I am attempting to put in some javascript but I am having trouble, would it be possible for someone to guide me. I am trying to implement a slideshow but at the moment all I am getting is the first picture only, here is the code... Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Lyons Design and Print</title>
<style type="text/css" media="all">
body
{
background-image:url('background.jpg');
}
.header {
font-size: 24pt;
font-weight: bold;
padding: 20px;
border-bottom: 1px solid #000;
text-align:center;
}
#nav {
margin:0;
padding:0;
float:left;
width:100%;
border:1px solid #42432d
border-width:1px 0;
text-align: center;
}
#nav li {
display:inline-block;
padding:0;
margin:0;
}
* html #nav li { display: inline; }
*+html #nav li { display: inline; }
#nav a:link,
#nav a:visited {
color:#000;
background:#0033CC;
padding:20px 40px 4px 10px;
float:left;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-shadow: 2px 2px 2px #555;
}
#nav a:hover,
#nav a:focus {
color:#fff;
background:#0033CC;
}
#nav li:first-child a {
border-left:1px solid #42432d;
}
#home #nav-home a,
#large format printing #nav-large format printing a,
#scanning #nav-scanning a,
#thermal inkjet printing and plotting #nav-thermal inkjet printing and plotting a,
#large format photo copying #nav-large format photo copying a,
#contacts #nav-contacts a,
#about us #nav-about us a {
background:#e35a00;
color:#fff;
text-shadow:none;
}
#home #nav-home a:hover,
#large format printing #nav-large format printing a:hover,
#scanning #nav-scanning a:hover,
#thermal inkjet printing and plotting #nav-thermal inkjet printing and plotting a:hover,
#large format photo copying #nav-large format photo copying a:hover,
#contacts #nav-contacts a:hover,
#about us #nav-about us a:hover {
background:#e35a00;
}
#nav a:active {
background:#e35a00;
color:#fff;
}
p{
font-family: Verdana, Geneva, sans-serif;
font-style: oblique;
font-weight: normal;
font-size: 16px;
letter-spacing: normal;
line-height: normal;
text-transform: none;
text-decoration: none;
text-align: center;
}
p{
font-family: Verdana, Geneva, sans-serif;
font-style: oblique;
font-weight: normal;
font-size: 16px;
letter-spacing: normal;
line-height: normal;
text-transform: none;
text-decoration: none;
text-align: center;
}
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="DesignPrinter.jpg"
var image2=new Image()
image2.src="print-design.jpg"
var image3=new Image()
image3.src="printingpress.jpg"
var image4=new Image()
image4.src="thermal.jpg"
//-->
</script>
<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>
</style>
</head>
<body>
<div class="header"><img src="logo.jpg"></div>
<ul id="nav">
<li id="nav-Home"><a href="Home.html">Home</a></li>
<li id="nav-Large Format Printing"><a href="Large Format Printing.html">Large Format Printing</a></li>
<li id="nav-Scanning"><a href="Scanning.html">Scanning</a></li>
<li id="nav-Thermal Inkjet Printing and Plotting"><a href="Thermal Inkjet Printing and Plotting.html">Thermal Inkjet Printing and Plotting</a></li>
<li id="nav-Large Format Photo Copying"><a href="Large Format Photo Copying.html">Large Format Photo Copying</a></li>
<li id="nav-Contacts"><a href="#">Contacts</a></li>
<li id="nav-About Us"><a href="#">About Us</a></li></ul>
<table border="0" cellpadding="0" cellspacing="0" height="300"><tr><td id="maincontent" valign="top">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a. </p>
<p align="center"><img src="DesignPrinter.jpg" name="slide" width=300 height=300></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate </p>
<embed src="beatles.mid" width="144" height="60">
</body>
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'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. |
|||||||