Develop Reference

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.

Avoid loading images in mobiles

I want to avoid loading an image on the website when the screen width is lesser than 1146px. I've tried to add the below CSS rule:
#media only screen and (max-width: 1146px) {
#img_cabecera2 {display: none;}
}
And of course, the image is not shown, but it is loaded. I want to load an image only if the screen width s more than 1146px.How could achieve it?
I don't mind if the solution uses CSS, Javascript, jQuery or PHP code.
Edit:
I've achieved it in this way:
template.html:
<div id="img_cabecera2">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" width="0" height="0" alt="">
</div>
script.js:
$(function(){
/* Set img_cabecera2 size */
function set_src() {
var window_width = $(window).width();
if (window_width < 1147) {
$("#img_cabecera2").css({"display":"none"});
} else {
$("#img_cabecera2 img").attr('width', 300).attr('src', "/public/img/carrete.png").attr('alt', "logo").attr('height','auto');
$("#img_cabecera2").css({"top":"15px","left": "44%","display":"block"});
}
}
set_src();
$(window).resize(function() {
set_src();
});
/* ************************* */
...

I use this:
<!-- This image is a blank, 2*2 image -->
<img src="/images/transparant.png"
data-bigsrc="/images/big.jpg"
data-smallsrc="/images/small.jpg" />
With this as javascript
function getProperImageSource(){
var attr2use = $('body').outerWidth()>480 ? 'data-bigsrc' : 'data-smallsrc';
$('img[data-smallsrc], img[data-bigsrc]').each(function(i){
this.src = this.getAttribute(attr2use);
});
}
$(document).ready({
getProperImageSource(); // load images on init
$(window).on('resize', function(){
getProperImageSource();// again on resize
});
});
Might be handy to know: An image on display: none still loads, you just don't see it.
Also, removing images with (javascript-)functions can be slow aswell, because it can still trigger the downloading of the image, but because you removed the <img/> tag It wont be displayed, kinda a waste of time and resource :)

Add the css display:none; to the image and add this jQuery code:
function set_src() {
var window_width = $(window).width();
if (window_width < 1147) {
$("#img_cabecera2").hide();
} else {
$("#img_cabecera2").attr('src', BIG).show(); // Change to your image link
}
}
$(document).ready(function(){
set_src();
$(window).resize(function() {
set_src();
});
});
To avoid the image to be preloaded unnecessarily, while not just having an default empty src="" (omiting an image source is invalid, as I understand it), I found this post where one of the best solutions was to use this only 26 bytes big default source:
src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D"

As has been mentioned, at the moment there is no way of doing this in pure CSS. i have made use of the picturefill script in the past and have found it quite reliable.

Apply Different Rules when clicking on Different Thumbnails (jquery)

I'm pretty much a newbie on the HTML/CSS realm and have been facing a jquery challenge ever since I started building my first website. I want to create an jquery-powered image gallery, using thumbnails. The tutorial I followed for that matter was Ivan Lazarevic's (http://workshop.rs/2010/07/create-image-gallery-in-4-lines-of-jquery/). I also made use of Stackoverflow's forum through this thread: http://goo.gl/ILzsx.
The code he provides replaces the large image on display with the larger version of the thumbnail that's been clicked. This seems to work pretty smoothly but just for pictures that have the same orientation. The following code appears on two different files, thus establishing a difference between the horizontal and vertical images:
<div id="mainImage">
<img id="largeImage" src="Images/Projects/UOW/UOWII_large.jpg"/>
</div>
AND:
<div id="mainImageVERTICAL">
<img id="largeImageVERTICAL" src="Images/Projects/UOW/UOWI_large.jpg" />
</div>
I have created different CSS rules for both the largeImage and largeImageVERTICAL parameters, depending on whether the image has a portrait or landscape orientation.
#largeImage {
position: fixed;
height: 83%;
width:auto;
top: 15%;
left: 5%;
}
AND:
#largeImageVERTICAL {
position: fixed;
height: 83%;
width:auto;
top: 15%;
left: 36.36%;
}
These two rules just place the images at different points of the screen. However, what I would like to know is how to modify my code so that I can create a page with both portrait and landscape-oriented images applying the CSS rule that belongs to each. Up to now, what I have is what I got from Lazarevic's approach, which is:
$('#thumbs img').click(function(){
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
});
This code just replaces the thumbnails with the bigger pictures. As stated, I want to be able to apply the right rule to the right image and I'm assuming this has to be be made through some JS coding, which I know pretty much nothing about.
I would appreciate some help so that I can keep on with this project. Any ideas how to make this work? Maybe a JS function that tells the machine to use one or another CSS rule depending on which image is clicked upon? I'm really stuck here...
Thanks in advance!

There are a couple of ways you could do this.
Use a HTML5 data-* attribute to specify which of the <img> elements should be updated. So:
<div id="thumbs">
<img src="img.jpg" data-large="largeImage"/>
<img src="anotherimg.jpg" data-large="largeImageVERTICAL"/>
</div>
Then:
$('#thumbs img').click(function(e) {
var imageId = $(this).attr('data-large'),
newSrc = this.src.replace('thumb', 'large');
$('#' + imageId).attr('src', newSrc);
});
Or, use the dimensions of the thumbnail to determine whether it's portrait or landscape:
$('#thumbs img').click(function(e) {
var $this = $(this),
height = $this.height(),
width = $this.width(),
newSrc = this.src.replace('thumb', 'large');
var imageId = (height > width) ? 'largeImageVERTICAL' : 'largeImage';
$('#' + imageId).attr('src', newSrc);
});
In either case, you'll probably need to hide the other, unused <img> element so that you don't have the previously selected image for the other orientation displayed.
One way to achieve this would be:
var alternateImageId = (imageId === 'largeImage') ? 'largeImageVERTICAL' : 'largeImage';
$('#' + alternateImageId).hide();
Add the above two lines to the click event handler above, and call .show() after calling .attr('src', ...).

