Develop Reference

jQuery add or remove class when modal open/close

First of all, thanks for reading. I don't know anything about jQuery or JavaScript, that's why I'm here.
Searching a little bit I found the code I want, but unfortunately the gallery I'm making has several elements, and this code doesn't work as I want.
This is the little script I have:
function showImage(imgName) {
var curImage = document.getElementById('currentImg');
var thePath = '/images/full/';
var theSource = thePath + imgName;
curImage.src = theSource;
curImage.alt = imgName;
}
<span class="thumb_ef"><img src="images/thumb/image1.png" alt="Image One"/></span>
<span class="thumb_ef"><img src="images/thumb/image2.png" alt="Image Two"/></span>
<span class="thumb_ef"><img src="images/thumb/image3.png" alt="Image Three"/></span>
<div id="first_window" class="modal_window">
<h2>Title here</h2>
<div id="preview">
<img id="currentImg" class="bigimg" src="images/full/image1.png" alt="images/full/image1.png">
</div>
<h3>Thumbnail preview</h3>
<div id="thumb">
<span class="thumb_mef"><img src="images/full/thumb_image1.png" alt="images/full/thumb_image1.png" onclick="showImage('image1.png');"></span>
<span class="thumb_mef"><img src="images/full/thumb_image2.png" alt="images/full/thumb_image2.png" onclick="showImage('image2.png');"></span>
<span class="thumb_mef"><img src="images/full/thumb_image3.png" alt="images/full/thumb_image3.png" onclick="showImage('image3.png');"></span>
<span class="thumb_mef"><img src="images/full/thumb_image4.png" alt="images/full/thumb_image4.png" onclick="showImage('image4.png');"></span>
</div>
</div>
Let me explain a little bit, because I'm not gonna put all the unnecesary code here.
In the gallery, I have several little images, when you click them, triggers a modal box with different ID for each image in order to load different content for each element.
Inside the modal, I have a title, a full-size image and four thumbnails preview images. This thumbnails images triggers the code I left before, loading the full-size image in the same ID when you click the thumbnail.
The problem I have is... I need to repeat this ID for the different modals, but if you want to click the thumbnails and load the full-size image of any other modal that's not the first, you don't gonna see the changes (Because the code works on the first ID).
I think the solution to this is add the ID (currentImg) only when the modal opens, and after remove this ID when the modal close, to solve the problem.
I don't know how to do that, and probably I need to mix both codes but again, I don't know anything about jQuery/Javascript, here's the modal code:
$(document).ready(function(){
var window_width = $(window).width();
var window_height = $(window).height();
$('.modal_window').each(function(){
var modal_height = $(this).outerHeight();
var modal_width = $(this).outerWidth();
var top = (window_height-modal_height) / 2;
var left = (window_width-modal_width) / 2;
$(this).css({'top' : top , 'left' : left});
});
$('.activate_modal').click(function(){
var modal_id = $(this).attr('name');
show_modal(modal_id);
});
$('.close_modal').click(function(){
close_modal();
});
function close_modal(){
$('#mask').fadeOut(500);
$('.modal_window').fadeOut(500);
}
function show_modal(modal_id){
$('#mask').css({ 'display' : 'block', opacity : 0});
$('#mask').fadeTo(500,0.8);
$('#'+modal_id).fadeIn(500);
}
});
Hope you can understand, my native language isn't english, please tell me if you don't understand.

