I can successfully make a slide show in html but im trying to make two and its not working, here is my code:
<script type="text/javascript">
var image1 = new Image()
image1.src = "img/home/residential.gif"
var image2 = new Image()
image2.src = "img/home/1.gif"
var image3 = new Image()
image3.src = "img/home/2.gif"
</script>
<table align="center" width="70%"cellpadding=5 cellspacing=5>
<tr>
<td rowspan=2 align=center><a href="artistic.html"><figure><img src="logo1.gif" alt="Atristic Impressions" width="400" height="600" name="slide"/><figcaption style="color: #610B21">Artistic Impressions</figure></td>
<script type="text/javascript">
var step=1;
function slide()
{
document.images.slide.src = eval("image"+step+".src");
if(step<3)
step++;
else
step=1;
setTimeout("slide()",5000);
}
slide();
</script>
<script type="text/javascript">
var image1 = new Image()
image1.src = "img/barns/1.gif"
var image2 = new Image()
image2.src = "img/barns/2.gif"
var image3 = new Image()
image3.src = "img/barns/3.gif"
var image4 = new Image()
image4.src = "img/barns/4.gif"
</script>
<td align=center><a href="Barns.html"><figure><img src="img/barns/1.gif" alt="Barn Conversions" width="400" height="300" name="slide"/ ><figcaption style="color: #610B21">Barn Conversions</figure></td>
<script type="text/javascript">
var step=1;
function slideit()
{
document.images.slide.src = eval("image1"+step+".src");
if(step<3)
step++;
else
step=1;
setTimeout("slideit()",5000);
}
slideit();
</script>
Both your <img>s have the name "slide". You should give them different names so that the browser knows which one to work with. Something like "slide1" and "slide2" should do the job.
What is happening is you are using code that is conflicting with itself. You have defined images at a global level, then redefined them later when setting up the second show. You've also duplicated the step variable, although this may not matter so much if you use the same value. You're also affecting the same image using both slider scripts, so the target on one would need to change. A neater way around this is to use a single function adding some parameters so that you can deal with both sets of images and DOM elements.
something like:-
function slide( image_id, image_array) {
myImage = getElementById(image_id);
myImage.src = image_array[step];
}
Of course, there's a lot more to it than that, and there are plenty of examples of better featured image sliders out there that would be capable of running two separate instances. I'd suggest studying some of those.
Related
I am trying to insert image values into the html to replace the src according to the name so if the name for the templateName = Javascript I can make the src value = something like say (http://www.w3devcampus.com/wp-content/uploads/logoAndOther/logo_JavaScript.png) and do that for other categories as well using an if/else statement in javascript.
my script look like this but it has a few errors with the syntax
var imageChoosernator = function () {
if (#templateName == "Javascript")
{
img = <img src="htp://www.w3devcampus.com/wp-content/uploads/logoAndOther/logo_JavaScript.png">;
}
` }
Can someone guide me toward the proper solution?
# in #templateName is wrong. Know your allowed variable characters.
img = <img the <img is an unstarted String. Know how to enclose values into String.
` <<< you cannot have such character floating around your code (hopefully just an edit typo).
Since you didn't showed most of your code, a fix would be something like:
var img = "";
var templateName = "Javascript";
function imageChoosernator () {
if (templateName === "Javascript") { // remove unallowed #
img = '<img src="js.png">'; // enclose into String
} else {
img = '<img src="someting.png">';
}
// Finally append img to element #imgContainer
document.querySelector("#imgContainer").insertAdjacentHTML("beforeend", img );
}
imageChoosernator(); // Do the magic
You can use jQuery .prepend() method to replace the image src on loading the query into the page.
If in html you have given the id name as 'JavaScript' like-
div id="JavaScript"><img id="imgNew1" src="oldImg1.png" />
div id="templateName2"><img id="imgNew2" src="oldImg2.png" />
To change the image source following can be used-
$('#templateName1').prepend('<img id="imgNew" src="newImg1.png" />')
$('#templateName2').prepend('<img id="imgNew" src="newImg2.png" />')
You need to read the documentation here
To automatize the src change while creating intances of the same will go like-
<html>
<head>
<script type="text/javascript">
var slideimages = new Array() // create new array to preload images
slideimages[0] = new Image() // create new instance of image object
slideimages[0].src = "firstImg.png" // set image object src property to an image's src, preloading that image in the process
slideimages[1] = new Image()
slideimages[1].src = "secondcarImg.png"
slideimages[2] = new Image()
slideimages[2].src = "thirdImg.png"
</script>
</head>
<body>
<img src="firstImg.img" id="slide" width=100 height=56 />
<script type="text/javascript">
//variable that will increment through the images
var step = 0
var whichimage = 0
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.getElementById('slide').src = slideimages[step].src
whichimage = step
if (step<2)
step++
else
step=0
}
</script>
</body>
</html>
My teacher told me that I cannot put Onclick and OnMouseover etc in my html? I need to put it into my .JS fille? After some search on google everyone is doing the same thing like I'm? I can only use Javascript
Can anyone help me out?
<script type="text/javascript">
var pauseSlider=false;
var image = []
image[0]=new Image()
image[0].src = "./images/1.jpg"
image[1]=new Image()
image[1].src = "./images/2.jpg"
image[2]=new Image()
image[2].src = "./images/3.jpg"
image[3]=new Image()
image[3].src = "./images/4.jpg"
</script>
This is my preloading (html, can stay there)
<img src="./images/1.jpg" name="slide" onmouseover="pauseSlider=true" onmouseout="pauseSlider=false" onclick="slideNext()" width=960 height=500>
So this is my 'mistake' I have to put 'onclick' and onmouseover etc in my .JS fille, I don't know how and where!
var step = 1
document.getElementsByName'slide'
function slideit(){
if(!pauseSlider)
{
slideNext()
}
setTimeout("slideit()",2500)
}
function slideNext()
{
var slideimage = document.getElementsByName("slide")[0];
slideimage.src=image[step].src
if (step<image.length-1)
step++
else
step=0
}
This is my Javascript file (it's a imageslider)
I hope i've followed the rules, not sure about the 'code block'
I thank you!
Something like this:
var slideimage = document.getElementsByName("slide")[0];
slideimage.onclick = function() { ...... };
there many ways to bind events, described here
http://triaslama.wordpress.com/2008/07/22/four-ways-javascript-binding-event-listeners/
Add an id to your slide container...
<div id="slider">
<img src="./images/1.jpg" name="slide" onmouseover="pauseSlider=true" onmouseout="pauseSlider=false" onclick="slideNext()" width=960 height=500>
</div>
Then add your javascript like this...
window.onload = function(){
var slider = document.getElementById('slider');
slider.onclick = slidenext;
slider.onmouseover = function(){pauseslider = true;};
slider.onmouseout = function(){pauseslider = true;};
};
i suppose you might wanna try element.addEventListener(event, cbfunction, boolean);
https://developer.mozilla.org/it/docs/DOM/element.addEventListener
I am trying to make a image slide show and I am passing urls of the images through a List in a Model.
List<string>
Onload I want to assign these URL values to JavaScript variables.
var image1=new Image()
var image2=new Image()
var image3=new Image()
My question is, how can I assign this list of URLs to the above variables, normally I can do this:
image1.src="value.jpg"
How can assign the value using Razor within JavaScript?
This razor code will create an image object with the index for each element in your List of strings and will set its src property.
<script>
#for (var idx = 1; idx <= Model.ListOfImages.Length; ++ i) {
<text>
var image#(idx) = new Image();
image#(idx).src = '#Model.ListOfImages[idx]';
</text>
}
</script>
Of course you will want to wrap it in the script tag. The output will be JavaScript that looks something like this:
<script>
var image1 = new Image();
image1 = 'image1.jpeg';
var image2 = new Image();
image2 = 'image1.jpeg';
var image3 = new Image();
image3 = 'image1.jpeg';
</script>
A couple of ways to solve this:
Use Razor to generate JavaScript
<script type="text/javascript">
var images = [], image;
#foreach (var image in ListOfImages)
{
image = new Image();
image.src = #image.url;
images.push(image);
}
</script>
Use Razor to generate HTML, then have JavaScript use the HTML for the slideshow
<div class="slideshow">
<ol>
#foreach (var image in ListOfImages)
{
<li><img src="#image.url"></li>
}
</ol>
Prev
Next
</div>
<script type="text/javascript">
// some imaginary jQuery plugin to create a slideshow
$(".slideshow").slideshow();
</script>
I'm partial to solution #2. I try to avoid having a server side templating language generate code in more than one language if at all possible. In solution #2, Razor is just generating HTML.
Is it possible to assign a Javascript image object directly to the DOM? Every example I've seen has the image object being loaded and then the same file name assigned to an HTML element and my understanding is that the actual image data is coming from the browser cache in the filing system.
I want to guarantee that the image is loaded so I want to load it into a Javascript image object have the data in memory and then add it directly to the page.
Is this possible?
Cheers, Ian.
You can create the image element and append it directly to the DOM once it has loaded:
var image = new Image();
image.onload = function(){
document.body.appendChild(image);
};
image.src = 'http://www.google.com/logos/2011/guitar11-hp-sprite.png';
example: http://jsfiddle.net/H2k5W/3/
See:
<html>
<head>
<script language = "JavaScript">
function preloader()
{
heavyImage = new Image();
heavyImage.src = "heavyimagefile.jpg";
}
</script>
</head>
<body onLoad="javascript:preloader()">
<a href="#" onMouseOver="javascript:document.img01.src='heavyimagefile.jpg'">
<img name="img01" src="justanotherfile.jpg"></a>
</body>
</html>
Reference:
http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317
if (document.images) {
var preload_image_object = new Image();
var image_urls = new Array();
image_urls[0] = "http://mydomain.com/image0.gif";
image_urls[1] = "http://mydomain.com/image1.gif";
image_urls[2] = "http://mydomain.com/image2.gif";
image_urls[3] = "http://mydomain.com/image3.gif";
var i = 0;
for(image_url in image_urls) {
preload_image_object.src = image_url;
}
}
I have the following code:
<script type="text/javascript">
var image1=new Image()
image1.src="images/natandadam.jpg"
var image2=new Image()
image2.src="images/gardaa.jpg"
var image3=new Image()
image3.src="images/marmaris.jpg"
var image4=new Image()
image4.src="images/gardab.jpg"
var image5=new Image()
image5.src="images/engagement.jpg"
var image6=new Image()
image6.src="images/gardac.jpg"
var image7=new Image()
image7.src="images/natandadamlake.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<7) {
step++;
} else {
step=1;
}
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500);
}
slideit();
//-->
</script>
...and this calls it:
<img style="border:6px double #545565;" src="gardaa.jpg" name="slide" width=600 height=400>
I want it to continue skipping through the images but it stops on the last one. It used to repeat when it only had three images; Now I've added more its stopped.
what do I change to make them repeat?
You can simplify your script quite a bit:
<script type="text/javascript">
var images ="natandadam.jpg,gardaa.jpg,marmaris.jpg,gardab.jpg,engagement.jpg,gardac.jpg,natandadamlake.jpg".split(",")
var step=1
function slideit(){
document.images.slide.src="images/" + images[step]
step++
if(step>images.length) {
step = 1
}
setTimeout(function(){slideit()},2500);
}
slideit();
</script>
A few tips:
1 - you don't need to use <!-- and //--> to hide your script. The only browser that required this died in the 90s.
2 - don't use eval(), it's evil.
3 - since the images are now in an array, you can check add or remove and many as you wish without having to use if (step<7). The code just inspects the length of the array.
4 - Use what is called an anonymous function in setTimeout instead of quoting code. Quoting code uses eval() internally.