Use class not id.
#largeImage{
top: 15%;
width:auto;
height: 83%;
position: fixed;
}
.portrait{
left: 36.36%;
}
.landscape{
left: 5%;
}
js
$('#largeImage').on('load', function () {
var that = $(this);
if (that.width() < that.height()) {
that.addClass('portrait');
} else {
that.addClass('landscape');
}
});
$('#thumbs').on('click', 'img', function () {
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
});

Change div height with buttons

I need some scripting like the TYPO3 extension / module that runs on this site : http://nyati-safari.dk/index.php?id=125 (Scroll to: Detaljeret Dagsprogram (inkluderet)).
The div is shown with a pixelspecific height and when the arrow is clicked the div changes to contentspecific height also the arrow changes when the div toggles.

Do this:
var div = $('#div');
$('#arrow').click(function () {
if (div.height() == 100) {
autoHeight = div.css('height', 'auto').height();
div.height(100).animate({
height: autoHeight
}, 500);
} else {
$('#div').animate({
height: '100'
}, 500);
}
});
JSFiddle: http://jsfiddle.net/ZG8ug/5/
Can even do something like this: http://jsfiddle.net/ZG8ug/6/ where the 'hidden' div is small on page load but when viewed and returned it is bigger. Might be useful to help users distinguish what has already been viewed. Could even do it the other way around too so the div takes up even less space when it has been viewed.

jQuery get img width after src change and before fadeIn

I've got quite the problem with jQuery and a custom photo gallery I am building. I've searched high and low and tried endlessly different solutions but nothing is working perfectly. So let me present the information:
This photo gallery has thumbnails on the left side and a big image in the center. Every thumbnail can be clicked which calls a function passing in its' ID. What I want it to do is, AJAX POST to server to get image comment and image name. Fadeout the current big picture div, switch the src in the img tag, get the new image's width, set the width of an overlaying comment div, fadeIn the big picture div.
The problem is that I can't get the width of the new image after it has loaded (even using the a form of .load() to wait for the image to finish loading). Now I can get it to work when I fadeIn the new image and then get the width but that isn't what I need. I need to get the width and set the div's width before I fadeIn.
Any ideas or corrections would be great, hopefully I have provided enough information.
Here is the code I am wrestling with:
function thumbClick(val) {
$.post('ajax.php', {
photo_in: val
}, function (data) {
$('div#picture').fadeOut('slow', function () {
//$('img#big-picture').load(function(){
$('img#big-picture').one('load', function () {
//alert($('img#big-picture').width());
//will alert 0
$('div#picture').fadeIn('slow', function () {
$('div#comment-box').width($('img#big-picture').width());
//set comment to what I want
$('p#comment').html("");
//alert($('img#big-picture').width());
//will alert new image width after FadeIN
$('p#comment').html(data.comment);
});
}); //end of one(load)
$('img#big-picture').attr("src", data.newImage);
}); //end of fadeout
}, "json"); //end of post
}

I've encountered this before; what seems to be the easiest solution is to quickly show the image, grab it's width, and hide it again. This operation occurs so quickly users will never notice.
In your case, i believe the code would be:
$("#big-picture").show();
alert($('#big-picture').width()); //this should be the real width, now
$("#big-picture").hide();

The width is zero because hidden elements (elements with display: none have, by definition, zero height and width). After fadeOut(), jQuery hides the element(s). A few different solutions:
Use .fadeTo(), not .fadeOut():
$('#picture').fadeTo('slow', 0, function () {
var $pic = $(this);
$('#big-picture').one('load', function () {
var $bigPic = $(this);
$pic.fadeIn('slow', function () {
$('#comment-box').width($bigPic.width());
$('#comment').html(data.comment);
});
}).attr('src', data.newImage);
});
Use a separage <img> element:
$('#picture').fadeOut('slow', function () {
var $pic = $(this);
$('#big-picture').one('load', function () {
var img = new Image(),
width;
img.src = this.src;
width = img.width;
$pic.fadeIn('slow', function () {
$('#comment-box').width(width);
$('#comment').html(data.comment);
});
}).attr('src', data.newImage);
});
Use the "off-left" technique:
CSS
.off-left {
position: absolute;
left: -99999px;
}
JavaScript
$('#picture').fadeOut('slow', function () {
var $pic = $(this);
$('#big-picture').one('load', function () {
var $this = $(this),
width = $this.addClass('off-left').show().width();
$this.removeClass('off-left').hide();
$('#picture').fadeIn('slow', function () {
$('#comment-box').width(width);
$('#comment').html(data.comment);
});
}).attr('src', data.newImage);
});
Notes
When using an ID selector, there's no point in qualifying the selector further, since element IDs must be unique.
Pick a quote style and use it consistently. Avoid mixing single- and double-quotes as string delimiters.

You should be able to set the CSS property visibility to hidden and then get the width, as visibility doesn't take it out of the document flow (like display: none), but simply makes it invisible. Just make sure you set the visibility property back to visible when you fade in.