We Keep Coding

Pass image id to JQuery by clicking on the image

I'm animating images using JQuery. I'm using a button to activate the animation.
Here is my code:
$(document).ready(function(){
$("#b1").click(function(){ // b1 is the id of button
$(#img).animate({left: '+=20px'}); // img is the id of image
});
});
I have five images so when I click on another image, I need to put its id into the $(#img) instead of #img. So the second image will be animated.
How do I do this?

It sounds like you need to:
$(document).ready(function(){
// declare a variable to store the selected image
var selected = null;
// listen to clicks on all your images
// note: might want to filter this down to your target images
$("img").click(function(){
// save the selected image
selected = this
});
$("#b1").click(function(){
// animate the selected image
$(selected).animate({left: '+=20px'});
});
});
I hope that helps!

You can give the image a 'selected' class on click, then animate the selected:
$(document).ready(function() {
$(".image").click(function() {
// unselect others
$(".image").removeClass("selected");
// reselect this one
$(this).addClass("selected");
});
$("#b1").click(function() {
// animate selected
$(".image.selected").animate({left:'+=20px'});
});
});
html
<img class='image' src="image1"/>
<img class='image' src="image1"/>
<button id='b1'>click</button>
this will also allow you to style the selected image, eg:
.selected { border: 1px solid pink }

Add class (like img_to_animate) to images like
<img src='http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png' style="width:50px;height:50px;" class="img_to_animate" />
<img src='http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png' style="width:50px;height:50px;" class="img_to_animate" />
JavaScript
$(".img_to_animate").click(function(){
$(this).animate({left: '+=20px'});
})

This version will move the animated image back to its original position when the button is pushed, if a different image is selected:
$('img').on('click', function() {
$('img').removeClass("active");
$(this).addClass("active");
});
$('input[type="submit"]').on('click', function() {
if ( $(this).attr('data-current-image') !== $('img.active').attr('data-image-id') ) {
$('img[data-image-id=' + $(this).attr('data-current-image') + ']').animate({left: '10'});
}
$(this).attr('data-current-image',$('img.active').attr('data-image-id'));
$('img[data-image-id=' + $(this).attr('data-current-image') + ']').animate({left: '+20'});
});
img { display: block; position: relative; margin-top: 10px; left: 10px; height: 50px; width: 75px; }
img.active { border-right: 3px solid #f90; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><input type=submit data-current-image=0 value=" Animate! ">
<img src='http://i.imgur.com/LCRO0jJ.jpg' data-image-id=1 class="active" />
<img src='http://i.imgur.com/LCRO0jJ.jpg' data-image-id=2 />
<img src='http://i.imgur.com/LCRO0jJ.jpg' data-image-id=3 />
<img src='http://i.imgur.com/LCRO0jJ.jpg' data-image-id=4 />
<img src='http://i.imgur.com/LCRO0jJ.jpg' data-image-id=5 />

Swap background on hover

I'm trying to swap background using jQuery. But the problem is that it doesn't successfully switch to new background, instead, the old one is removed and I get a white background instead.
I've been googling and trying out putting the path as a var instead for example, and some other unsuccessful suggestions.
My jQuery function looks like the following:
$("#btn").hover(function () {
$('#page1').css('background-image','url(../images/bg1_normal.jpg)');
});
And my CSS for the default background looks like this:
#page1 {
height: 100vh;
max-height: 100vh;
background-image: url("../images/bg1_rw.jpg");
background-repeat: no-repeat;
background-size: 100%;
}
I'm using Java Play Framework and the pictures are in the same folder, and it is the correct path to it since the default background works.
EDIT: I Tried as well to use an img source from the web, just to be 100% sure it wasn't some issues with the path, but it still only makes it white.

I believe jQuery's hover() function isn't able to remove that particular style when the mouse leaves.
You could just do it yourself
$("#btn").on({
mouseenter : function() {
$('#page1').css('background-image','url(../images/bg1_normal.jpg)');
},
mouseleave : function() {
$('#page1').removeAttr('style');
// or simply set the backround again to the other image
}
});

Try .addClass and .removeClass functions - it's simple and all style work is done in stylesheet file:
$("#btn").on({
mouseenter : function() {
$('#page1').addClass('inverted');
},
mouseleave : function() {
$('#page1').removeClass('inverted');
}
});
and then simply add
#page1.inverted {
//style as you need
}
to your stylesheet.

If you're using images you could do an image swap like this
https://jsfiddle.net/RachGal/oee3guxz/
$("#flowers").mouseover(function () {
var _this = $(this);
var current = _this.attr("src");
var swap = _this.attr("data-swap");
_this.attr('src', swap).attr("data-swap", current);
_this.toggleClass("opaque");
});
.opaque {
opacity:.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img id='flowers' class="full" src='http://www.rachelgallen.com/images/snowdrops.jpg' width="500" height="400" data-swap='http://www.rachelgallen.com/images/daisies.jpg' width="500" height="400" />
or if you could just use color like this
$("#color").mouseleave(function () {
$("body").css("background-color","black");
});
$("#color").mouseover(function (){
$("body").css("background-color","red");
});
$("#color").click(function(){
$("body").css("background-color","green");
});
body, #color {
height: 800px;
width: 800px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="color"> </div>
https://jsfiddle.net/RachGal/8p783jfo/
Hope this helps
Rach

Toggle jQuery controls when clicking another object

I am trying to put together a Leaflet based map for our college. We have just about everything done, but I'm running into a problem with the jQuery controls. We are using this block of code to highlight the jQuery buttons and send commands to Leaflet.
<script type="text/javascript">
jQuery(function(){
$(".img-swap").on('click', function() {
if ($(this).attr("class") == "img-swap") {
this.src = this.src.replace("_off","_on");
} else {
this.src = this.src.replace("_on","_off");
}
$(this).toggleClass("on");
});
});
</script>
<style type="text/css">
.img-swap {cursor: pointer;}
</style>
<p align="center"><img src="images/item1_off.png" class="img-swap" width="94" height="93" alt="Locate Item 1" /></p>
<p align="center"><img src="images/item2_off.png" class="img-swap" width="106" height="76" alt="Locate Item 2" /></p>
This code works just fine when you click on the objects. The issue we have is that we need to fire an event to deselect an object (and undo the corresponding Leaflet events) when a new object is clicked.
For example, if we have five items, and you click item one, it turns red and the map highlights some buildings. When you click item two, it should turn red, turn item one back to normal, and un-highlight the buildings that one highlighted.
I can't find a way to make this happen. It only works for items that are clicked, not the other items. Is there a modification to this code that does that?
Thanks!

Try the following:
jQuery(function(){
var selected = null;
$(".img-swap").on('click', function() {
if (selected) {
selected.src.replace("_on","_off");
$(selected).removeClass("on");
}
this.src.replace("_off","_on");
$(this).addClass("on");
selected = this;
});
});

Not tested but I would defined my on and off states in css then just change the class name on click.
<style>
.onImage
{
height: 20px;
background-repeat: repeat-x;
background-image: url("images/item1_on.png")
/* path relative to where the css is if not in page. */
}
.offImage
{
height: 20px; /* set the match the size of the icon */
background-repeat: no repeat;
background-image: url("images/item1_off.png")
/* path relative to where the css is if not in page. */
}
</style>
<script>
$(document).ready(function (){
$(".switch").on('click', function(evtObj) {
$(".onImage").removeClass("onImage").addClass("offImage");
$(evtObj.target).removeClass("offImage").addClass("onImage");
});
});
</script>
<div class='switch offIcon'></div>
<div class='switch offIcon'></div>

Selecting child of previous parent jQuery

Lately I've been trying my hand at animation using CSS and jQuery, it went well, however, now I want to do a bit more.
That is, once the user clicks information should show up on top of the image.
At the moment, I just have a few tags on which I perform the animations and class toggles.
My question is, I've thought about doing the following:
<div class= "singleImage">
<img src.... class="actualImage">
<p>text to put over the image</p>
</div>
This would be done per image which means that I'll have about 5 of them with different images.
However, I don't know how to go about selecting the previous element of class "actualImage".
Has anyone got any suggestions?
Thank you

Use the jQuery prev function. Example: Assume you want to select the image previous to the second image:
var foo = $(".singleImage").eq(1);
var bar = $(foo).prev().find('.actualImage');
Fiddle

Try this:
$('singleImage').children('.actualImage').prev();

I'm not sure why you are trying to select the previous element, but you could do something akin to this:
Bind a function to the click event for the element containing your image and caption.
Inside this function, toggle the caption.
Also, bind a click event handler to the body to detect clicks "off" the containing element.
HTML:
<a href="#" class="has-caption">
<img src="http://placehold.it/300x300" />
<span class="caption">This is a caption</span>
</a>
CSS:
a.has-caption { position: relative; }
a.has-caption .caption {
background: rgba(0, 0, 0, .25);
bottom: 0;
color: #fff;
display: none;
height: 20px;
left: 0;
line-height: 20px;
position: absolute;
width: 100%;
}
a.has-caption img { vertical-align: bottom }
JavaScript
$('a.has-caption').on('click', function(e) {
e.preventDefault(); e.stopPropagation();
var self = $(this)
, tmpId = 'toggle-' + Date.now();
self.addClass(tmpId);
$('span.caption', self).toggle();
$('body').one('click', function(e) {
if (!$(event.target).closest('.' + tmpId).length) {
$('span.caption', '.' + tmpId).hide();
self.removeClass(tmpId);
};
});
});
http://jsfiddle.net/83s7W/

On mouseover, changing an image's opacity and overlaying text

I want to drop the opacity and overlay text on a thumbnail image when I mouse over it. I have several ideas about how to do it, but I'm fairly certain they're inefficient and clumsy.
Make a duplicate image in Photoshop with the text overlay and reduced opacity. Swap the original out for the duplicate on mouseover.
Use CSS to drop the opacity on mouseover. Use Javascript to toggle visibility of a div containing the overlay text.
The problem I see with 1 is it seems like an unnecessary use of space and bandwidth, and will cause slow load times. With 2, it seems like I'd have to hard-code in the location of each div, which would be a pain to maintain and update. I know this is a somewhat general question, but I'm at a loss about how to go about this. How can I do this relatively simple task in a way that will make it easy to add new thumbnails?

Wrap your image in a <div class="thumb">
Add position: relative to .thumb.
Add <div class="text> inside .thumb.
Add display: none; position: absolute; bottom: 0 to .text.
Use .thumb:hover .text { display: block } to make the text visible on hover.
Like this: http://jsfiddle.net/dYxYs/
You could enhance this with some JavaScript/jQuery: http://jsfiddle.net/dYxYs/1/
$('.text').hide().removeClass('text').addClass('text-js');
$('.thumb').hover(function(){
$(this).find('.text-js').fadeToggle();
});
This way, the basic effect still works without JavaScript, and users with JavaScript get the appealing fade effect.

Go with option 2. There are ways to do it to not have to write a jQuery function for each image. As seen in my jsfiddle.
http://jsfiddle.net/daybreaker/dfJHZ/
HTML
<img src="http://placekitten.com/300/300" />
<span class="text" style="display:none">THIS IS A KITTEN</span>
<br><br>
<img src="http://placekitten.com/200/200" />
<span class="text" style="display:none">THIS IS A KITTEN</span>
jQuery
$('img').mouseover(function(){
$(this).css('opacity','.2');
$(this).next('span.text').show();
}).mouseout(function(){
$(this).css('opacity','1');
$(this).next('span.text').hide();
});
You would need to modify the span.text css to overlay it on top of the image, but that shouldnt be too bad.

Wrap it in an element and do something like this:
var t;
$('div.imgwrap img').hover(function(){
t = $('<div />').text($(this).attr('title')).appendTo($(this).parent());
$(this).fadeTo('fast',0.5);
},function(){
$(this).fadeTo('fast',1);
$(t).remove();
});
with a markup similar to:
<div class="imgwrap">
<img src="http://www.gravatar.com/avatar/3d561d41394ff0d5d0715b2695c3dcf0?s=128&d=identicon&r=PG" title="text" />
</div>
example: http://jsfiddle.net/niklasvh/Wtr9W/

Here's an example. You can position the text however you want, but the basic principle below.
http://jsfiddle.net/Xrvha/
#container { position: relative; }
#container img, #container div {
position: absolute;
width: 128px;
height: 128px;
}
#container img { z-index -1; }
#container div {
z-index 1;
line-height: 128px;
opacity: 0;
text-align: center;
}
#container:hover img {
opacity: 0.35;
}
#container:hover div {
opacity: 1;
}

If you don't want to change your HTML wraping things etc, I suggest you this way. Here is the jQuery:
$(function() {
$(".thumb").mouseenter(function() {
var $t = $(this);
var $d = $("<div>");
$d.addClass("desc").text($t.attr("alt")).css({
width: $t.width(),
height: $t.height() - 20,
top: $t.position().top
});
$t.after($d).fadeTo("fast", 0.3);
$d.mouseleave(function() {
$(this).fadeOut("fast", 0, function() {
$(this).remove();
}).siblings("img.thumb").fadeTo("fast", 1.0);
});
});
});

2 is a good solution, have done about the same as this and it isn't as hard as you would've tought;
Drop de opacity with css indeed, than position a div relative to the img, and over it. It can be done with plain css. The z-index is the trick. That div can just be shown with $('#div').slideUp() ie.