I made an Image-Slider based on Radio Buttons (thanks to some advice of user A.V) as you can see here:
Now, there is one last thing that I would love to do but I have no idea how. I would like to be able to switch to the next image by clicking on the image itself (of course with the selection jumping to the next button, too).
Would be awesome if someone could help. Thanks in advance!
JSFiddle
http://jsfiddle.net/v4phdL3p/8/
Add class "sliderImage" to your image placeholders and then use this code:
$(".sliderImage").click(function(){
var name = $(this).attr("name")
var selector = "input[checked][name='" + name +"']"
currrentRadio = $(selector)
currrentRadio.removeAttr("checked")
if (currrentRadio.next().attr("name") === name) {
currrentRadio.next().attr('checked', 'checked').prop("checked",true).trigger("click")
} else {
var nextRadio = "input[name='" + name + "']"
firstRadio = $(nextRadio)[0]
$(firstRadio).attr('checked', 'checked').prop("checked",true).trigger("click")
}
})
*EDIT* change changeImage to this (to allow clicking of object to not affect functionality):
Here is the working fiddle:
http://jsfiddle.net/xhmrwhtv/3/ **NEW modified Working Fiddle**
function changeImage(imgName, obj)
{
image = document.getElementById(obj.name);
image.src = imgName;
var name = obj.name;
var selector = "input[checked][name='" + name +"']";
currrentRadio = $(selector);
currrentRadio.removeAttr("checked");
$(obj).attr('checked', 'checked').prop("checked",true).trigger("click");
}
Have you tought about a simple JavaScript or jQuery script? This would not be hard to do, here is an example:
jQuery:
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ($active.length == 0) $active = $('#slideshow IMG:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
$active.addClass('last-active');
$next.css({ opacity: 0.0 })
.addClass('active')
.animate({ opacity: 1.0 }, 1000, function () {
$active.removeClass('active last-active');
});
}
$(function () {
setInterval("slideSwitch()", 3000);
});
html:
<div style="width: 100%; position: absolute; margin-top:5%;">
<div id="slideshow" style="display: inline-block; position:relative;">
<img src="pictures/coinWars/1.jpg" class="active" />
<img src="pictures/coinWars/2.jpg" />
<img src="pictures/coinWars/3.jpg" />
<img src="pictures/coinWars/4.jpg" />
<img src="pictures/coinWars/5.jpg" />
<img src="pictures/coinWars/6.jpg" />
<img src="pictures/coinWars/7.jpg" />
<img src="pictures/coinWars/8.jpg" />
<img src="pictures/coinWars/9.jpg" />
<img src="pictures/coinWars/10.jpg" />
</div>
That will make a simple slide show of pictures, you can change it to allow it to change on click, instead on on the interval.
This is my code, but feel free to use it and modify it as necessary.
First change you function to access the name not the object
function changeImage(imgName, name)
{
image = document.getElementById(name);
image.src = imgName;
}
Then then add to img onclick:
<img src="http://placehold.it/100x100" name="image1" id="image1" onclick="changeImageClick(1);"><br>
Then I added variables (just for the first set of changes:
var images1 = ["http://placehold.it/100x100","http://placehold.it/200x200","http://placehold.it/300x300"];
var images1num = 0;
images1num is for what current image src you are on. Starting at 0 to 2.
Then you have to modify the radio buttons onclick to:
changeImage('http://placehold.it/200x200','image1'); images1num = 1;
Here is the function:
function changeImageClick(num)
{
if(num == 1)
{
images1num = (images1num + 1) % images1.length;
changeImage(images1[images1num],'image1');
var input = document.getElementsByTagName('input');
var nextInput = false;
for(var i = 0; i < input.length; i++)
{
if(input[i].checked == true && input[i].name == 'image1')
{
nextInput = true;
if(nextInput)
{
input[(i+1)%images1.length].click();
nextInput = false;
break;
}
}
}
}
}
Again this is only for your 100x100,200x200,300x300 but the concept works for all 3.
Here is JSFiddle: http://jsfiddle.net/v4phdL3p/44/
Replicating the other two sliders is a good learning experience.
There are many javaScript sliders. You just need to search google to get your answer. However, following code may be helpful.
Working Fiddle....
<img id = "img" src = "http://www.menucool.com/slider/prod/image-slider-1.jpg" width = 200; onclick = "changeImage()">
<br>
<input type="radio" name = "rdo" id = "radio1" onclick = "changeSlide(this)" checked />
<input type="radio" name = "rdo" id = "radio2" onclick = "changeSlide(this)"/>
<input type="radio" name = "rdo" id = "radio3" onclick = "changeSlide(this)"/>
JavaScript:
function changeImage(){
if(document.getElementById("img").src == "http://www.menucool.com/slider/prod/image-slider-1.jpg" ){
document.getElementById("img").src = "http://www.menucool.com/slider/prod/image-slider-3.jpg";
document.getElementById("radio2").checked = true;
}
else if(document.getElementById("img").src == "http://www.menucool.com/slider/prod/image-slider-3.jpg"){
document.getElementById("img").src ="http://www.userinterfaceicons.com/80x80/minimize.png";
document.getElementById("radio3").checked = true;
}
else if(document.getElementById("img").src == "http://www.userinterfaceicons.com/80x80/minimize.png"){
document.getElementById("img").src = "http://www.menucool.com/slider/prod/image-slider-1.jpg";
document.getElementById("radio1").checked = true;
}
}
function changeSlide(id){
if(document.getElementById("radio1")==id){
document.getElementById("img").src = "http://www.menucool.com/slider/prod/image-slider-1.jpg";
}
else if(document.getElementById("radio2")==id){
document.getElementById("img").src = "http://www.menucool.com/slider/prod/image-slider-3.jpg";
}
else if(document.getElementById("radio3")==id){
document.getElementById("img").src ="http://www.userinterfaceicons.com/80x80/minimize.png";
}
}
Related
I'm trying to create a simple image rotator on hover effect. It working properly on mouse hover, but doesn't work when mouse out method.
var imgFlip = $("img").data( "flip" );
var imgOriginal = $("img").data( "original" );
var images = imgFlip.split(/,|, |;|; /);
var index = 0;
function rotateImage()
{
$('.img-rotator').fadeOut('fast', function()
{
$(this).attr('src', images[index]);
$(this).fadeIn('fast', function()
{
if (index == images.length-1)
{
index = 0;
}
else
{
index++;
}
});
});
}
$(document).ready(function()
{
$('.img-rotator')
.mouseover(function () {
var refreshIntervalId = setInterval (rotateImage, 1000);
})
.mouseout(function () {
$(this).attr('src', imgOriginal);
})
});
Jsfiddle example here - https://jsfiddle.net/wbz35L68/15/
Thank you for any advice
You need to clear the setInterval on mouseout. I also reworked some of your code to clean things up and cache refs. You should also use mouseenter and mouseleave for this.
$(document).ready(function(){
// cache selector
var rotator = $('.img-rotator'),
// grab all data
data = rotator.data(),
// ref flip
imgFlip = data.flip,
// ref original
imgOriginal = data.original,
// get image urls
images = imgFlip.split(/,|, |;|; /),
// start index
index = 0,
// ref interval
refreshIntervalId = null;
function rotateImage(){
rotator.fadeOut('fast', function(){
$(this)
.attr('src', images[index])
.fadeIn('fast', function(){
var last = index === images.length - 1;
index = last ? 0 : index + 1;
});
});
}
rotator
.mouseenter(function(){
refreshIntervalId = setInterval(rotateImage, 1000);
})
.mouseleave(function(){
// clear interval and set null
clearInterval(refreshIntervalId) && (refreshIntervalId = null);
$(this).attr('src', imgOriginal);
})
});
.container {
margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<img class="img-rotator" data-flip="http://www.snorkl.tv/dev/loaderMax/images/bird.png, http://www.snorkl.tv/dev/loaderMax/images/whale.png" data-original="http://www.snorkl.tv/dev/loaderMax/images/crab.png" src="http://www.snorkl.tv/dev/loaderMax/images/crab.png" width="320" height="200"/>
</div>
</div>
</div>
I need to show three images one by one with using javascript setinterval function can you please any one help me.
Bellow is my html code.
<div class="imageHolder">
<img src="http://lorempixel.com/400/200/sports/" style="display:none;" class="image1" border="0" />
<img src="http://lorempixel.com/400/200/sports/1" style="display:none;" class="image2" border="0" />
<img src="http://lorempixel.com/400/200/" style="display:none;" class="image3" border="0" />
</div>
<head>
<script type="text/javascript">
function start() {
var images = document.querySelectorAll('.imageHolder img');
var images_count = images.length;
var image_index = false;
var delay = 3000; // 3 seconds delay
function animateImageHolder() {
if (false !== image_index) {
images[image_index].style = 'display:none';
image_index++;
image_index = (image_index < images_count ? image_index : 0);
} else {
image_index = 0;
}
images[image_index].style = 'display:inline';
}
animateImageHolder();
setInterval(animateImageHolder, delay);
}
</script>
</head>
<body onload="start()">
<!-- ... -->
This question is pretty much like "do my job for me" but you are honest in your english.
You did not say how long each image should be visible so I set it to 3 seconds (interval = 3000).
I recommend you to set the style attribute of the first image to be style="display:block" and the rest to style="display:none".
function slider(element) {
var next_image = 0
, interval = 3000
, images = Array.prototype.filter.call(element.children, function(child) {
return child.tagName === "IMG";
})
;
setInterval(function() {
images.forEach(function(image, i) {
image.style.display = i === next_image ? "block" : "none";
})
next_image = (next_image + 1) % images.length;
}, interval);
}
slider(document.querySelector("div.imageHolder"))
Html code :
<img src="images/assets/plus.png" alt="Earth" id="pic" class="portrait" onclick="changeImage()" />
Javascript:
var newsrc = "minus.png";
function changeImage() {
if (newsrc == "minus.png") {
document.images["pic"].src = "images/assets/minus.png";
document.images["pic"].alt = "minus";
newsrc = "minus.png";
} else {
document.images["pic"].src = "images/assets/plus.png";
document.images["pic"].alt = "plus";
newsrc = "plus.png";
}
}
I am using these code to change image onclick.Now i want that when i click the minus image again it will come back to plus image again .How can i do that?
if minus.png then set to minus.png? Else won't be never performed. Should be if not minus, then minus, otherwise plus. Change == to !=. And if you want image with id "pic", you should use getElementById().
Edit:
for multiple images use following and change id="pic" to class="pic" in <img>:
function changeImage() {
if (newsrc != "minus.png") {
for(var i = 0; i<document.getElementsByClassName("pic").length; i++) {
document.getElementsByClassName("pic")[i].src = "images/assets/minus.png";
document.getElementsByClassName("pic")[i].alt = "minus";
}
newsrc = "minus.png";
} else {
for(var i = 0; i<document.getElementsByClassName("pic").length; i++) {
document.getElementsByClassName("pic")[i].src = "images/assets/plus.png";
document.getElementsByClassName("pic")[i].alt = "plus";
}
newsrc = "plus.png";
}
You should use document.getElementById("pic") instead of what you have because the document.images[] method returns an array. In your case it returns "[object HTMLImageElement]".
You should also move var newsrc = "minus.png" inside your function. I'm not sure the function will recognize the variable the way you have it.
Finally you should not set the newsrc variable inside your if.
That being said this code is much more simplistic:
function changeImage() {
var pic = document.getElementById("pic");
var x = document.getElementById("pic").src;
if (x == "images/assets/plus.png"){
pic.src = "images/assets/minus.png"
// Plus whatever else you want to do
} else {pic.src = "images/assets/plus.png"
// Plus whatever else you want to do
}
}
I am trying to make an 8 image button rotator via javascript, I have buttons "<" ">" "<<" ">>" and a check box image rotator. I can send my code so far and screenshot, can someone help? here is my code.
<div id="images">
<img src="images/sample1.jpg" id="image"/>
</div>
<div id="buttonContainer">
<button id="firstImageButton" title="Click to view the first image." onClick="previousImage("image")">«</button>
<button id="previousImageButton" title="Click to view the previous image." ><</button>
<button id="nextImageButton" title="Click to view the next image." >></button>
<button id="lastImageButton" title="Click to view the last image." onClick="images/sample8.jpg">»</button>
<br/><input type="checkbox" id="autoRotate" /><label for="autoRotate">Click to auto-rotate</label>
</div>
</div>
</div>
script
<script>
var images = [ "images/sample1.jpg", "images/sample2.jpg", "images/sample3.jpg", "images/sample4.jpg", "images/sample5.jpg", "images/sample6.jpg", "images/sample7.jpg", "images/sample8.jpg" ]
var currentImageIndex = 0;
var currentImage = 0;
function nextImageButton() {
currentImage += 1;
displayImage(currentImage);
}
function previousImageButton() {
currentImage -= 1;
displayPage(currentImage);
}
function displayImage (imageIndex) {
document.getElementById("images").innerHTML = images[imageIndex];
document.getElementById("nextImageButton").style.visibility = "visible";
document.getElementById("previousImageButton").style.visibility = "visible";
if(imageIndex == images.length - 1) {
document.getElementById("nextImageButton").style.visibility = "hidden";
}
if(imageIndex == 0) {
document.getElementById("previousImageButton").style.visibility = "hidden";
}
}
</script>
change all tabs before posting.
create a jsfiddle.net with the code.
what's with the </div></div></div> ?
what is onClick="images/sample8.jpg" supposed to do?
you have the same quotes in the onclick - if you wrap quotes you need to do ="...('xxx');"
document.getElementById("images").innerHTML = images[imageIndex];
should be document.getElementById("image").src = images[imageIndex];
Live Demo
var images = [ "http://lorempixel.com/output/food-q-c-640-480-1.jpg",
"http://lorempixel.com/output/food-q-c-640-480-2.jpg",
"http://lorempixel.com/output/food-q-c-640-480-3.jpg",
"http://lorempixel.com/output/food-q-c-640-480-4.jpg",
"http://lorempixel.com/output/food-q-c-640-480-5.jpg",
"http://lorempixel.com/output/food-q-c-640-480-6.jpg",
"http://lorempixel.com/output/food-q-c-640-480-7.jpg" ]
var tId,currentImage = 0;
function changeImage(dir) {
if (dir === 0) currentImage = 0; // first image
else if (dir===images.length-1) currentImage=images.length-1; // last image
else currentImage+=dir*1; // next or previous
if (currentImage<0 || currentImage>=images.length) currentImage=0; // will wrap
displayImage(currentImage);
}
function displayImage (imageIndex) {
window.console && console.log(imageIndex); // remove when happy
// document.getElementById("msg").innerHTML=(imageIndex+1)+"/"+images.length;
document.getElementById("image").src = images[imageIndex];
document.getElementById("nextImageButton").style.visibility=(imageIndex<images.length-1)?"visible":"hidden";
document.getElementById("previousImageButton").style.visibility=(imageIndex>0)?"visible":"hidden";
}
function rotate() {
changeImage(+1);
}
window.onload=function() {
document.getElementById("autoRotate").onclick=function() {
if (this.checked) tId=setInterval(rotate,3000)
else clearInterval(tId);
}
document.getElementById("firstImageButton").onclick=function() { changeImage(0) }
document.getElementById("lastImageButton").onclick=function() { changeImage(images.length-1) }
document.getElementById("nextImageButton").onclick=function() { changeImage(1) }
document.getElementById("previousImageButton").onclick=function() { changeImage(-1) }
}
Basically, what I'm trying to do is shuffle through images using some JavaScript code. All it does is change the display style of the current image to block, and at the same time change the previous one to none.
The HTML code:
<body>
<img src="http://bit.ly/yOqqbg" id="image1" style="display: block;">
<img src="http://bit.ly/dezBUZ" id="image2" style="display: none;">
<img src="http://bit.ly/IvM5HE" id="image3" style="display: none;">
</body>
The JavaScript code:
var id = ["image1", "image2", "image3"]; //Array with the id's in the document you want
to shuffle through
var i = 0; //Set inital array element
initiateTimer(); //Get the loop going
function initiateTimer() {
if (i > id.length) {
i = 0;
initiateTimer();
}
setTimeout(function() { changeElement(); }, 2000); //2000 = 2 seconds
}
function changeElement() {
if (id === 0) {
document.getElementById(id[2]).style.display = 'none';
document.getElementById(id[i]).style.display = 'block';
} else {
document.getElementById(id[i - 1]).style.display = 'none';
document.getElementById(id[i]).style.display = 'block';
}
i += 1;
initiateTimer();
}
when i === 3 you will have problems
if (i > id.length) {
should become
if (i >= id.length) {
UPDATE: http://jsfiddle.net/HgNuc/