Fixed: The only thing I need was to search the ID of the modal box, then search the class of the img element and add an ID to that. After this, on the close modal event, remove any ID from the img class.
This is the final result:
$(document).ready(function(){
var window_width = $(window).width();
var window_height = $(window).height();
$('.modal_window').each(function(){
var modal_height = $(this).outerHeight();
var modal_width = $(this).outerWidth();
var top = (window_height-modal_height) / 2;
var left = (window_width-modal_width) / 2;
$(this).css({'top' : top , 'left' : left});
});
$('.activate_modal').click(function(){
var modal_id = $(this).attr('name');
show_modal(modal_id);
$('#'+modal_id).find('.bigimg').attr('id', 'currentImg');
});
$('.close_modal').click(function(){
$('.bigimg').removeAttr('id');
close_modal();
});
function close_modal(){
$('#mask').fadeOut(500);
$('.modal_window').fadeOut(500);
}
function show_modal(modal_id){
$('#mask').css({ 'display' : 'block', opacity : 0});
$('#mask').fadeTo(500,0.8);
$('#'+modal_id).fadeIn(500);
}
});

How replace img based on window size

I am trying to replace img src based on window size. This is not a background-image. For mobile size my image needs to be different color/image then larger screens. It is easy to change size of image with css but I think I need to use Jquery to replace image src but cant figure it out yet. Any pointers?
here is my html
<a href="" class="logo">
<img id="brand" src="assets/img/image.png" alt="Image">
</a>
here is my js
$(document).ready(function(){
var windowSize = $( window ).width();
if (windowSize < 400 ) { $('#brand').attr('src', 'assets/img/logo-2.png')};
});
ALL this seems to do is change on load img src not change on window size or resize window.
--edit -- form humbolight
$(function(){
var $window = $(window);
var toggleImage = function toggleImage($el, src){
$el.attr('src',src);
};
$window.on('resize',function(){
if ($window.width() < 385){
//mobile
toggleImage($('#brand'),'assets/img/image.png');
} else {
//landscape tablet/desktop
toggleImage($('#brand'),'assets/img/logo-2.png');
}
});
});

