<div id="contentimage">
<img src="1.jpg" class="activeimage" />
<img src="2.jpg" style="opacity: 0;" />
<img src="3.jpg" class="last" style="opacity: 0;" />
</div>
<script>
window.addEvent('domready', function() {
var fx = function() {
var activeimage = $$('img.activeimage');
if(!activeimage.hasClass('last')) {
var next = activeimage.getNext('img');
activeimage.toggleClass('activeimage');
next.toggleClass('activeimage');
activeimage.morph({'opacity':'0'});
next.morph({'opacity':'1'});
} else {
var next = $('contentimage').getFirst('img');
activeimage.toggleClass('activeimage');
next.toggleClass('activeimage');
activeimage.morph({'opacity':'0'});
next.morph({'opacity':'1'});
}
}
fx.periodical(3000);
});
</script>
I just can't understand why this :
if(!activeimage.hasClass('last'))
always returns false ? I tried to check it with "alert", and it was all good, but when it comes to this line - it goes not like I expected.
Use this instead:
var activeimage = document.getElement('img.activeimage');
Otherwise $$ will get a family and you cannot apply .hasClass() like that.
Demo here (check console after some seconds)
Related
Forgive me, it's been a while since figuring out anything with jQuery, I need some guidance/help: I'd love to swap an image 00x-a for 00x-b, but not just for a single image, but for many. Once the BTN below an IMG is clicked, I'd love to swap the IMG above for 00x-b while resetting other IMGs to 00x-a.
<div>
<img id="swap_this" src="img-001-a.jpg">
<a class="button">Change-IMG</a>
</div>
<div>
<img id="swap_this" src="img-002-a.jpg">
<a class="button">Change-IMG</a>
</div>
<div>
<img id="swap_this" src="img-003-a.jpg">
<a class="button">Change-IMG</a>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".button").click(function(){
$("#swap_this").attr()({
"src":"img-001-b.jpg";
})
})
});
</script>
This should do it. Only the first picture is set to img-001-a.jpg
var arr = ['img-001-a.jpg', 'img-002-a.jpg', 'img-003-a.jpg']
$.each($('.swap_this'), function(index, value) {
if(index == 0) {
$(this).attr('src', arr[0])
console.log($(this).attr('src'));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<img class="swap_this" src="img-001-b.jpg">
<a class="button">Change-IMG</a>
</div>
<div>
<img class="swap_this" src="img-002-b.jpg">
<a class="button">Change-IMG</a>
</div>
<div>
<img class="swap_this" src="img-003-b.jpg">
<a class="button">Change-IMG</a>
</div>
Tried to follow up on your answer, but ended up with something else. The below does what I need, but can it be written with "each" or using a for-loop to iterate through? Thx.
// clicking btn_100
$('.btn_100').click(function(e) {
// reset all IMG to version -a.gif..
$(".img_100").attr('src','img-100-a.gif');
$(".img_099").attr('src','img-099-a.gif');
$(".img_098").attr('src','img-098-a.gif');
// set IMG_100 ver -b.gif..
$(".img_100").attr('src','img-100-b.gif');
});
// clicking btn_099
$('.btn_099').click(function(e) {
// reset all IMG to version -a.gif..
$(".img_100").attr('src','img-100-a.gif');
$(".img_099").attr('src','img-099-a.gif');
$(".img_098").attr('src','img-098-a.gif');
// set IMG_100 ver -b.gif..
$(".img_099").attr('src','img-099-b.gif');
});
// and so on..
Maybe this could work…
for(a=1; a<=100; a++) {
// create fns for all btns
$(".btn_" + a).click(function(e) {
// reset all IMG to version -a.gif..
for(i=1; i<=100; i++) {
$(".img_" + i).attr("src","image-" + i + "-a.gif");
}
// set specific IMG to version -b.gif..
$(".img_" + a).attr("src","image-" + a + "-b.gif");
});
}
I am trying to make a script that will take the images from one div element and put it to div rndmImage randomly on button click, I should see images when document is loaded, but the new div where images should go after click must be empty until click heapends. And I need only JavaScript, no jQuery, alse i can not change the html, and it has to work for any number of images. So if you have some ideas that would be great. Here's my code.
window.addEventListener('load', start, false);
function start() {
var butt = document.getElementsByTagName('button')[0];
var rnImg = document.getElementsByClassName('ekran');
var pictures = document.getElementsByTagName('img');
var choose = Math.floor(Math.random()*pictures.length);
butt.addEventListener('click', menjaj, false);
function menjaj(e) {
var new = e.button;
var img = [];
for(var i = 0; i< pictures.length; i++) {
var dodaj = img[i];
img.push(dodaj);
}
//ekran.src = 'slike/' + slike[izbor] + '.jpg';
}
}
<body>
<div class="wrapper">
<div>
<img src="slike/leto1.jpg" alt="leto1">
<img src="slike/leto2.jpg" alt="leto2">
<img src="slike/leto3.jpg" alt="leto3">
<img src="slike/leto4.jpg" alt="leto4">
<img src="slike/leto5.jpg" alt="leto5">
<img src="slike/leto6.jpg" alt="leto6">
<img src="slike/leto7.jpg" alt="leto7">
<img src="slike/leto8.jpg" alt="leto8">
<img src="slike/leto9.jpg" alt="leto9">
</div>
<div>
<button type="button">choose</button>
</div>
<div class="rndmImage"></div>
</div>
</body>
This is a working snippet of your code:
window.addEventListener('load', start, false);
function start () {
var butt = document.getElementsByTagName('button')[0];
var rnImg = document.getElementsByClassName('rndmImage')[0]; //Change selector to existing class and select the first (the only) one
var pictures = document.getElementsByTagName('img');
butt.addEventListener('click', menjaj, false);
function menjaj (e) {
// var new = e.button;// 'new' is reserved word in JS, you can't use it as variable name
// var btn = e.button;// but this line is useless
var choose = Math.floor(Math.random() * pictures.length); //better move this line inside this function to get rundom image every button clicks
var img = document.createElement('img'); //creates new img tag
img.src = pictures[choose].src;
rnImg.innerHTML = ''; //to delete previous image
rnImg.appendChild(img);
// var img = []; //useless lines of code
// for(var i = 0; i< pictures.length; i++) {
// var dodaj = img[i];
// img.push(dodaj);
// }
//ekran.src = 'slike/' + slike[izbor] + '.jpg';
}
}
welcome to StackOverflow!
I would first hide the .wrapper > div img as that will prevent the images to show, then, append a data-pos to help select the position and simply randomize them and pick the src to show on the placeholder
and remember that you have a <div> as placeholder, so you can't assign src, only if you change it to <img>
so, something like this 😊
function chooseImg() {
// get total images available
var totalImages = document.querySelectorAll('.wrapper > div img').length
log('totalImages', totalImages)
// get a random position
var rndPosition = Math.floor(Math.random() * totalImages)
log('rndPosition', rndPosition)
// get hold of the image for such position
var rndImage = document.querySelector('.wrapper > div img[data-pos="' + rndPosition + '"]')
log('rndImage', rndImage)
// assign the source to the DIV
document.querySelector('.rndmImage').style = 'background-image: url("' + rndImage.src + '")'
}
function log(txt, obj) {
console.log(txt, obj)
}
.wrapper > div img {
display: none;
}
.rndmImage {
background-size: contain;
background-repeat: no-repeat;
width: 100px;
height: 100px;
}
<div class="wrapper">
<div>
<img data-pos="0" src="https://randomwordgenerator.com/img/picture-generator/54e5d2434953a514f1dc8460962e33791c3ad6e04e507440742f7cd09645cc_640.jpg" alt="leto1">
<img data-pos="1" src="https://randomwordgenerator.com/img/picture-generator/54e2d1404a57a814f1dc8460962e33791c3ad6e04e5074417c2d78d19f44c4_640.jpg" alt="leto2">
<img data-pos="2" src="https://randomwordgenerator.com/img/picture-generator/57e2d5444851a414f1dc8460962e33791c3ad6e04e50744172287ad2914fc4_640.jpg" alt="leto3">
<img data-pos="3" src="https://randomwordgenerator.com/img/picture-generator/51e8d0444f56b10ff3d8992cc12c30771037dbf85254794e722c73d19245_640.jpg" alt="leto4">
<img data-pos="4" src="https://randomwordgenerator.com/img/picture-generator/53e4d2464a56a914f1dc8460962e33791c3ad6e04e507440722d7cd39345c1_640.jpg" alt="leto5">
<img data-pos="5" src="https://randomwordgenerator.com/img/picture-generator/57e9dc434b5ba414f1dc8460962e33791c3ad6e04e50744172297bd5934cc4_640.jpg" alt="leto6">
<img data-pos="6" src="https://randomwordgenerator.com/img/picture-generator/55e1dc4b4254ad14f1dc8460962e33791c3ad6e04e507440722d72d09249c7_640.jpg" alt="leto7">
<img data-pos="7" src="https://randomwordgenerator.com/img/picture-generator/57e9d4474e54a814f1dc8460962e33791c3ad6e04e50744172297cdd974cc0_640.jpg" alt="leto8">
<img data-pos="8" src="https://randomwordgenerator.com/img/picture-generator/53e6dc404951b10ff3d8992cc12c30771037dbf852547848702e7ed19348_640.jpg" alt="leto9">
</div>
<div>
<button type="button" onclick="chooseImg()">choose</button>
</div>
<div class="rndmImage"></div>
</div>
<div class="wrapper">
<img src="../Assets1/Image/1.svg" alt="" />
<img src="../Assets1/Image/2.svg" alt="" />
<img src="../Assets1/Image/3.svg" alt="" />
</div>
<button>Click</button>
<div class="randomImageContainer"></div>
const button = document.querySelector('button');
button.addEventListener('click', randomImage);
function randomImage() {
const image = document.querySelectorAll('.wrapper > img');
const randomImageContainer = document.querySelector('.randomImageContainer');
let randomNumber = Math.floor(Math.random() * image.length);
const img = document.createElement('img');
img.src = image[randomNumber].src;
randomImageContainer.appendChild(img);
}
You can do this with plain javascript like this:
document.querySelector("button").addEventListener("click", () => {
var imgElements = document.querySelectorAll(".wrapper img");
document.querySelector(".rndmImage").innerHTML = imgElements[Math.floor(Math.random() * imgElements.length)].outerHTML;
});
<div class="wrapper">
<div>
<img src="slike/leto1.jpg" alt="leto1">
<img src="slike/leto2.jpg" alt="leto2">
<img src="slike/leto3.jpg" alt="leto3">
<img src="slike/leto4.jpg" alt="leto4">
<img src="slike/leto5.jpg" alt="leto5">
<img src="slike/leto6.jpg" alt="leto6">
<img src="slike/leto7.jpg" alt="leto7">
<img src="slike/leto8.jpg" alt="leto8">
<img src="slike/leto9.jpg" alt="leto9">
</div>
<div>
<button type="button">choose</button>
</div>
<div class="rndmImage"></div>
</div>
If you're able to use randojs, you can even simplify the randomness and make it all cryptographically secure like this:
document.querySelector("button").addEventListener("click", () => document.querySelector(".rndmImage").innerHTML = rando(document.querySelectorAll(".wrapper img")).value.outerHTML);
<script src="https://randojs.com/2.0.0.js"></script>
<div class="wrapper">
<div>
<img src="slike/leto1.jpg" alt="leto1">
<img src="slike/leto2.jpg" alt="leto2">
<img src="slike/leto3.jpg" alt="leto3">
<img src="slike/leto4.jpg" alt="leto4">
<img src="slike/leto5.jpg" alt="leto5">
<img src="slike/leto6.jpg" alt="leto6">
<img src="slike/leto7.jpg" alt="leto7">
<img src="slike/leto8.jpg" alt="leto8">
<img src="slike/leto9.jpg" alt="leto9">
</div>
<div>
<button type="button">choose</button>
</div>
<div class="rndmImage"></div>
</div>
Try this:
this is my image in HTML file
<snap id="image" class="btn btn-warning" onclick="changeImage()">Image</snap>
<image id="imagechange" src="https://picsum.photos/200/300" ></image>
my javascript file
imgcount = 0;
function changeImage() {
document.getElementById("imagechange").src =
"https://picsum.photos/200/" + (300 + imgcount);
imgcount++;
}
everytime you click button you get a new image
startSliding($("div").eq(0));
startSliding($("div").eq(1));
startSliding($("div").eq(2));
I would like to know if there is a different way to add only one code instead of repeating eq selector every time.
startSliding($("div").eq(unlimited));
The full js file is:
startSliding($("div").eq(0));
startSliding($("div").eq(1));
startSliding($("div").eq(2));
startSliding($("div").eq(3));
function startSliding (div) {
var i = 0;
var tid = null;
var sec = 1/3; // <- you want 1 here
var images = $("img", div).map(function () {
return $(this).attr("src");
}).get();
$("img:gt(0)", div).remove();
$("img", div).hover(function () {
var $this = $(this);
tid = setInterval(function () {
i = (i + 1) % images.length;
$this.attr("src", images[i]);
}, 1000 * sec);
}, function () {
clearInterval(tid);
$(this).attr("src", images[0]);
});
}
I got this way in another question from some one who helped me to much but now working on Im getting more ideas on my project, and the DIVs that I have in page are changing, sometimes in a page I have 10 divs sometimes 50.Adding eq selector for each div will effect in pagespeed too. so if there is a shorter code which does the same job would be great to know.I'm a newbea with javascript :(
https://jsfiddle.net/jhudrp8v/11/
Thank You!
It's very simple to do so.
You have to just use .each() jquery method.
Check below code snippet for the same -
// Added code
let elem = $('div.someclass');
elem.each(function(i) {
startSliding(elem.eq(i));
});
// Your code
function startSliding (div) {
var i = 0;
var tid = null;
var sec = 1/3; // <- you want 1 here
var images = $("img", div).map(function () {
return $(this).attr("src");
}).get();
$("img:gt(0)", div).remove();
$("img", div).hover(function () {
var $this = $(this);
tid = setInterval(function () {
i = (i + 1) % images.length;
$this.attr("src", images[i]);
}, 1000 * sec);
}, function () {
clearInterval(tid);
$(this).attr("src", images[0]);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="someclass">
<img height="150" src="https://i.stack.imgur.com/BDcMh.gif">
<img height="150" src="https://i.stack.imgur.com/vfQCT.gif">
<img height="150" src="https://i.stack.imgur.com/MbEgw.gif">
<img height="150" src="https://i.stack.imgur.com/uCCEw.gif">
<img height="150" src="https://i.stack.imgur.com/iO6QE.gif">
</div>
<div class="someclass">
<img height="150" src="https://i.stack.imgur.com/BDcMh.gif">
<img height="150" src="https://i.stack.imgur.com/vfQCT.gif">
<img height="150" src="https://i.stack.imgur.com/MbEgw.gif">
<img height="150" src="https://i.stack.imgur.com/uCCEw.gif">
<img height="150" src="https://i.stack.imgur.com/iO6QE.gif">
</div>
<div class="someclass">
<img height="150" src="https://i.stack.imgur.com/BDcMh.gif">
<img height="150" src="https://i.stack.imgur.com/vfQCT.gif">
<img height="150" src="https://i.stack.imgur.com/MbEgw.gif">
<img height="150" src="https://i.stack.imgur.com/uCCEw.gif">
<img height="150" src="https://i.stack.imgur.com/iO6QE.gif">
</div>
<div class="someclass">
<img height="150" src="https://i.stack.imgur.com/BDcMh.gif">
<img height="150" src="https://i.stack.imgur.com/vfQCT.gif">
<img height="150" src="https://i.stack.imgur.com/MbEgw.gif">
<img height="150" src="https://i.stack.imgur.com/uCCEw.gif">
<img height="150" src="https://i.stack.imgur.com/iO6QE.gif">
</div>
For more info on .each() refer https://api.jquery.com/eq/
Hope this will help you :)
I'm working on a web project that has a changing background image every few seconds. Problem is I don't know how to get the first image to return after all images are finished rotating. After the third image the screen goes white.
html :
<section class="slideshow">
<img src="img/img1.png" class="bgM show"/>
<img src="img/img2.png" class="bgM"/>
<img src="img/img3.jpg" class="bgM"/>
</section>
javascript
function switch() {
var $active = $('.slideshow IMG.show');
var $next = $active.next();
var $images = new Array();
var $length = $images.length;
$next.addClass('show');
$active.removeClass('show');
if ($images[$length].hasClass('show')) {
$images[0].addClass('show');
}
}
$(function() {
setInterval( "switch()", 8000 );
});
jsFiddle Demo
No need for the extra code. Just use an iterator with mod for the set of image elements.
$(function() {
var slide = $(".slideshow"), cur = 0;
setInterval(function(){
$('.show',slide).removeClass('show');
$('img',slide).eq((++cur)%3).addClass('show');
}, 1000 );//using 1000 just for demo purposes
});
.slideshow img.show{
border:2px solid red;
display:block;
}
.slideshow img{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="slideshow">
<img src="http://placehold.it/350x150" class="bgM show"/>
<img src="http://placehold.it/250x150" class="bgM"/>
<img src="http://placehold.it/150x150" class="bgM"/>
</section>
The first major issue is that your function switch is a reserved word (ie choose another name [I chose switch_images]).
Next you can check to see if the "next" image exists (.length). If it doesn't then set it to the first image in the slideshow:
<section class="slideshow">
<img src="img/img1.png" class="bgM show"/>
<img src="img/img2.png" class="bgM"/>
<img src="img/img3.jpg" class="bgM"/>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
function switch_images() {
var $active = $('.slideshow IMG.show');
var $next = $active.next();
if(!$next.length){
$next = $('.slideshow IMG:first');
}
$active.removeClass('show');
$next.addClass('show');
}
$(function() {
setInterval( "switch_images()", 8000 );
});
</script>
I made a simple slideshow on my website and would now like to animate it. I just want the images to fade into one another. I would prefer not to use jQuery, as this is probably the only js I will need on my website. jQuery would be okay though, if it is necessary.
Preloading the images (in website head)
<!--
var image1=new Image;image1.src="images/referenzen/besten-weine.jpg";var image2=new Image;image2.src="images/referenzen/pixelization.jpg";var image3=new Image;image3.src="images/referenzen/immo-buerk.jpg"
//-->
Code in slideshow position (image src is then changed by the script)
<img src="images/referenzen/besten-weine.jpg" name="slide" width="445px" height="300px">
<script type="text/javascript">
<!--
var step=1
//a variable that will keep track of the image currently being displayed.
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<3)
step++
else
step=1
setTimeout("slideit()",4000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="#weine"
else if (whichimage==2)
window.location="#mc"
else if (whichimage==3)
window.location="#immo"
}
//-->
</script>
I can do some CSS animations but am new to javascript.
Assuming this HTML:
<div class="slideshow">
<div class="image-front"><img src="photo1.png" /></div>
<div class="image-back"><img src="photo2.png" /></div>
</div>
You can do:
.slideshow .image-front {
transition: .5s;
transition-property: opacity;
}
.slideshow.transition .image-front {
opacity: 0;
}
Then after .5 seconds swap the image in image-back to image-front.
Html:
<div>
<img src="back.png" title="back" id="back">
<img src="next.png" title="next" id="next">
</div>
<img src="image1.png" id="image1" />
<img src="image2.png" id="image2" />
<img src="image3.png" id="image3" />
Jquery and javascript:
Global Variable:
var actual = 1;
To go to next image:
$('#next').click(function(){
$('img').stop(true, true);
$('#image' + _actual).fadeOut(function(){
actual++;
if(actual > 3){
actual = 1;
}
$('#image' + actual).fadeIn();
});
});
To go to previos image:
$('#back').click(function(){
$('img').stop(true, true);
$('#image' + _actual).fadeOut(function(){
actual--;
if(actual == 0){
actual = 3;
}
$('#image' + actual).fadeIn();
});
});
I just wrote this, haven´t test it, but i think that works.