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);
}
});
Related
Here is a link to a JSFiddle http://jsfiddle.net/9NYcn/11/ i put together with what i would like to do, but i need to do this with pure css.
function expand(){
var sect = document.getElementById("sect");
var body = document.getElementById("main");
var panes = document.getElementById("panes");
var newHeight = 40 + "px";
var newHeight2 = 120 + "px";
var topVal = 120 + "px";
sect.style.display = "block";
sect.style.height = newHeight;
body.style.height = newHeight2;
panes.style.top = topVal;
}
In the above function i had to set the "top" property of panes in order to get this to work. i need to get it so that the panes section will work like it currently does without using javascript to change the "top" property of "panes". When the user clicks the "expand" button the div with the class "body" will expand and not stick behind or overlap the "panes" div.
I know im doing a terrible job explaining i apologize for that.
Remove the absolute positioning of .panes: http://jsfiddle.net/rHTM8/
It will make it naturally flow after the middle div.
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!
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'});
}
});
On the right side of my page I have a list of sponsors.
My active page area (left side) height varies from page to page, depending on the story it contains every time.
I want the list's height to match the live pages height, so I thought I'd always show the main sponsors, and for the rest of them, I'd hide them, and show exactly as many as I can each time.
My markup looks like this:
<div id="xorigoi">
<a class="basic"><img src="/views/images/adjustable/sideXorigoi/1.png"></a>
<a class="basic"><img src="/views/images/adjustable/sideXorigoi/2.png"></a>
<a class="basic"><img src="/views/images/adjustable/sideXorigoi/3.png"></a>
<a class="rest"><img src="/views/images/adjustable/sideXorigoi/4.png"></a>
<a class="rest"><img src="/views/images/adjustable/sideXorigoi/5.png"></a>
<a class="rest"><img src="/views/images/adjustable/sideXorigoi/6.png"></a>
<a class="rest"><img src="/views/images/adjustable/sideXorigoi/7.png"></a>
<a class="rest"><img src="/views/images/adjustable/sideXorigoi/8.png"></a>
</div>
Every image is a link to each sponsor's site. Every image has it's own height.
Elements that have the class .rest are hidden using display: none
I'm trying to calculate if adding the new image will make the list longer than the page, but since the elements are hidden, offsetHeight = 0.
What can I do?
My javascript/jquery code so far looks like this:
$(
function(){
var containerHeight = $('#mainPageContainer')[0].offsetHeight; // total height of page
var xorigoi = $('#mainRightSide .rest'); // select the sponsors
var newHeight = 1062; // this is the right side height I am already using
$.each( xorigoi , function( index ){
if( newHeight + heightOfNewElement > containerHeight ){
return false; // break each
}
xorigoi.eq(index).css('display','block'); // display the sponsor
newHeight = newHeight + heightOfNewElement;
})
}
)
So bottomline, how can I get heightOfNewElement in the function above?
Since JavaScript is single-threaded, the browser will not redraw while it is executing. As such, you can safely set the elements to display:block, measure them, then hide them again and the user will be none the wiser.
Instead of display none, you could consider moving your elements outside the viewport. For example:
.rest {position:absolute;top:-9999px;}
Guess this will help you.
console.log(getDimensions($('#myElement')));
function getDimensions(element){
var tempElement = $(element).clone();
$(tempElement).css('display','block').css('visibility','hidden');
$(document.body).append(tempElement);
var obj = new Object();
obj.width = $(tempElement).width();
obj.height = $(tempElement).height();
$(tempElement).remove();
return obj;
}
I'm creating an image gallery with dozens of landscape and portrait images on a single page. I want to style each image with a dynamically added CSS class (i.e. ".landscape" for landscape images) according to its orientation.
I came across the code below (from 2003!) For determining the ratio and adding a class for a single image, but I need the classes to be added automatically for all images within a certain div id. Honestly, I just don't know enough about JavaScript or jQuery to solve this on my own.
<script language="JavaScript" type="text/javascript">
<!--
function getDim() {
myImage = new Image;
myImage.src="myimage.gif";//path to image
document.divImage.src=myImage.src;
var imgProp;
var width = myImage.width;
var height = myImage.height;
var ratio = width/height;
if ( ratio > 1 ) {
document.getElementById('image').className="portrait";
}
else {
document.getElementById('image').className="landscape";
}
}
//-->
</script>
with jQuery:
$('#divID img').each(function(){
$(this).addClass(this.width > this.height ? 'landscape' : 'portrait');
});
Pretty straightforward jQuery:
$('#yourId').find('img').each(function(i,elem){
var $this = $(this),
ratio = $this.width() / $this.height();
$this.addClass((ratio < 1) ? 'portrait' : 'landscape');
});
See example →
Lets say, that your containing div is of class gallery and you are using jQuery :)
$(document).ready(function(){
$('.gallery img').each(function(){
var width = $(this).width();
var height = $(this).height();
var className;
if (width/height > 1) className = "portrait";
else className = "landscape";
$(this).addClass(className);
});
});
This way is longer, but allows you to add more rules (if there is any reason to do so :).. ie.:
if (width/height == 1) className = "square";
If setting img width/height interferes with your css, you can set it as data-width/data-height:
$('#your-div-Id').find('img').each(function(i,elem){
var $this = $(this),
ratio = $this.attr('data-width') / $this.attr('data-height');
$this.addClass((ratio < 1) ? 'portrait' : 'landscape');
});
HTML:
<div id="your-div-Id">
<img src="#" data-width="60" data-height="30" />
</div>
Edited mVChr's example