i have 2 divs on a container.I would like to get first image from div with id="underscore" 4 times from 5.I have 5 images which changes and for first 4 i would like to have the image from first div only.On the last image,i must hide the 1st div image and show the 2nd div image.
I have tryed:
$(document).ready( function() {
$('#underscore').show();
$('#underscore_umbrela').hide();
if(imgNumber < 4){
$('#underscore').hide();
$('#underscore_umbrela').show();
}
}
<div id="underscore" class="underscore">
<div><img id="underscore" src="images/underscore.png" alt=""/></div>
<div><img id="underscore_umbrela" src="images/underscore_umbrela.png" alt=""/></div>
</div>
Ya can't have the same ID shared between two or more elements, so I've updated your markup
<div id="wrapper" class="underscore">
<div><img src="http://placekitten.com/200/200" id="underscore" /></div>
<div><img src="http://placekitten.com/400/400" id="underscore_umbrella" /></div>
</div>
Here's the javascript to achieve the fifth-click show:
$(function() {
var counter = 0,
$img1 = $('#underscore'),
$img2 = $('#underscore_umbrella');
$img1.show(); // Set img1 as visible (if it isn't already)
$img2.hide(); // Set img2 as hidden
$('#wrapper').on('click', function() {
if (counter === 4) {
$img1.hide();
$img2.show();
counter = 0;
} else {
$img1.show();
$img2.hide();
counter += 1;
}
});
});
And here's a Fiddle
Related
I want to make a button that simply change photo src from given src of image
<div id="main_photo">
<img class="card-img-top" src="/img/new0.JPG" alt="Avatar" >
</div>
I have new1.JPG to new6.JPG photo which should be changed on this image source on click of a button
All photos are in my /img/ folder
And here is my HTML code for the button to change src with onclick.
<button id="changeimg" > Change </button>
As #Teemu said (in comments), if you have the list of the new images you want to change to, you can do it by js code.
<div id="main_photo">
<img class="card-img-top" id="mainImage" src="/img/new0.JPG" alt="Avatar" >
</div>
<button id="changeimg" onclick="changeImage()"> Change </button>
<script>
var imageIndex = 0;
var imageCount = 6; // Can be also an array of images names ["/img/new0.JPG", "/img/new1.JPG", ..., "/img/new6.JPG"]
function changeImage() {
var imageContainer = window.getElementById("mainImage");
imageContainer.src = "/img/new" + (imageIndex++) + ".JPG";
// Make sure you validate the counter so it won't overflow
}
</script>
I have a demo for you if you have the list of images. And I believe that you can have that by simple code to get all images in your local folder.
const listSources = [
'/img/new0.JPG',
'/img/new1.JPG',
'/img/new2.JPG',
'/img/new3.JPG',
'/img/new4.JPG',
'/img/new5.JPG',
'/img/new6.JPG',
]
var currentIndex = 0;
$('#changeimg').click(function() {
// increase index to show the next image
currentIndex++;
// reset if reach the last image
if (currentIndex == listSources.length) currentIndex = 0;
// set image src
$('#main_photo>img').first()
.attr('src', listSources[currentIndex])
.attr('alt', listSources[currentIndex]); // change alt to show changes in demo
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="changeimg">Change</button>
<div id="main_photo">
<img class="card-img-top" src="/img/new0.JPG" alt="/img/new0.JPG">
</div>
I am trying to make an image change when I click on a piece of text on a website that I am building.
At this moment I have created a class called device with one of them being device active as shown below:
<div class="col-md-3">
<div class="device active">
<img src="app/assets/images/mockup.png" alt="">
</div>
<div class="device">
<img src="app/assets/images/mockup.png" alt="">
</div>
<div class="device">
<img src="app/assets/images/mockup.png" alt="">
</div>
</div>
And then what i am currently trying to do is remove the class of active when I click on some text with the i.d of #search2. This is my whole jquery script so far:
$("#search2").click(function() {
var currentImage = $('.device.active');
var nextImage = currentImage.next();
currentImage.removeClass('active');
});
However this does not seem to remove the class of active and the image is still displayed? any ideas?
Your selection is done right and it is working for me (the active class is removed from that item). The problem must be somewhere else in your code.
Here is an alternative:
var activeDeviceIndex = 0;
$("#search2").click(function() {
var devicesContainer = $('.device');
$(devicesContainer[activeDeviceIndex]).removeClass('active');
activeDeviceIndex === devicesContainer.length - 1 ? activeDeviceIndex = 0 : activeDeviceIndex++;
$(devicesContainer[activeDeviceIndex]).addClass('active');
});
.device {
display: none;
}
.device.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="device active">
<p>Device 1</p>
</div>
<div class="device">
<p>Device 2</p>
</div>
<div class="device">
<p>Device 3</p>
</div>
</div>
<button id="search2">click</button>
Check on the following, the id on the button to click should be search2 and not #search2, may be just typo stuffs.
after that update your code as follows
/**
*#description - gets the next image to slide, if the last image is the current image, it will loop the sliding
*#param {Element} current - the currently active image
*#param {Boolean} islooped - boolean value indicating if a looping just started
*/
var nextImage = function(current, islooped) {
var next = islooped? current : current.nextSibling;
while(next && next.nodeName.toLowerCase() !== 'div') {
next = next.nextSibling;
}
next = next? next : nextImage(current.parentNode.firstChild, true);
return next;
};
$('#search2').bind('click', function(event) {
var current = $('.device.active').removeClass('active').get(0);
var next = nextImage(current, false);
$(next).addClass('active');
});
My JavaScript slideshow is acting a little wonky. When I load the page the slide show pictures are visible, but it shows all the photos in the slideshow.
After a couple of seconds, it does decompress to one photo showing, and works how it's supposed to, flipping through each one at a 5 second pace.
However, no matter what I do, it still shows all the pictures at the beginning, which defeats the point...
This is my HTML:
<div class="container">
<div style="display: inline-block; ">
<img class="mySlides" src="../images/fullshot1.jpg">
</div>
<div style="display: inline-block; ">
<img class="mySlides2" src="../images/unnamed.jpg">
</div>
<div style="display: inline-block; ">
<img class="mySlides3" src="../images/fullshot2.jpg">
</div>
</div>
And this is my Jquery/JavaScript:
$(document).ready(function() {
console.log( "document loaded" );
//declare section variables
var currentIndex = 0,
items = $('.container div'),
itemAmt = items.length;
//how to click and make it work
function cycleItems() {
var item = $('.container div').eq(currentIndex);
items.hide();
item.css('display','inline-block');
}
//interval time
var autoSlide = setInterval(function() {
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
}, 3000);
//this closes the doc ready
});
Can anybody help me with this/has had this problem too? Thanks!
Using JavaScript or jQuery, how can I display an image of a selected class (and hide all other images of that class) by changing the value of a seekbar (input range slider) ?
When value1 is selected, image1 should be shown, and all other images hidden, etc.
Welcome to StackOverflow. Try this JS Bin for a demo.
When the value of the input slider element changes, we use that value as an index for the images with the class-name "image". Then we hide all of those images, and show the image that corresponds with the selected index.
You can use either vanilla Javascript (no jQuery) or jQuery.
JAVASCRIPT
var slider = document.getElementById('image-slider');
slider.addEventListener('change', function(){
var images = document.getElementsByClassName('image');
var index = this.value;
for (var i = 0; i < images.length; i ++) {
images[i].style.display = 'none';
}
images[index].style.display = 'block';
}, false)
JQUERY
$('#image-slider').on('input', function(){
var index = this.value;
// hide all the images first
$('.image').hide();
// show selected image
$('.image').eq(index).show();
});
HTML
<div>
<input id="image-slider" type="range" min="0" max="4" step="1" value="1">
<img class="image" src="http://www.funnycatpix.com/_pics/Whaaa_Hahaha244_t.jpg" alt="" hidden>
<img class="image" src="http://www.funnycatpix.com/_pics/This_Pizza_Box_Is_Great_t.jpg" alt="">
<img class="image" src="http://www.funnycatpix.com/_pics/Kitten_Cuddlers_t.jpg" alt="" hidden>
<img class="image" src="http://www.funnycatpix.com/_pics/First_Time_In_The_Grass_t.jpg" alt="" hidden>
<img class="image" src="http://www.funnycatpix.com/_pics/Play_With_Me_Instead435_t.jpg" alt="" hidden>
</div>
For school I want to make an webpage, where I show 1 image, which disappears after 5 seconds and a button appears. You have to push the button before the next image shows up which shows then for 5 seconds. So the same story every time.
As I know a little about coding I found some piece of code here and tried to use it, but I can only let 1 image show for 5 seconds after I push the button.
Here is the code
<input type="button" value="Show image for 5 seconds" onclick="show()"><br><br>
<div id="myDiv" style="display:none"><img id="1" src="img/logo.png"></div>
<div id="myDiv" style="display:none"><img id="2" src="img/test.jpg"></div><br>
<script type="text/javascript">
function show() {
document.getElementById("myDiv").style.display = "block";
setTimeout("hide()", 5000); // 5 seconds
}
function hide() {
document.getElementById("myDiv").style.display = "none";
}
</script>
Thanks and I hope you guys can help me out! :)
Well, for starters, you've got two divs with the same id, which is incorrect. Assuming you've got your images like this:
<button id="next" onclick="showNext();">Show next image</button><br />
<div class="image" style="display: none;"><img src="img/logo1.png" /></div>
<div class="image" style="display: none;"><img src="img/logo2.png" /></div>
<div class="image" style="display: none;"><img src="img/logo3.png" /></div>
<div class="image" style="display: none;"><img src="img/logo4.png" /></div>
<script type="text/javascript">
var divs = document.querySelectorAll('div.image'); //select all divs with class 'image'
var button = document.getElementById('next'); //button.
var currentImage = 0;
function showNext() {
button.style.display = 'inline';
divs[currentImage].style.display = 'block';
setTimeout(hide, 5000);
}
function hide() {
button.style.display = 'block';
divs[currentImage].style.display = 'none';
currentImage = (currentImage + 1) % divs.length;
}
</script>
I didn't bother with styling your elements with CSS rules, which would be recommendable, but this would work as intended.
Remove the double quotes:
setTimeout(hide, 5000); // 5 seconds