Switing between images on Gallery? - javascript

I've coded a gallery with jQuery, CSS & HTML, and I want to add in next image and previous image buttons, so I have added them to the page and I have made functions for them but I don't know how I will do this. Here is my code and if any body knows any good way of doing this I'd be happy! Thanks!
edit I haven't received a response so I'll try and give more information, I'm trying to get arrows on the left and right hand side of my image so I can go to previous and next image and I don't know how to do this.
$(document).ready(function(){
$('.thumbnail').click(function(){
$('.backdrop').animate({'opacity':'.5'}, 300, 'linear');
$('.box').animate({'opacity' : '1.00'}, 300, 'linear');
$('.box, .selectors, .backdrop').css('display', 'block');
$('.box').html('<img class="boximg" src="' + $(this).attr('src') + '">');
//$('.box').html('<img class="boximg" src="' + src + '">');
});
$('.nextimg').click(function(){
$('.box').html('<img class="boximg" src="' + '">');
});
$('.previmg').click(function(){
$('.box').html('<img class="boximg" src="'+'">');
});
$('.backdrop').click(function(){
close_box();
});
});
$(document).keydown(function(event){
if (event.keyCode == 27 || event.keyCode == 13){
close_box();
};
});
function close_box(){
$('.backdrop, .box').animate({'opacity': '0'}, 300, 'linear', function(){
$('.backdrop, .box').css('display', 'none');
$('.selectors').css('display', 'none');
});
}
.backdrop{
position: absolute;
display: none;
top: 0px;
left: 0px;
background-color: #000;
opacity: 0;
height: 100%;
width: 100%;
}
.box{
position: absolute;
display: none;
background-color: white;
opacity: 0;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
border-radius: 13px;
}
.close{
float: right;
margin-right: 5px;
}
.boximg {
position: absolute;
top: 3%;
left: 2%;
width: 96%;
height: 94%;
}
.thumbnail{
border-radius: 30px;
height: 300px;
width: 300px;
}
.selectors{
display: none;
}
.nextimg{
position: absolute;
right: 3%;
top: 50%;
}
.previmg{
position: absolute;
left: 3%;
top: 50%;
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</head>
<body>
<div class="images">
<img class="thumbnail" src="urlttr.jpeg">
<img class="thumbnail" src="http://www.hdwallpapers.eu/wp/sci-fi-planet-background-1920x1080.jpg">
<img class="thumbnail" src="http://www.wallpapersdb.org/wallpapers/beach/sunrise_1920x1080.jpg">
<img class="thumbnail" src="http://free-hq-wallpapers.com/wp-content/uploads/2009/07/New-York-Sunset-1920x1080.jpg">
</div>
<div class="backdrop"></div>
<div class="box"></div>
<div class="selectors">
<image class="nextimg" src="right_arrow.png">
<image class="previmg" src="left_arrow.png">
</div>
</body>
</html>

Taking your code to jsfiddle, I came up with this as a solution.
<div class="images">
<!-- In the a-href you put the path to the big sized image. In the image src the small thumb path. -->
<a href="/city-q-c-640-480-3.jpg">
<img class="thumbnail" src="/city-q-c-640-480-3.jpg"/>
</a>
<a href="/sci-fi-planet-background-1920x1080.jpg">
<img class="thumbnail" src="/sci-fi-planet-background-1920x1080.jpg"/>
</a>
<a href="/sunrise_1920x1080.jpg">
<img class="thumbnail" src="/sunrise_1920x1080.jpg"/>
</a>
<a href="/New-York-Sunset-1920x1080.jpg">
<img class="thumbnail" src="/New-York-Sunset-1920x1080.jpg"/>
</a>
</div>
<div class="backdrop"></div>
<div class="box"></div>
<div class="selectors">
<img class="nextimg" src="right_arrow.png"/>
<img class="previmg" src="left_arrow.png"/>
</div>
You can see there, that I surrounded the thumbs with a-tags - you could also instead use a data attribute or something similar to add the path for the big version of the images.
$(function() {
var $currentImageLink; // the current a tag
$('.images a').click(function(event){
event.preventDefault();
$currentImageLink = $(this);
$('.backdrop').animate({'opacity':'.5'}, 300, 'linear');
$('.box').animate({'opacity' : '1.00'}, 300, 'linear');
$('.box, .selectors, .backdrop').css('display', 'block');
$('.box').html('<img class="boximg" src="' + $(this).attr('href') + '">');
});
$('.nextimg').click(function() {
$currentImageLink = $currentImageLink.next('a');
if (0 == $currentImageLink.length) {
$currentImageLink = $('.images a:first-child');
}
$('.box').html('<img class="boximg" src="' + $currentImageLink.attr('href') + '">');
});
$('.previmg').click(function() {
$currentImageLink = $currentImageLink.prev('a');
if (0 == $currentImageLink.length) {
$currentImageLink = $('.images a:last-child');
}
$('.box').html('<img class="boximg" src="' + $currentImageLink.attr('href') +'">');
});
$('.backdrop').click(function() {
close_box();
});
});
$(document).keydown(function(event) {
if (event.keyCode == 27 || event.keyCode == 13) {
close_box();
}
});
function close_box() {
$('.backdrop, .box').animate({'opacity': '0'}, 300, 'linear', function() {
$('.backdrop, .box').css('display', 'none');
$('.selectors').css('display', 'none');
});
}
Furthermore I added the variable $currentImageLink in which I put always the current link element, that is shown at that moment in your gallery.
In the functions for next and prev that variable is filled with the next/prev link element. If there is no such element, it will become the first or last element.
Depending on what you want to do with the gallery, maybe you could then also make the images fade-out/-in or preload the big images.

Related

animate() doesn't work all the time

I am trying to create a simple slider with jQuery.
$('.next').on('click', function() {
$('li').animate({'right': '400px'}, 300);
});
$('.back').on('click', function() {
$('li').animate({'left': 0}, 300);
});
The problem is when I click on the bottom with the class next, it only slides once and the second click doesn't work.
How can I fix this?
https://jsfiddle.net/6t1wx95f/
Simple, with $('li').animate({'left': '-=400px'}, 300); for next.
$('.next').on('click', function() {
$('li').animate({'left': '-=400px'}, 300);
});
$('.back').on('click', function() {
if(parseInt($('li').css('left')) <= 0){
if(parseInt($('li').css('left')) >= -400){
$('li').animate({'left': "0"}, 300);
} else {
$('li').animate({'left': '+=400px'}, 300);
}
}
});
.slider {
overflow: hidden;
width: 500%;
}
.slider ul {
width: 500%;
}
.slider ul li {
float: left;
list-style: none;
position: relative;
transition: all 0.65s;
}
.next,
.back {
width: 100px;
padding: 5px;
text-align: center;
background-color: skyblue;
float: left;
margin: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<ul>
<li>
<img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="" class="active">
</li>
<li>
<img src="https://www.w3schools.com/css/img_lights.jpg" alt="">
</li>
<li>
<img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg" alt="">
</li>
<li>
<img src="http://images.all-free-download.com/images/graphiclarge/a_london_cityscape_515129.jpg" alt="">
</li>
<li>
<img src="https://image.jimcdn.com/app/cms/image/transf/dimension=1920x400:format=jpg/path/s86d6d6c688ca86fa/image/ie4265a3cd27b2997/version/1451246087/image.jpg" alt="">
</li>
</ul>
</div>
<div class="back">Back</div>
<div class="next">Next</div>
Your code just adds a single left: and right: style to the element. It doesn't remove/reset these values so it only ever does anything n first click:
$('.next').on('click', function() {
$('li').animate({'right': '400px'}, 300);
});
$('.back').on('click', function() {
$('li').animate({'left': 0}, 300);
});
What you need to do is only animate either the left or the right (by using positive and negative values), not both, e.g.
$('.next').on('click', function() {
$('li').animate({'right': '400px'}, 300);
});
$('.back').on('click', function() {
$('li').animate({'right': 0}, 300);
});
Of course this won't make the thing work entirely (you'll need to increment/decrement the amount you're moving by if you want to animate each slide) but hopefully it points you in the right direction.

Random Image Slider (JS)

I have an image slider.
Unfortunately,
The image slider gets stuck on the second image.
I want the image slider to cycle through images in an infinite random loop.
How do I do this?
Here is my jsfiddle:
http://jsfiddle.net/rAqcP/248/
---------------------------------------
JS Code
$(document).ready(function() {
//$('.slider #1').show({right:'0'}, 500);
$('.slider #1').show('slide',{direction:'right'},500);
$('.slider #1').delay(5500).hide('slide',{direction:'left'},500);
var sliderTotalImg = $('.slider img').size();
var counterIndex = 2;
setInterval(function () {
//$('.slider #' + counterIndex).show({right:'0'}, 500);
$('.slider #' + counterIndex).show('slide',{direction:'right'},500);
$('.slider #' + counterIndex).delay(5500).hide('slide',{direction:'left'},500);
if(count==slidecount){
count=1;
}else{
count=count+1;
}
},6500);});
DIV CODE
<div class = "slider">
<img id="1" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/001.png"/>
<img id="2" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/002.png"/>
<img id="3" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/003.png"/>
<img id="4" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/004.png"/>
</div>
CSS CODE
.slider {
width: 20%;
height: 30%;
overflow:hidden;
border: 1px solid black;
background-image:url("http://test.softvex.com/Slider/Img/loading.gif");
background-repeat:no-repeat;
background-position:center;
}
.slider img {
display:none;
}
You never define slidecount. It is used only in your if statement. You never define count. Its first use is in the same if statement.
I'm not sure if you did so, but you can watch the console output (keyboard shortcut F12) to see what errors occur in your code. In your original code the error was that count was undefined. It only shows the first error, so it would have shown an error about slidecount after you fixed the one with count.
Note: There was nothing in your code that was random. So, I am unsure as to what you were intending to make random.
The following will work (JSFiddle):
$(document).ready(function() {
//$('.slider #1').show({right:'0'}, 500);
$('.slider #1').show('slide', {
direction: 'right'
}, 500);
$('.slider #1').delay(5500).hide('slide', {
direction: 'left'
}, 500);
var sliderTotalImg = $('.slider img').size();
var counterIndex = 2;
var slidecount = 4;
setInterval(function() {
//$('.slider #' + counterIndex).show({right:'0'}, 500);
$('.slider #' + counterIndex).show('slide', {
direction: 'right'
}, 500);
$('.slider #' + counterIndex).delay(5500).hide('slide', {
direction: 'left'
}, 500);
if (counterIndex >= slidecount) {
counterIndex = 1;
} else {
counterIndex++;
}
}, 6500);
});
.slider {
width: 20%;
height: 30%;
overflow: hidden;
border: 1px solid black;
background-image: url("http://test.softvex.com/Slider/Img/loading.gif");
background-repeat: no-repeat;
background-position: center;
}
.slider img {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div class="slider">
<img id="1" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/001.png" />
<img id="2" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/002.png" />
<img id="3" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/003.png" />
<img id="4" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/004.png" />
</div>

show moving image form one div to other div in javascript or jquery

When I click on image it will go in other div but when it goes in other div it should be display moving image from div A to div B
Can any one tried this ?
I did this just for fun: fiddle
HTML
<div class="blue">
<img src="http://fakeimg.pl/200/" class="move-me" />
<img src="http://fakeimg.pl/200/" class="move-me" />
<img src="http://fakeimg.pl/200/" class="move-me" />
</div>
<div class="green"></div>
jQuery
$(document).on('click', '.move-me', function(){
var $img = $(this);
var x1 = $img.position().left;
var y1 = $img.position().top;
var $imgCloned1 = $img.clone().css("visibility", "hidden");
var $imgCloned2 = $imgCloned1.clone();
$imgCloned2.insertAfter($img);
$(".green").append($img);
var x2 = $img.position().left;
var y2 = $img.position().top;
$img.css({'position':'absolute', 'left': x1 + 'px', 'top': y1 + 'px'});
$imgCloned1.appendTo(".green");
$img.animate({'left': x2, 'top': y2 + 'px'}, 1000, function() {
$img.css({'position':'', 'left': '', 'top': ''});
$img.removeClass("move-me");
$imgCloned1.remove();
$imgCloned2.remove();
});
});
CSS
.blue, .green {
min-height: 200px;
margin: 30px
}
.blue {
background: skyblue;
}
.green {
background: lightgreen;
}
You can use the following script in order to move one image from one position to another based on the position of a "target" div.
When you click on the image, image move to "target" div.
When click on yellow box, you can change position of "target" div and on click on image you can preposition image again.
(function(window) {
var _app = {
elmImage: null,
elmTarget: null,
imageGeometry: null,
targetGeometry: null,
getDomImage: function() {
this.elmImage = document.getElementById('image');
},
getDomSourceGeometry: function() {
this.imageGeometry = this.elmImage.getBoundingClientRect();
},
getDomtarget: function() {
this.elmTarget = document.getElementById('target');
},
getDomTargetGeometry: function() {
this.targetGeometry = this.elmTarget.getBoundingClientRect();
},
animate: function() {
var top = this.targetGeometry.top + 'px',
left = this.targetGeometry.left + 'px';
$(this.elmImage).animate({
top: top,
left: left
});
},
listenImageClick: function() {
$(this.elmImage).click(function() {
_app.animate();
});
},
listenChangeTarget: function() {
$('#targetChange').click(function() {
this.changeTargetPosition();
}.bind(this));
},
changeTargetPosition: function() {
$(this.elmTarget).css({
top: '100px',
left: '50px'
});
this.logic();
},
logic: function() {
_app.getDomImage();
_app.getDomSourceGeometry();
_app.getDomtarget();
_app.getDomTargetGeometry();
}
};
this.elmImage = null;
$(document).ready(function() {
_app.logic();
_app.listenImageClick();
_app.listenChangeTarget();
});
})(window);
#target {
position: absolute;
top: 300px;
left: 300px;
width: 200px;
height: 200px;
background-color: darkgray;
}
#image {
position: absolute;
width: 200px;
height: 200px;
}
#targetChange {
position: absolute;
top: 0;
left: 300px;
width: 300px;
height: 20px;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target"></div>
<img id="image" src="http://lorempixel.com/200/200/" alt="Smiley face" height="42" width="42">
<div id="targetChange"> Click here to change position target div</div>

jQuery enlarge image map on mouse over

I have an image over which I created hotspots for hyperlinks using image map. Now I need to enlarge/zoom over the images on mouse over. I have this so far
<script type="text/javascript">
$(document).ready(function () {
$('.mapping').mouseover(function() {
$(this).animate({
width: "110%",
height: "50%"
}, 'slow');
});
});
</script>
</head>
<body>
<p>
<map id="ImgMap0" name="ImgMap0">
<area alt="" coords="4, 14, 67, 34" id="a" class="mapping"
href="#" shape="rect" />
<area alt="" coords="5, 55, 70, 74" id="b" class="mapping"
href="# shape="rect" />
....
<img alt="" class="auto-style1" height="529" src="Tools.jpg"
width="800" usemap="#ImgMap0" /></p>
</p></body>
But the animate () is not working. Alert is being called so I know mouseover() is working. Any ideas for enlarging the area in image map?
JS Fiddle link
https://jsfiddle.net/z2Lkf8p0/
You cannot enlarge image's map in any way.
You can do this with another way. I'd created a fiddle for it.
http://jsfiddle.net/ebilgin/141bkx84/
HTML
<div class="container">
<img src="http://dummyimage.com/600x400/000/fff" alt="" />
<div class="map1 map"></div>
<div class="map2 map"></div>
</div>
CSS
.container {
position: relative;
width: 600px;
}
.container img {
position: absolute;
z-index: 1;
}
.map {
position: absolute;
background: #F0F;
z-index: 2;
}
.map1 {
left: 10px;
top: 10px;
width: 100px;
height: 100px;
}
.map2 {
right: 10px;
top: 10px;
width: 100px;
height: 100px;
}
JS
$(".map").on("mouseenter", function () {
$(this).animate({
width: "200px",
height: "200px"
});
});
Area to CSS convert
If all areas types are rectangle its easy. n1,n2,n3,n4
n1: y beginning
n2: x beginning
n3: y ending
n4: x ending
You can convert it.
left: n2;
top: n1;
width: n3 - n1;
height: n4 - n2;
Try this,
<script type="text/javascript">
$(document).ready(function () {
$('.mapping').hover(function() {
alert('Mouse Hovered');
//some statements
});
});
</script>
Good Luck.. ['}

This code won't work// How to get the div to slide in-line with other divs on mouse over?

I am aware there are discussions similar and I have read them, analysed them and tried them in my code. The code below is what I currently have, trust me, I have spent all day exhausting all methods to prevent me from asking here but I give up! This is by far the most frustrating goal.
I would like to have a header with a little bar that slides across above each menu item on hover over. A perfect example of what I would like is located here at http://www.wix.com/ . Please visit and move your mouse over the navigation bar and you'll understand instatly what I am trying to achieve.
Here is my current code...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
div {
display: inline-block;
float:left;
}
#red {
background-color:#FF0000;
height:100px;
width:100px;
}
#blue {
background-color:#0000FF;
height:100px;
width:200px;
}
#yellow {
background-color:#E2BE22;
height:100px;
width:50px;
}
#green {
background-color:#008800;
height:100px;
width:170px;
}
#slider{
background-color:#6FF;
height:10px;
width:100px;
position:relative;
}
</style>
</head>
<body>
<div id="slider"></div><br />
<div id="red"></div>
<div id="blue" onmouseover="javascript:movetoblue()" onmouseout="javascript:exitblue()"></div>
<div id="yellow" onmouseover="javascript:movetoyellow()" onmouseout="javascript:exityellow()"></div>
<div id="green" onmouseover="javascript:movetogreen()" onmouseout="javascript:exitgreen()"></div>
</body>
</html>
<script>
var slider = document.getElementById( 'slider' );
function movetoblue(){
var slider = $("#slider");
slider.animate({left: '100px', width: '160px'}, "slow");
}
function exitblue(){
var slider = $("#slider");
slider.animate({left: '7px', width: '200px'}, "slow");
}
function movetoyellow(){
var slider = $("#slider");
slider.animate({left: '100px', width: '160px'}, "slow");
}
function exityellow(){
var slider = $("#slider");
slider.animate({left: '7px', width: '200px'}, "slow");
}
function movetogreen(){
var slider = $("#slider");
slider.animate({left: '100px', width: '160px'}, "slow");
}
function exitgreen(){
var slider = $("#slider");
slider.animate({left: '7px', width: '200px'}, "slow");
}
</script>
I know much is probably wrong with it. Sigh. But any help would be much appreciated. Thank you :)
PS: I would like this to work on Chrome, IE, Safari and Firefox, but I'm mainly concerned about Chrome, IE, Safari. Thanks again!
As I see you are using jQuery but in a very wrong way. I've created a JSFiddle for you. take a look at this
Update 1:
Edited The Code For Better Performance By Adding:
$("#slider").stop()
$(document).ready(function() {
$("#slider").animate({
"left": $(".item:first").position().left + "px",
"width": $(".item:first").width() + "px"
}, 0);
$(".item").hover(function() {
$("#slider").stop()
$("#slider").animate({
"left": $(this).position().left + "px",
"width": $(this).width() + "px"
}, 500);
});
});
div {
display: inline-block;
float: left;
}
#red {
background-color: #FF0000;
height: 100px;
width: 100px;
}
#blue {
background-color: #0000FF;
height: 100px;
width: 200px;
}
#yellow {
background-color: #E2BE22;
height: 100px;
width: 50px;
}
#green {
background-color: #008800;
height: 100px;
width: 170px;
}
#slider {
background-color: #6FF;
height: 10px;
width: 100px;
position: absolute;
left: 0;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider"></div>
<div id="red" class="item"></div>
<div id="blue" class="item"></div>
<div id="yellow" class="item"></div>
<div id="green" class="item"></div>
Update 2:
For Deining The Start Position You Should Replace This Part:
$("#slider").animate({
"left": $(".item:first").position().left + "px",
"width": $(".item:first").width() + "px"
}, 0);
With This:
$("#slider").animate({
"left": $("#TAG_ID").position().left + "px",
"width": $("#TAG_ID").width() + "px"
}, 0);
NOTE TAG_ID is your starting div id property
Update 3:
In case that user didn't select a tab:
$("#slider").delay(3000).animate({
"left": $(this).position().left + "px",
"width": $(this).width() + "px"
}, 500);

Categories

Resources