I am trying to make a responsive slider for mobile version.
Site was developed using angular JS.
When I am trying to integrate the JQuery sliders, total site was distubing because of Bootstrap CSS file.
So, in that part I founded a plain Javascript code. And in this how to make those images responsive.
Below I am adding the code.
<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 = "images/slide/1.jpg" // set image object src property to an image's src, preloading that image in the process
slideimages[1] = new Image()
slideimages[1].src = "images/slide/2.jpg"
slideimages[2] = new Image()
slideimages[2].src = "images/slide/2.jpg"
</script>
</head>
<body>
<img src="firstcar.gif" 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
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
function slidelink(){
if (whichimage == 0)
window.location = "#"
else if (whichimage == 1)
window.location = "#"
else if (whichimage == 2)
window.location = "#"
}
slideit()
</script>
Previous answers are correct but you have to use $ for jQuery:
$(slideimages[0]).addClass("img-responsive");
WIthout jQuery:
slideimages[0].className += "img-responsive";
To add a class, just use addClass:
slideimages[0].addClass("img-responsive");
Are you just trying to add a class? I don't quite understand your question.
EDITED you simply need to do this:
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.getElementById('slide').src = slideimages[step].src
document.getElementById('slide').className = "img-responsive";
whichimage = step
if (step<2)
step++
else
step=0
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
Related
I need to on the click of the first image, for it to switch to the second image, and then on the click of that to switch to the third image and so on and so on.
I have this so far, and it only goes to the second image and stops there, or goes instantly to the third...
<img id="imgClickAndChange" class="art_shop" name="pic" src="images/edited_images/1.jpg" style="display: none;" onClick="changeImage();changeImageAgain();">
<script language="javascript">
function changeImage() {
if (document.getElementById("imgClickAndChange").src = "images/edited_images/1.jpg")
{
document.getElementById("imgClickAndChange").src = "images/edited_images/2.jpg";
}
}
</script>
<script language="javascript">
function changeImageAgain() {
if (document.getElementById("imgClickAndChange").src == "images/edited_images/2.jpg")
{
document.getElementById("imgClickAndChange").src = "images/edited_images/3.jpg";
}
}
</script>
I have also this example, which i pulled from another thing i did a while ago. It's an image slider, with the images already stored in the header, and they load the new image in every X seconds. Is there any way to modify this to load the next image on the click of a button (or the image itself) as opposed to it being timed? Either solution would work. Thanks
<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 = "images/edited_images/1.jpg" // set image src property to image path, preloading image in the process
slideimages[1] = new Image()
slideimages[1].src = "images/edited_images/2.jpg"
slideimages[2] = new Image()
slideimages[2].src = "images/edited_images/3.jpg"
slideimages[3] = new Image()
slideimages[3].src = "images/edited_images/4.jpg"
</script>
</head>
<img id="imgClickAndChange" class="art_shop" name="pic" src="images/edited_images/1.jpg" style="display: none;" onClick="changeImage();changeImageAgain();">
<script type="text/javascript">
//variable that will incement through the images
var step=0
function slideit(){
if (!document.images)
return
document.getElementById('imgClickAndChange').src = slideimages[step].src
if (step<1)
document.getElementById('imgClickAndChange').src = slideimages[step].src
if (step<2)
document.getElementById('imgClickAndChange').src = slideimages[step].src
if (step<3)
step++
else
step=0
setTimeout("slideit()",1000)
}
slideit()
</script>
You can make it much simpler. Also I would not recommend preloading the images as it slows down your pageload.
Try this:
EDIT: without looping
<img id="imgClickAndChange" class="art_shop" name="pic" onClick="changeImage()">
<script>
// image sources in array. image[0] will have first image src, image[3] will have last src
var images = [
"images/edited_images/1.jpg",
"images/edited_images/2.jpg",
"images/edited_images/3.jpg",
"images/edited_images/4.jpg"
]
var step = 0;
changeImage(); // set first image src after page loads
function changeImage() {
// exit if no images, or step = number of items in array (4)
if (typeof images == "undefined" || step == images.length) return;
document.getElementById('imgClickAndChange').src = images[step];
step++;
}
</script>
I have been creating a site for a school project. I have everything pretty much done except for the slideshow. I have the javascript in and ready and the photos are sliding fine, but I wanted to know if there was a way to make the photos fade in and out and where I should put the "fade" function in the code? I am sure its pretty easy, but can't figure it out
I looked at the other example and I think it ahs something to do with the opacity feature, but not sure where to put it in this project?
Here is the code:
<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 = "images/jambalaya.png" // set image object src property to an image's src, preloading that image in the process
slideimages[1] = new Image()
slideimages[1].src = "images/sucio_rice.png"
</script>
</head>
<script type="text/javascript">
var step=0
function slideit(){
if (!document.images)
return
document.getElementById('slide').src = slideimages[step].src
if (step<1)
step++
else
step=0
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
</script>
</head>
<body onLoad="MM_preloadImages('images/home_btn2.png')">
<div id="header">
<h1>
<img src="images/crab_logo_edit.png" width="652" height="140" alt="Singing Crab" />
</h1>
</div>
<div id="content" class="wrap_home">
<h2>Arriba!</h2>
<div id="slideshow">
<img src="images/jambalaya.png" id="slide" width="400" height="330" alt="Marsa Alam" />
</div>
<p>There's always a fiesta at The Singing Crab—The best Cajun food Louisiana has to offer! Heavy on the spices, The Singing Crab has the absolute best that Cajun has to offer.</p>
<h2>You'll love it. We just guarantee.</h2>
<script type="text/javascript">
//variable that will increment through the images
var step=0
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.getElementById('slide').src = slideimages[step].src
if (step<1)
step++
else
step=0
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
</script>
</div>
Um.. Didn't get why do you have 2 slideIt() functions declared, but any way, just rewrite this function to
function slideit(){
if (!document.images) return;
$('#slide').fadeOut(150,function(){
$('#slide').attr('src', slideimages[step].src);
$('#slide').fadeIn(150);
});
step = step < 0 ? step++ : 0;
}
var intervalId = setInterval(slideIt, 2500);
This is the jQuery solution, much shorter, much more beautiful than pure js. But you can make it with js only and no libs, just add this func to your code
function fade( elem, time ){
var startOpacity = elem.style.opacity || 1;
elem.style.opacity = startOpacity;
(function go() {
elem.style.opacity -= startOpacity / ( time / 100 );
elem.style.filter = 'alpha(opacity=' + elem.style.opacity * 100 + ')';
if( elem.style.opacity > 0 )
setTimeout( go, 100 );
else
elem.style.display = 'none';
})();
}
And manipulate with it instead of jQuery fadeIn/fadeOut functions.
You can pick each, but i advise you jQuery.
I want to put a simple slider on orchard. I have write the code and It is working on my computer. but when I add it to orchard CMS it doesn't work. can any one help me please. the asp version is 4.5 and iis 7.5 windows server 2008. here is the code:
<html>
<head>
<script type="text/javascript">
var slideimages = new Array() // create new array to preload images
var slidenum=2
slideimages[0] = new Image() // create new instance of image object
slideimages[0].src = "emkanat1.JPG" // set image object src property to an image's src, preloading that image in the process
slideimages[1] = new Image()
slideimages[1].src = "emkanat2.JPG"
slideimages[2] = new Image()
slideimages[2].src = "emkanat3.JPG"
</script>
</head>
<body>
<div style="display: block; width:940px; height:356px;">
<img src="emkanat1.JPG" id="slide" width="940px" height="356px" />
<div >
<img style="position:absolute; margin-top: 150px; margin-left: 10px;" src=left.jpg onclick="prev()"/>
<img style="position:absolute; margin-top: 150px; margin-left: 890px;" src=right.jpg onclick="next()"/>
</div>
</div>
<script type="text/javascript">
//variable that will increment through the images
var step=0
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.getElementById('slide').src = slideimages[step].src
if (step<slidenum)
step++
else
step=0
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
function next(){
if (!document.images)
return
if (step<slidenum)
step++
else
step=0
document.getElementById('slide').src = slideimages[step].src
}
function prev(){
if (!document.images)
return
if (step>0)
step--
else
step=slidenum
document.getElementById('slide').src = slideimages[step].src
}
slideit()
</script>
</body>
</html>
You are passing "slideit()" as your first parameter to setTimeout, there are two ways this can go, you can have an implied eval where slideit() gets executed and then the result is passed to setTimeout, or you can have the string itself passed to setTimeout, neither are what you want. You should just pass the function as the first parameter of setTimeout.
change
setTimeout("slideit()",2500)
to
setTimeout(slideit,2500)
and you should be fine.
i have this slider on my website ans is working fine ... it is just and image changer which changes the images on the slide show and its code is written in the main.html file is this
<img src="images/1.jpg" name="slide" width="100%" height="368" />
<script>
<!--
var image1=new Image()
image1.src="images/1.jpg"
var image2=new Image()
image2.src="images/4.jpg"
var image3=new Image()
image3.src="images/3.jpg"
//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>
now its working absolutely fine.. all what i want is that i have a file name page1.js i want to put my javascript code in that file instead of my main.html file.. please tell me how i put this javascript code in that page1.js file and call it so that the image slide show will work fine as it is working now having the javascript code in the same file..
Put your javascript from above into a file named my-slides.js, and then replace the script tag in your current HTML file with this one:
<script type="text/javascript" src="my-slides.js"></script>
Ensure that my-slides.js is in the same folder as your HTML file, otherwise change the path accordingly.
FWIW, although you have not asked for this in your question, I think I should also mention the following:
Consider using curly braces to define code blocks in if and else blocks, even when it is a single line. Really improves code readability
This line: document.images.slide.src=eval("image"+step+".src") uses eval and you should avoid it. I am not sure what is accomplished here by wrapping your string concatenation with an eval. I would store the Images in an array and access this by index instead.
Rather than have a setTimeout within the function to recur, consider using setInterval outside of the function.
As requested.
This is what my-slides.js should contain.
var numImages = 3;
var images = [];
for (var i = 0; i < numImages; ++i) {
var image = new Image();
image.src = 'images/' + (i + 1) + '.jpg';
images.push(image);
}
var step = 0;
function slideit() {
if (! document.images) {
return;
}
document.images.slide.src = images[step].src;
step = (step + 1) % numImages;
}
setInterval(slideit, 2500);
All you have to do is include your JS file either at your footer or header :
<script src="js.js"></script>
and then in that JS file wil contain :
var image1=new Image()
image1.src="images/1.jpg"
var image2=new Image()
image2.src="images/4.jpg"
var image3=new Image()
image3.src="images/3.jpg"
//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()
the only thing you need to change is the path for the images themselves, they can be either relative to the JS file or absolute.
<p align="center">
<button onclick="slideit()">Run the loop</button>
<!-- Start Weather Image Loop -->
<img src="firstcar2.gif" name="slide" width="900" height="500" />
<script type="text/javascript">
<!--
var imagevis1=new Image()
imagevis1.src="http://www.ssec.wisc.edu/data/us_comp/big/image1.jpg"
var imagevis2=new Image()
imagevis2.src="http://www.ssec.wisc.edu/data/us_comp/big/image2.jpg"
var imagevis3=new Image()
imagevis3.src="http://www.ssec.wisc.edu/data/us_comp/big/image3.jpg"
var imagevis4=new Image()
imagevis4.src="http://www.ssec.wisc.edu/data/us_comp/big/image4.jpg"
var imagevis5=new Image()
imagevis5.src="http://www.ssec.wisc.edu/data/us_comp/big/image5.jpg"
var imagevis6=new Image()
imagevis6.src="http://www.ssec.wisc.edu/data/us_comp/big/image6.jpg"
var imagevis7=new Image()
imagevis7.src="http://www.ssec.wisc.edu/data/us_comp/big/image7.jpg"
var imagevis8=new Image()
imagevis8.src="http://www.ssec.wisc.edu/data/us_comp/big/image8.jpg"
var imagevis9=new Image()
imagevis9.src="http://www.ssec.wisc.edu/data/us_comp/big/image9.jpg"
var imagevis10=new Image()
imagevis10.src="http://www.ssec.wisc.edu/data/us_comp/big/image10.jpg"
var imagevis11=new Image()
imagevis11.src="http://www.ssec.wisc.edu/data/us_comp/big/image11.jpg"
var imagevis12=new Image()
imagevis12.src="http://www.ssec.wisc.edu/data/us_comp/big/image12.jpg"
var imagevis13=new Image()
imagevis13.src="http://www.ssec.wisc.edu/data/us_comp/big/image13.jpg"
var imagevis14=new Image()
imagevis14.src="http://www.ssec.wisc.edu/data/us_comp/big/image14.jpg"
var imagevis15=new Image()
imagevis15.src="http://www.ssec.wisc.edu/data/us_comp/big/image15.jpg"
var imagevis16=new Image()
imagevis16.src="http://www.ssec.wisc.edu/data/us_comp/big/image16.jpg"
var imagevis17=new Image()
imagevis17.src="http://www.ssec.wisc.edu/data/us_comp/big/image17.jpg"
var imagevis18=new Image()
imagevis18.src="http://www.ssec.wisc.edu/data/us_comp/big/image18.jpg"
var imagevis19=new Image()
imagevis19.src="http://www.ssec.wisc.edu/data/us_comp/big/image19.jpg"
var imagevis20=new Image()
imagevis20.src="http://www.ssec.wisc.edu/data/us_comp/big/image20.jpg"
var imagevis21=new Image()
imagevis21.src="http://www.ssec.wisc.edu/data/us_comp/big/image21.jpg"
var imagevis22=new Image()
imagevis22.src="http://www.ssec.wisc.edu/data/us_comp/big/image22.jpg"
var imagevis23=new Image()
imagevis23.src="http://www.ssec.wisc.edu/data/us_comp/big/image23.jpg"
var imagevis24=new Image()
imagevis24.src="http://www.ssec.wisc.edu/data/us_comp/big/image24.jpg"
var imagevis25=new Image()
imagevis25.src="http://www.ssec.wisc.edu/data/us_comp/big/image24.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("imagevis"+step+".src")
if (step<25)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
if (step<25)
{
setTimeout("slideit()",100)
}
else
{
setTimeout("slideit()",1500)
}
}
slideit()
//-->
</script>
<!-- End Weather Image Loop -->
</p>
I am trying to load this script with the click of a button, but when I place the lower script in a function, and load it with the button, it does not start the loop. For whatever reason, it sometimes says that slideit() is not defined, or that the first image (imagevis1) is not defined.
Thank you for your help!
The reason why yours is not working is the fact you never removed the slide() call which starts it off. You would need to remove that and the code would work with the button click.
setTimeout("slideit()",1500)
}
}
slideit() <-- REMOVE THIS LINE
//-->
</script>
<!-- End Weather Image Loop -->
But the code has other issues. I wrote this rather quick, but this is a little better than what you have. The preload could be done differently if they are not loading in time.
HTML :
<img src="" id="slideshow" />
<button id="btn">Animate</button>
JavaScript:
(function () {
var srcStart = "http://www.ssec.wisc.edu/data/us_comp/big/image",
srcEnd = ".jpg",
start = 1,
end = 24,
current = start,
shortDelay = 100,
longDelay = 1500,
elem = document.getElementById("slideshow"),
btn = document.getElementById("btn"),
isPreload = true;
function next() {
var delay = shortDelay;
elem.src = srcStart + current + srcEnd;
current++;
if(current!==end) {
var img = new Image();
img.src = srcStart + (current+1) + srcEnd;
}
if(current>end) {
current = start;
delay = longDelay;
}
window.setTimeout(next,delay);
}
btn.onclick = next;
})();
Example:
http://jsfiddle.net/L7qUY/
Make sure you don't have the function slideit() defined inside your wrapper function.
//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("imagevis"+step+".src");
if (step<25) {
step++;
} else {
step=1;
}
//call function "slideit()" every 2.5 seconds
if (step<25) {
setTimeout("slideit()",100);
} else {
setTimeout("slideit()",1500);
}
}
var button = document.getElementById("YourButtonID");
button.addEventListener("click", slideit);
You need the image tag named slide because your javascript uses that attribute to target the image tag to update document.images.slide.src=eval("imagevis"+step+".src");.
Also make sure that your setTimeout methods have the times you intend. Your comment says you want to call slideit() every 2.5 seconds but your calls are using 100 and 1500 milliseconds which is .1 and 1.5 seconds respectively.
I'm guessing you are trying to write an animation or something.
html
<img src='http://www.ssec.wisc.edu/data/us_comp/big/image1.jpg' id="weatherImg" width="400" />
<input type="button" id="animate" onclick="animate()" value="tiempo" />
JavaScript
currImg=0;
images = [
"http://www.ssec.wisc.edu/data/us_comp/big/image1.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image2.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image3.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image4.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image5.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image6.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image7.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image8.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image9.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image10.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image11.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image12.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image13.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image14.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image15.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image16.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image17.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image18.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image19.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image20.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image21.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image22.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image23.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image24.jpg"
//,"http://www.ssec.wisc.edu/data/us_comp/big/image25.jpg"
];
aniClock = 0;
animate = function(){
clearTimeout(aniClock);
if (typeof images[currImg] == "undefined"){
//alert('ho');
//return false;
currImg = 0;
}
document.getElementById("weatherImg").src = images[currImg];
currImg++;
aniClock = setTimeout(function(){animate();},300);
}
Example
http://jsfiddle.net/chepe263/bVye6/