What you are attempting to accomplish would require listening to the resize event on the window element and changing the src based on the changing width (preloading images wouldn't hurt):
$(function(){
var $window = $(window);
var toggleImage = function toggleImage($el, src){
$el.attr('src',src);
};
$window.on('resize',function(){
if ($window.width() < 768){
//mobile
toggleImage($('#two_size_img'),'img#1x.png');
} else {
//landscape tablet/desktop
toggleImage($('#two_size_img'),'img#2x.png');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="two_size_img" src="img#1x.png" />
To accomplish the same end, I would favor toggling a background-image, handled entirely with CSS, or similarly, rendering both elements (one img per image wanted) and showing/hiding the desired image -- again, entirely with CSS.

Javascript set a variable that changes on each child item

This may seem like an easily answered question but it's one I've been struggling for a little while.
Let me first explain what I'm trying to achieve.
I have a gallery of images and I want each of the images to centered vertically inside their container. The images are of varying shapes, sizes and aspect ratios so my code needs to be variable for each image therein. Here is what I have so far:
<div id="cbp-fwslider" class="cbp-fwslider">
<img src="images/large/1.jpg" alt="img01"/>
<img src="images/large/2.jpg" alt="img02"/>
<img src="images/large/3.jpg" alt="img03"/>
</div>
And here is my javascript:
var $img = $('div#cbp-fwslider img');
var ih = $img.height();
var $div = $('div#cbp-fwslider');
var dh = $div.height();
if (dh > ih) {
var dif = (dh - ih);
$img.css('margin-top', + dif / 2 + "px");
}
Now, this works in part. What it does is calculates the correct "margin-top" to vertically center the first image within the container but then applies it to all involved. I have no doubt that this is because I have set the javascript to set the "margin-top" as the same for all the images.
My question is, how do I set a variable to make it so it does this separately for all the items that I put in my gallery?
Forgive me if this is a basic question that I could have found the answer for elsewhere, I am pretty wet behind the ears when it comes to javascript.
Also if anybody knows of an easier/more efficient way of achieving what I want then it would be great if you could point me in the right direction.
I must advise that the container has a dynamic height and so do all images. With the nature of how the gallery works, I can't use absolute positioning and THIS technique doesn't seem to work either.
Thanks in advance for any help.

You'll want to run your code individually on each image rather than on the collection of images. You can do this by using each to loop through the collection:
$('div#cbp-fwslider img').each(function(){
var $img = $(this);
var ih = $img.height();
var $div = $('div#cbp-fwslider');
var dh = $div.height();
if (dh > ih) {
var dif = (dh - ih);
$img.css('margin-top', + dif / 2 + "px");
}
});

You can just use css to vertically align all images to center.
<div id="cbp-fwslider" class="cbp-fwslider">
<img src="images/large/1.jpg" alt="img01"/>
<img src="images/large/2.jpg" alt="img02"/>
<img src="images/large/3.jpg" alt="img03"/>
</div>
css
img {
vertical-align: middle;
}​
see http://jsfiddle.net/vishnurajv/xR28t/

Try to find the maximum height of img in your div, after that set margin-top for all of other img. This is my idea, you or someone can do better.
var maxHeight = 0;
$('div#cbp-fwslider img').each(function(){
if($(this).height() > maxHeight) maxHeight = $(this).height();
});
$('div#cbp-fwslider img').each(function(){
$(this).css('margin-top', Number(maxHeight - $(this).height()) / 2 + 'px');
});
Hope help!

Add class to image depending on image width

I have a list of images where the width is either 226px or 300px. I want to change the css when the image have the smaller width, 226px. It is the right value on "plus" that should be changed
The HTML looks like following:
<div class="item-image">
<div class="plus-wrapper">
<div class="plus"></div>
<img src="source_to_image" alt="">
</div>
</div>
And it is a loop so it will be several images displayed.
My JS + jQuery so far look like this:
var image = $('.plus-wrapper img');
image.each(function () {
var that = $(this);
if (that.width() < 250) {
that.next('.plus').css('right', '41px');
}
});
But the CSS is not changed. Any idea what I am doing wrong?

Change your code to
$(window).load(function(){
var image = $('.plus-wrapper img');
image.each(function () {
var that = $(this);
if (this.width < 250) {
that.prev().css('right', '41px');
}
});
});
The changes are
use this.width since images have a width property of their own..
use .prev() instead of .next() since the div is the previous element in the DOM
call everything inside the window.load event to be sure the images are loaded (and so they have a width)

You should be using the siblings selector
var image = $('.plus-wrapper img');
image.each(function () {
if ($(this).width() < 250) {
$(this).siblings('.plus').css({'right' : '41px'});
}
});

jQuery to dynamically resize divs

I'm using the media thumbnails that twitter bootstrap v2.3 has in their CSS library. You can see what I'm working on here.
Here is the jQuery I'm using:
<script>
$(window).load(function () {
var maxHeight = 0;
var divs = jQuery(".thumbnail");
jQuery.each(divs, function () {
var height = jQuery(this).height();
if (maxHeight < height) maxHeight = height;
});
divs.css('min-height', maxHeight + 'px');
});
$(window).resize(function () {
var maxHeight = 0;
var divs = jQuery(".thumbnail");
jQuery.each(divs, function () {
var height = jQuery(this).height();
if (maxHeight < height) maxHeight = height;
});
divs.css('min-height', maxHeight + 'px');
});
</script>
Basically my goal was since each thumbnail had different heights and I wanted them to all be equal heights, this script gives them all the same min-height in CSS on load, and everytime the screen is resized based on whichever thumbnail has the greatest height.
I got all that to work, but now the problem I can't figure out is when you drag the screen to smaller/bigger sizes and the min-height becomes very large, I have no code to decrease the min-height so they thumbnail divs look way too big. Does anyone have any code suggestions for me so the divs will all have equal height, but never get too big?
And if you set the height css property rather than min-height, the solution doesn't work for my original goal because the text paragraphs end up extending outside the divs.

On window resize you can set the min-height of the divs again, like this:-
$( window ).resize(function() {
if($( window ).height() < 300){
$( "div" ).css({min-height: 300px});
} else {
$( "div" ).css({min-height: 600px});
}
});