i have how many images in gallery that when click on the any image,image displayed on the other bigger img tag.i would like to implement a previous and next button that i could movement between images.i think could use next() method in javascript and i found below Example but i'm beginner in js and i could not dose this work.
<script>
var interval = undefined;
$(document).ready(function () {
interval = setInterval(getNext, 2000); // milliseconds
$('#next').on('click', getNext);
$('#prev').on('click', getPrev);
$('.slideshow a').onclick(function () {
var src=$('a img').attr("src");
$('#bigImage img').attr("src",src);
});
});
function getNext() {
var $curr = $('.slideshow img:visible'),
$next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
transition($curr, $next);
}
function getPrev() {
var $curr = $('.slideshow img:visible'),
$next = ($curr.prev().length) ? $curr.prev() : $('.slideshow img').last();
transition($curr, $next);
}
function transition($curr, $next) {
clearInterval(interval);
$next.css('z-index', 2).fadeIn('slow', function () {
$curr.hide().css('z-index', 0);
$next.css('z-index', 1);
});
}
</script>
<div class="slideshow">
<img src="first-image.jpg" width="150" height="150" alt="first image">
<img src="second-image.jpg" width="150" height="150" alt="second image">
<img src="third-image.jpg" width="150" height="150" alt="third image">
<img src="fourth-image.jpg" width="150" height="150" alt="fourth image">
...
</div>
<button type="button" Id="prev">Previous</button>
<button type="button" Id="next">Next</button>
<div id="bigImage">
<img src="#" width="800" height="600" alt="Big Image">
</div>
<style>
.slideshow {
position: relative; /* necessary to absolutely position the images inside */
width: 500px; /* same as the images inside */
height: 100px;
}
.slideshow img {
position: absolute;
display: none;
}
.slideshow img:first-child {
display: block; /* overrides the previous style */
}
</style>
Please Guide Me!
thanks!
Related
I would need help on toggling the image hovering effect on click of a button. I have a set of images with id 'myImg' Below code is not working. Can someone please help. Thanks.
$("button.hov").click(function() {
if ($(this).text().trim() == 'Hover ON') {
$(this).text("Hover OFF");
$('img#myImg.hover').css({
"-webkit-transform": 'none'
});
} else {
$(this).text("Hover ON");
$('img#myImg.hover').css({
"-webkit-transform": 'scale(3, 3)'
});
}
});
img#myImg:hover {
-webkit-transform: scale(3, 3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button hov" style="margin-left: 2px;height: 30px;">
HOVER ON
</button>
<img id="myImg" src="https://i.stack.imgur.com/XZ4V5.jpg" width="240" height="160"/>
<img id="myImg" src="https://i.stack.imgur.com/7bI1Y.jpg" width="240" height="160"/>
You cannot include hover in your jquery selector, instead, define the hover effect with a class, and make use of .addClass() and .removeClass()
HTML
<button class="button hov" style="margin-left: 2px;height: 30px;">
HOVER ON
</button>
<img id="myImg" src="/your-image"/>
JS
$("button.hov").click(function () {
if ($(this).text().trim() == 'Hover ON') {
$(this).text("Hover OFF");
$('img#myImg').removeClass("hoverEffect");
}
else {
$(this).text("Hover ON");
$('img#myImg').addClass("hoverEffect");
}
});
CSS
img#myImg.hoverEffect:hover {
-webkit-transform: scale(3, 3);
}
Something like this should help you get started
$(".toggle-scale").click(function() {
var el = $(this);
var buttonText = el.text().trim();
if (buttonText == 'Hover On') {
el.text("Hover OFF");
$('.image').addClass('enlarge');
} else {
el.text("Hover On");
$('.image.enlarge').removeClass('enlarge');
}
});
.image-container {
width: 500px;
height: 500px;
overflow: hidden;
}
.image {
transition: all 0.2s ease-in-out
}
.image.enlarge {
transform: scale(1.5, 1.5);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button class="toggle-scale" style="margin-left: 2px;height: 30px;">Hover On</button>
<div class="image-container">
<img src="https://picsum.photos/300" class="image" />
</div>
Changing id= to class= in the HTML/CSS and JS, you already have what you need, just swap in/out the css scale that you already having by giving it a classname (hover in the case below) and toggling that class:
$("button.hov").click(function() {
$("img.myImg").toggleClass("hover");
$(this).text(() =>
$("img.myImg").hasClass("hover")
? "switch hover off"
: "switch hover on"
);
});
img.myImg.hover:hover {
-webkit-transform: scale(3, 3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="button hov" style="margin-left: 2px;height: 30px;">
switch hover on
</button>
<hr/>
<img class="myImg" src="https://i.stack.imgur.com/XZ4V5.jpg" width="240" height="160" />
<img class="myImg" src="https://i.stack.imgur.com/7bI1Y.jpg" width="240" height="160" />
I am getting crazy...there is an error in the scrip but I dont find it and, strange, also the debug of explorer doesn't find it!!
I cheked it a lot of time with the excercise but I am not able to find it.
<script src="../_js/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#gallery img').each(function(i) {
var imgFile = $(this).attr('src');
var preloadImage = new Image();
var imgExt = /(\.\w{3,4}$)/;
preloadImage.src = imgFile.replace(imgExt,'_h$1');
$(this).hover(
function() {
$(this).attr('src', preloadImage.src);
},
function () {
var currentSource=$(this).attr('src');
$(this).attr('src', imgFile);
}); // end hover
}); // end each
$('#gallery a').click(function(evt){
evt.preventDefault();
var imgPath = $(this).attr('href');
var oldImage = $('#photo img');
var newImage = $('<img src"' + imgPath +'">');
newImage.hide();
$('#photo').prepend(newImage);
newImage.fadeIn(1000);
oldImage.fadeOut(1000,function(){
$(this).remove();
}); //end fadeout
});// end click
$('#gallery a:first').click();
}); // end ready
</script>
<style>
#gallery {
float: left;
width: 90px;
margin-right: 30px;
margin-left: 10px;
border-right: white 1px dotted;
}
#gallery img {
display: inline-block;
margin: 0 0 10px 0;
border: 1px solid rgb(0,0,0);
}
#photo {
margin-left: 150px;
position: relative;
}
#photo img {
position: absolute;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rollover Images</title>
<link href="../_css/site.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<header>
JAVASCRIPT <span class="amp">&</span> jQUERY: THE MISSING MANUAL
</header>
<div class="content">
<div class="main">
<h1>Slideshow</h1>
<div id="gallery"> <img src="../_images/small/slide1.jpg" width="70" height="70" alt="golf balls"> <img src="../_images/small/slide2.jpg" width="70" height="70" alt="rock wall"> <img src="../_images/small/slide3.jpg" width="70" height="70" alt="old course"> <img src="../_images/small/slide4.jpg" width="70" height="70" alt="tees"> <img src="../_images/small/slide5.jpg" width="70" height="70" alt="tree"> <img src="../_images/small/slide6.jpg" width="70" height="70" alt="ocean course"></div>
<div id="photo"></div>
</div>
</div>
<footer>
<p>JavaScript & jQuery: The Missing Manual, 3rd Edition, by David McFarland. Published by O'Reilly Media, Inc.</p>
</footer>
</div>
</body>
</html>
The // end ready part refers to $(document).ready(function() {.
Your code must be:
$(document).ready(function() {
$('#gallery a').click(function(evt) {
evt.preventDefault();
var imgPath = $(this).attr('href');
var oldImage = $('#photo img');
var newImage = $('<img src"' + imgPath + '">');
newImage.hide();
$('#photo').prepend(newImage);
newImage.fadeIn(1000);
oldImage.fadeOut(1000, function() {
$(this).remove();
}); //end fadeout
}); // end click
$('#gallery a:first').click();
}); // end ready
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
you have got syntax errors, i have corrected your syntax errors.
Here is the error free version:
$('#gallery a').click(function(evt){
evt.preventDefault();
var imgPath = $(this).attr('href');
var oldImage = $('#photo img');
var newImage = $('<img src"' + imgPath +'">');
newImage.hide();
$('#photo').prepend(newImage);
newImage.fadeIn(1000);
oldImage.fadeOut(1000,function(){
$(this).remove();
}); //end fadeout
});// end click
$('#gallery a:first').click(function () {
console.log("something")
});
you should post your html and expected behaviour if you want good answer.
Edit: after you updated your question, here you go with the solution:
$(document).ready(function() {
$('#gallery img').each(function() {
var imgFile = $(this).attr('src');
var preloadImage = new Image();
var imgExt = /(\.\w{3,4}$)/;
preloadImage.src = imgFile.replace(imgExt,'_h$1');
$(this).hover(
function() {
$(this).attr('src', preloadImage.src);
},
function() {
$(this).attr('src', imgFile);
}
); // end hover
}); // end each
$('#gallery a').click(function(evt) {
evt.preventDefault();
var imgPath = $(this).attr('href');
var oldImage = $('#photo img');
var newImage = $('<img src="' + imgPath + '">');
newImage.hide();
$('#photo').prepend(newImage);
newImage.fadeIn(1000);
oldImage.fadeOut(1000,function(){
$(this).remove();
}); // end fadeout
}); // end click
$('#gallery a:first').click();
}); // end ready
#gallery {
float: left;
width: 90px;
margin-right: 30px;
margin-left: 10px;
border-right: white 1px dotted;
}
#gallery img {
display: inline-block;
margin: 0 0 10px 0;
border: 1px solid rgb(0,0,0);
}
#photo {
margin-left: 150px;
position: relative;
}
#photo img {
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="wrapper">
<header>
JAVASCRIPT <span class="amp">&</span> jQUERY: THE MISSING MANUAL
</header>
<div class="content">
<div class="main">
<h1>Slideshow</h1>
<div id="gallery">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=one&w=70&h=70" width="70" height="70" alt="golf balls">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=two&w=70&h=70" width="70" height="70" alt="rock wall">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=three&w=70&h=70" width="70" height="70" alt="old course">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=four&w=70&h=70" width="70" height="70" alt="tees">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=five&w=70&h=70" width="70" height="70" alt="tree">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=six&w=70&h=70" width="70" height="70" alt="ocean course">
</div>
<div id="photo"></div>
</div>
</div>
<footer>
<p>JavaScript & jQuery: The Missing Manual, 3rd Edition, by David McFarland. Published by
O'Reilly Media, Inc.</p>
</footer>
</div>
And a link to the pen : https://codepen.io/faw/pen/MmoQRe?editors=1111
OK Finally I found the error it was this line
var newImage = $('');
I missed the = after src
Thanks
I know this has been asked many times before, and I tried to look at the answers and follow them. But I just can't seem to figure out how to apply those answers with my specific code and now i'm stuck. If anyone could look over it and help me it would be very appreciated.
Simply, I just want to make an autoplay feature that plays those 6 images and can also play and pause. Ideally with one button. That's all.
[JSfiddle link. Though it has no pictures. Maybe it helps?][1]
window.onload = function() {
function show1() {
document.getElementById("showingImage").src = "images/.jpg";
}
function show2() {
document.getElementById("showingImage").src = "images/2.jpg";
}
function show3() {
document.getElementById("showingImage").src = "images/3.jpg";
}
function show4() {
document.getElementById("showingImage").src = "images/4.jpg";
}
function show5() {
document.getElementById("showingImage").src = "images/5.jpg";
}
function show6() {
document.getElementById("showingImage").src = "images/6.jpg";
}
var one = document.getElementById("one");
one.onmouseover = show1;
var two = document.getElementById("two");
two.onmouseover = show2;
var three = document.getElementById("three");
three.onmouseover = show3;
var four = document.getElementById("four");
four.onmouseover = show4;
var five = document.getElementById("five");
five.onmouseover = show5;
var six = document.getElementById("six");
six.onmouseover = show6;
}
#container {
width: 800px;
margin: 0 auto;
background-color: red;
}
#showingImage {
width: 800px;
height: 400px;
}
#thumbnail {
max-height: 50px;
margin: 10 auto 10 10;
text-align: center;
}
HTML:
<body>
<div id="container">
<div>
<img id="showingImage" src="images/1.jpg">
</div>
<div id="thumbnail">
<span id="one"><img id="thumbnail" src="images/1.jpg"></span>
<span id="two"><img id="thumbnail" src="images/2.jpg"></span>
<span id="three"><img id="thumbnail" src="images/3.jpg"></span>
<span id="four"><img id="thumbnail" src="images/4.jpg"></span>
<span id="five"><img id="thumbnail" src="images/5.jpg"></span>
<span id="six"><img id="thumbnail" src="images/6.jpg"></span>
</div>
</div>
</body>
Bonus points if you could explain how apply the Jquery fadeIn to the mouseover part and the autoplay.
Here you go. I refactored the show and mouseover functions into a single function apiece; the show() function uses jQuery's fadeIn and fadeOut effects. The button starts and stops the slideshow. I also changed your CSS a bit so that the images have unique ids and thumbnail is a class.
window.onload = function() {
var playing;
var currentImage = 1;
// show an image with 200ms fade in/out effects
function show(img) {
$("#showingImage").fadeOut(200, function() {
$("#showingImage").attr("src", "https://dl.dropboxusercontent.com/u/76726218/images/" + img + ".jpg").fadeIn(200);
});
}
// initialze the mouseover
$("img.thumbnail").mouseover(function() {
console.log($(this));
show($(this).attr("id"));
});
// start autoplay with 1s per image
function play() {
if (!playing) {
playing = setInterval(function() {
show(currentImage + 1);
currentImage++;
currentImage %= 6;
}, 1000);
}
}
// pause autoplay
function pause() {
clearInterval(playing);
playing = false;
}
// set up the button to toggle between play & pause
$("#playPauseButton").click(function(e) {
if (playing) {
pause();
$("#playPauseButton").html("Play");
} else {
play();
$("#playPauseButton").html("Pause");
}
});
// start autoplay
play();
}
#container {
width: 800px;
margin: 0 auto;
background-color: red;
text-align: center;
}
#showingImage {
width: 800px;
height: 400px;
}
.thumbnail {
max-height: 50px;
margin: 10 auto 10 10;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div>
<img id="showingImage" src="https://dl.dropboxusercontent.com/u/76726218/images/1.jpg">
</div>
<div class="thumbnail">
<span><img id="1" class="thumbnail" src="https://dl.dropboxusercontent.com/u/76726218/images/1.jpg"></span>
<span><img id="2" class="thumbnail" src="https://dl.dropboxusercontent.com/u/76726218/images/2.jpg"></span>
<span><img id="3" class="thumbnail" src="https://dl.dropboxusercontent.com/u/76726218/images/3.jpg"></span>
<span><img id="4" class="thumbnail" src="https://dl.dropboxusercontent.com/u/76726218/images/4.jpg"></span>
<span><img id="5" class="thumbnail" src="https://dl.dropboxusercontent.com/u/76726218/images/5.jpg"></span>
<span><img id="6" class="thumbnail" src="https://dl.dropboxusercontent.com/u/76726218/images/6.jpg"></span>
</div>
<button id="playPauseButton">Pause</button>
</div>
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 am using jquery to create an image rotator. I found the code below here: How to fade loop gallery background images
but I was wondering if there is a way it can fade from one image to the next instead of to white in between?
$(window).load(function(){
var initialBg = $('#mydiv').css("background-image"); // added
var firstTime = true;
var arr = [initialBg, "url(HP_jQuery2.jpg)", "url(HP_jQuery3.jpg)"]; // changed
(function recurse(counter) {
var bgImage = arr[counter];
if (firstTime == false) {
$("#mydiv").fadeOut("slow", function(){
$('#mydiv').css('background-image', bgImage); // fixed
});
$("#mydiv").fadeIn("slow");
} else {
firstTime = false;
}
delete arr[counter];
arr.push(bgImage);
setTimeout(function() {
recurse(counter + 1);
}, 3600);
})(0);
});
Give this a try: http://www.simonbattersby.com/blog/simple-jquery-image-crossfade/
JSFiddle demo
HTML:
<div id="cycler">
<img class="active" src="image1.jpg" alt="My image" />
<img src="image2.jpg" alt="My image" />
<img src="image3.jpg" alt="My image" />
<img src="image4.jpg" alt="My image" />
</div>
CSS:
#cycler { position:relative; }
#cycler img { position:absolute; z-index:1 }
#cycler img.active { z-index:3 }
JavaScript:
function cycleImages() {
var $active = $('#cycler .active');
var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
$next.css('z-index', 2); //move the next image up the pile
$active.fadeOut(1500, function() { //fade out the top image
$active.css('z-index', 1).show().removeClass('active'); //reset the z-index and unhide the image
$next.css('z-index', 3).addClass('active'); //make the next image the top one
});
}
$(document).ready(function() {
// run every 3s
setInterval(cycleImages, 3000);
});