I m having images of same height but of varied width.
I was wondering if i can do something with css or js to fill the width of the container(parent div) with the images.
For an example I have made this page(link)
Now as one can see the last image in the second row if its placed in the first then easily the blank spaces can be saved.
Regards
I don't think there will be any library available as per your requirement.
But look at this, I have created a function such as gridWidth() for you. Maybe this can help you.
$.fn.gridWidth = function() {
var container = this,
c_width = container.width(),
imgs = $('img', container),
obj = {},
new_obj = [],
tmp_tw = 0;
$.each(imgs, (i, v) => obj[i] = {"e": v, "w": $(v).outerWidth(true) });
while (Object.keys(obj).length) {
f = 0;
var tmp_obj = Object.assign({}, obj);
$.each(tmp_obj, function(i, v) {
if ((tmp_tw + v.w) <= c_width) {
tmp_tw += v.w;
new_obj.push(v.e);
delete obj[i];
delete tmp_obj[i];
f = 1;
}
if (tmp_tw >= c_width) return tmp_tw = 0;
});
if (!f) tmp_tw = 0;
}
$.each(new_obj, (i, v) => { $(v).css('order', i) });
};
$(window).on('load', function(){
$('.img_container').gridWidth();
});
$(window).resize(function(){
$('.img_container').gridWidth();
});
.img_container {
border: 2px black solid;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 auto;
}
.img_container img {
margin-bottom: 5px;
margin-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img_container">
<img src="https://dummyimage.com/100x150/000000/ffffff&text=1">
<img src="https://dummyimage.com/150x150/0000FF/ffffff&text=2">
<img src="https://dummyimage.com/200x150/EA00FF/ffffff&text=3">
<img src="https://dummyimage.com/250x150/FF0000/ffffff&text=4">
<img src="https://dummyimage.com/300x150/00D5FF/ffffff&text=5">
<img src="https://dummyimage.com/350x150/26FF00/ffffff&text=6">
<img src="https://dummyimage.com/300x150/FF8400/ffffff&text=7">
<img src="https://dummyimage.com/250x150/000000/ffffff&text=8">
<img src="https://dummyimage.com/200x150/0000FF/ffffff&text=9">
<img src="https://dummyimage.com/150x150/EA00FF/ffffff&text=10">
<img src="https://dummyimage.com/100x150/FF0000/ffffff&text=11">
<img src="https://dummyimage.com/100x150/00D5FF/ffffff&text=12">
<img src="https://dummyimage.com/150x150/26FF00/ffffff&text=13">
<img src="https://dummyimage.com/200x150/FF8400/ffffff&text=14">
<img src="https://dummyimage.com/250x150/000000/ffffff&text=15">
<img src="https://dummyimage.com/300x150/0000FF/ffffff&text=16">
<img src="https://dummyimage.com/350x150/EA00FF/ffffff&text=17">
<img src="https://dummyimage.com/300x150/FF0000/ffffff&text=18">
<img src="https://dummyimage.com/250x150/00D5FF/ffffff&text=19">
<img src="https://dummyimage.com/200x150/26FF00/ffffff&text=20">
<img src="https://dummyimage.com/150x150/FF8400/ffffff&text=21">
<img src="https://dummyimage.com/100x150/000000/ffffff&text=22">
<img src="https://dummyimage.com/100x150/0000FF/ffffff&text=23">
<img src="https://dummyimage.com/150x150/EA00FF/ffffff&text=24">
<img src="https://dummyimage.com/200x150/FF0000/ffffff&text=25">
<img src="https://dummyimage.com/250x150/00D5FF/ffffff&text=26">
<img src="https://dummyimage.com/300x150/26FF00/ffffff&text=27">
<img src="https://dummyimage.com/350x150/FF8400/ffffff&text=28">
<img src="https://dummyimage.com/300x150/000000/ffffff&text=29">
<img src="https://dummyimage.com/250x150/0000FF/ffffff&text=30">
<img src="https://dummyimage.com/200x150/EA00FF/ffffff&text=31">
<img src="https://dummyimage.com/150x150/FF0000/ffffff&text=32">
<img src="https://dummyimage.com/100x150/00D5FF/ffffff&text=33">
<img src="https://dummyimage.com/100x150/26FF00/ffffff&text=34">
<img src="https://dummyimage.com/100x150/FF8400/ffffff&text=35">
<img src="https://dummyimage.com/150x150/000000/ffffff&text=36">
</div>
Related
I used the feature img lazy loading for page with X axis scroll. But it works incorrect, images start loading only when they already appear on the page, instead of doing it earlier.
Example:
function l(num) {
document.getElementById('log').innerText += "loaded #" + num + " image\n";
}
.images {
display: inline-block;
width: 300px;
overflow: hidden;
overflow-x: visible;
border: 1px solid magenta;
white-space: nowrap;
}
#log {
display: inline-block;
vertical-align: top;
}
<div class="images">
<img loading="lazy" src="https://picsum.photos/300/150?1" height="150" width="300" onload="l(1)" />
<img loading="lazy" src="https://picsum.photos/300/150?2" height="150" width="300" onload="l(2)" />
<img loading="lazy" src="https://picsum.photos/300/150?3" height="150" width="300" onload="l(3)" />
<img loading="lazy" src="https://picsum.photos/300/150?4" height="150" width="300" onload="l(4)" />
<img loading="lazy" src="https://picsum.photos/300/150?5" height="150" width="300" onload="l(5)" />
<img loading="lazy" src="https://picsum.photos/300/150?6" height="150" width="300" onload="l(6)" />
<img loading="lazy" src="https://picsum.photos/300/150?7" height="150" width="300" onload="l(7)" />
</div>
<div id="log" />
I have come to the conclusion that this only works for images that are below the current point on the Y axis.
How do you do this for the Y axis?
UPD: 04.03.2021
lazy work with X axis. But lazy work ONLY in main "body" scroll! When I make any div with overflow: auto as result lazy loading doesn't work at all!
You can use IntersectionObserver like this
const lazyInit = (element, fn) => {
const config = {
rootMargin: '0px 0px 50px 0px',
threshold: 0
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
observer.disconnect(); //drop observer and run the function {fn}
fn();
}
});
}, config);
observer.observe(element);
};
document.querySelectorAll("img[data-src]").forEach(img => {
lazyInit(img, function() {
preloadImage(img);
});
});
function preloadImage(img) {
const src = img.getAttribute('data-src');
if (!src) { return; }
img.src = src;
}
Then you must replace the src attribute of the img with data-src.
The img elements should look something like this
<img data-src="https://picsum.photos/300/150?1" height="150" width="300" />
The important thing here is the property rootMargin. Read more here.
I hope this helps
I'm trying to make a website where you can upload an image, then select another one and add it over the uploaded one. I'm using jquery to make the image draggable and resizable and everything works fine, except that I can't add it over the uploaded image.
Here's my code:
code:
$(document).ready(function() {
$(document).on('click', '.block-add', function() {
var a = $(this);
var src = a.find('img:first').attr('src');
var elem = $('<div class="container"><img src="' + src + '" class="blocks" /></div>');
$('.block').append(elem);
elem.draggable();
elem.find('.blocks:first').resizable();
return false;
});
});
.blocks {
width: 10%;
z-index: 9999;
}
.block {
width: 100%;
height: 100%;
border: 1px solid #C8C8C8;
margin: 0px;
background-color: #F0F0F0;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="upload">
<input type='file' onchange="readURL(this);" /> <br>
</div>
<br/>
<div class="block">
<div class="background">
<img id="bg" src="" alt="" width="50%" ; height="50%" ; class="center" />
</div>
</div>
<br/>
<div id="existingImges">
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
</div>
So here's the result in this case:
and here's what I'd like to be after adding a wheel:
As #Troy Bailey and I mentioned, the way to success is the css attribute z-index.
Here the changes:
First step:
Add this above z-index attribute to class .block: z-index: 1;.
Second step:
For your javascript you have to add some lines which increases the z-index attribute s of your created divs, with class .container.
$(document).ready(function() {
$(document).on('click', '.block-add', function() {
var src = $(this).find('img:first').attr('src');
//New line
//First, find out how many images has being added and dragged
var foundAddedDivs = $('.block').find('.container').size();
//New line
//Second, get the current value from recently added 'z-index' from fist step.
var backGroundDivIndex = $('.block').css("z-index");
//New line
//Third: Calulate a new value for 'z-index' for each draggable elements
var zIndex = backGroundDivIndex + foundAddedDivs;
//Modified line
//Forth: Creates a new div and add calculated z-index to draggable element
var elem = $('<div class="container" style="z-index: '+ zIndex +'">
<img src="' + src + '" class="blocks" /></div>');
$('.block').append(elem);
elem.draggable();
elem.find('.blocks:first').resizable();
return false;
});
});
.block-add {z-index: 99;}
/* just increase the z-index of the wheel so it can be in front of the car image */
How can I make the mainImage picture change places with the thumbnail and become the imgStyle picture?
I managed to move the thumbnail to the mainImage picture but I do not know what to do to move the main picture to the miniatures.
I'm happy for any advice.
var mini = document.getElementsByClassName('imgStyle');
for(var i = 0; i < mini.length; i++)
mini[i].addEventListener('click', function(e){
var imgUrl = this.src;
var mainUrl = document.getElementById('mainImage');
mainUrl.src = imgUrl;
});
.add_gallery{
width: 25%;
}
#mainImage{
width: 100%;
}
.miniatures{
width: 100%;
display: flex;
}
.imgStyle{
height: 100px;
}
<div class="add_gallery">
<div class="galery">
<img id="mainImage" src="https://thumbs.dreamstime.com/z/obsługuje-brać-obrazek-selfie-z-jego-smartphone-w-górach-zdjęcie-ruchomej-55632576.jpg" />
<br />
</div>
<div class="miniatures">
<img class="imgStyle" src="http://www.grhnarew.fora.pl/images/galleries/3876491244c9e14053175d-428229-wm.jpg">
<img class="imgStyle" src="http://sekretystronwww.pl/wp-content/uploads/2015/11/temat2015m_2.jpg">
<img class="imgStyle" src="http://www.bordercollie.fora.pl/images/galleries/1287702814bfa931698357-712854-wm.jpg">
<img class="imgStyle" src="https://img-ovh-cloud.zszywka.pl/0/0000/6629-cudowny-obrazek.jpg">
</div>
</div><!--add_gallery-->
You almost have it, just set the mini image that was clicked src to the main images src before you set it.
var mini = document.getElementsByClassName('imgStyle');
for(var i = 0; i < mini.length; i++)
mini[i].addEventListener('click', function(e){
var imgUrl = this.src;
var mainUrl = document.getElementById('mainImage');
this.src = mainUrl.src;
mainUrl.src = imgUrl;
});
.add_gallery{
width: 25%;
}
#mainImage{
width: 100%;
}
.miniatures{
width: 100%;
display: flex;
}
.imgStyle{
height: 100px;
}
<div class="add_gallery">
<div class="galery">
<img id="mainImage" src="https://thumbs.dreamstime.com/z/obsługuje-brać-obrazek-selfie-z-jego-smartphone-w-górach-zdjęcie-ruchomej-55632576.jpg" />
<br />
</div>
<div class="miniatures">
<img class="imgStyle" src="http://www.grhnarew.fora.pl/images/galleries/3876491244c9e14053175d-428229-wm.jpg">
<img class="imgStyle" src="http://sekretystronwww.pl/wp-content/uploads/2015/11/temat2015m_2.jpg">
<img class="imgStyle" src="http://www.bordercollie.fora.pl/images/galleries/1287702814bfa931698357-712854-wm.jpg">
<img class="imgStyle" src="https://img-ovh-cloud.zszywka.pl/0/0000/6629-cudowny-obrazek.jpg">
</div>
</div>
(Sorry if this question has rlly simple answer!!). Anyways I'm trying to make two slideshows on the one page. Only one ever shows though. As in although I've added all the code for the second one, only the first one is visible on the page.
I'm only allowed to keep the code basic, but can do whatever with the javascript if that's what is the problem.
The javascript. I'm not sure what it means (sorry again) but it works for the one banner
<!-- script for slideshow ((copied from http://www.w3schools.com/w3css/w3css_slideshow.asp!)) -->
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 1000); <!-- time between slide change -->
}
</script>
The html code - for the second slideshow I copied the code between those two 'slideshow' notes into a different div (and changed the picture filenames)
<!--slideshow-->
<div class="slideshow-container">
<img class="mySlides" src="images/2img1.jpg" alt="2img1.jpg">
<img class="mySlides" src="images/2img2.jpg" alt="2img2.jpg">
<img class="mySlides" src="images/2img3.jpg" alt="2img3.jpg">
<img class="mySlides" src="images/2img4.jpg" alt="2img4.jpg">
<img class="mySlides" src="images/2img5.jpg" alt="2img5.jpg">
<img class="mySlides" src="images/2img6.jpg" alt="2img6.jpg">
</div>
<!--END slideshow-->
This is the css (just the relevant container
specifications).
/* Slideshow container */
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
}
.mySlides {
position: relative;
vertical-align: middle;
background-repeat: no-repeat;
background-size: cover;
height: 200px;
width: 500px;
margin: auto;
border-radius: 25px;
}
Thank you in advance!!
If you copied the div with the same elements, and left the class names alone, then it makes sense that only one slideshow appears - but it should be a slideshow playing both sets of images (or duplicates, if the sets are the same). It's a somewhat simple fix. First, rename the class for the second set of images, so your HTML would be something like:
<div class="slideshow-container">
<img class="mySlides" src="images/2img1.jpg" alt="2img1.jpg">
<img class="mySlides" src="images/2img2.jpg" alt="2img2.jpg">
<img class="mySlides" src="images/2img3.jpg" alt="2img3.jpg">
<img class="mySlides" src="images/2img4.jpg" alt="2img4.jpg">
<img class="mySlides" src="images/2img5.jpg" alt="2img5.jpg">
<img class="mySlides" src="images/2img6.jpg" alt="2img6.jpg">
</div>
<div class="slideshow-container">
<img class="mySlides2" src="images/2img1.jpg" alt="2img1.jpg">
<img class="mySlides2" src="images/2img2.jpg" alt="2img2.jpg">
<img class="mySlides2" src="images/2img3.jpg" alt="2img3.jpg">
<img class="mySlides2" src="images/2img4.jpg" alt="2img4.jpg">
<img class="mySlides2" src="images/2img5.jpg" alt="2img5.jpg">
<img class="mySlides2" src="images/2img6.jpg" alt="2img6.jpg">
</div>
Then you can basically double the code needed for one slideshow, and set it to use the class for the second set of images. Might be tough to picture in your head, but you may be able to see it here:
var xIndex = 0, yIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
var y = document.getElementsByClassName("mySlides2");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < y.length; i++) {
y[i].style.display = "none";
}
xIndex++;
if (xIndex > x.length) {xIndex = 1}
x[xIndex-1].style.display = "block";
yIndex++;
if(yIndex > y.length) {yIndex = 1}
y[yIndex-1].style.display = "block";
setTimeout(carousel, 1000);
}
You can see I created a yIndex variable, and used y for .mySlides2 elements (instead of mySlides). I doubled the loop specifically for y instead of x, and incremented the yIndex in the same fashion as xIndex (same with setting it to one if it exceeds max number of images, and setting the next image to be displayed).
Here's a working Fiddle (well, working in a sense, the images are all broken, but the script works): https://jsfiddle.net/cchvncnd/
Great answer from #mark.hch.
However if you want stick with current Class. And let the function iterate it automatically, you may use this code, please review it
var myIndex = [];
carousel();
function carousel() {
var i, j;
var con = document.getElementsByClassName("slideshow-container");
for (j = 0; j < con.length; j++) {
myIndex[j] = myIndex[j] || 0;
for (i = 0; i < con[j].children.length; i++) {
con[j].children[i].style.display = "none";
}
if (myIndex[j] >= con[j].children.length) {
myIndex[j] = 0;
}
con[j].children[myIndex[j]].style.display = "block";
myIndex[j] ++;
}
setTimeout(carousel, 1000); <!-- time between slide change -->
}
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
display: inline-block;
height: 200px;
width: 500px;
border: 1px solid green;
}
.mySlides {
position: relative;
vertical-align: middle;
background-repeat: no-repeat;
background-size: cover;
border-radius: 25px;
}
<div class="slideshow-container">
<img class="mySlides" src="images/2img1.jpg" alt="2img1.jpg">
<img class="mySlides" src="images/2img2.jpg" alt="2img2.jpg">
<img class="mySlides" src="images/2img3.jpg" alt="2img3.jpg">
<img class="mySlides" src="images/2img4.jpg" alt="2img4.jpg">
<img class="mySlides" src="images/2img5.jpg" alt="2img5.jpg">
<img class="mySlides" src="images/2img6.jpg" alt="2img6.jpg">
</div>
<div class="slideshow-container">
<img class="mySlides" src="images/1img1.jpg" alt="1img1.jpg">
<img class="mySlides" src="images/1img2.jpg" alt="1img2.jpg">
<img class="mySlides" src="images/1img3.jpg" alt="1img3.jpg">
<img class="mySlides" src="images/1img4.jpg" alt="1img4.jpg">
<img class="mySlides" src="images/1img5.jpg" alt="1img5.jpg">
<img class="mySlides" src="images/1img6.jpg" alt="1img6.jpg">
</div>
I'm trying to implement a function like Google Image Search, which is that when you click a picture, a subpage appears in the screen below the picture. And it takes a whole line. The screenshot is showing below.
http://www.wy19900814fun.com/thumbnails/test.png
Here's my code. Is there anyone helping me to implement or at least give me some advise? I'm trying to do a function like when you click a picture, the second div class shows below the picture you click. It needs to take a whole line.
<html>
<head>
<style>
.container {
text-align: center;
}
.container img {
display:inline-block;
}
.subpage {
display:none;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="container">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/20964301401_5d9fdf5c0d_o_large_958fe482-f2e7-4120-b4fe-016fcf612bf5_large.jpeg?v=1440873580">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/20770321799_5c81882577_o_large_c4c19c91-0532-422f-99d0-297b2731c4e3_large.jpeg?v=1440873580">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/17108089939_8d4cefd10a_o_large_3dc1d49b-cb59-432a-a8d7-b118cfd61314_large.jpeg?v=1440873578">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/17950190230_114070818c_o_large_60ce5c71-7575-49ab-be75-ed2cfed6768d_large.jpeg?v=1440873577">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15175737319_c0db73446f_o_zps867eecb9_large_858814b0-6a80-4a34-b55d-97acc179cc91_large.jpeg?v=1440873576">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15085342999_b8878e538e_o_zps54a2d381_large_f731cd55-f8d0-4e9a-8ba5-c254b4b8241d_large.jpeg?v=1440873575">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15085523427_bacc983407_o_zps2c262937_large.jpeg?v=1440873574">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15268975561_ed3f9f5c0b_o_zpsd4857119_large.jpeg?v=1440873573">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15339485796_bed118ac3c_o_zpsf0927ac3_large.jpeg?v=1440873572">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/IMG_9092_zpsc38bd27c_large.jpeg?v=1440873571">
</div>
<div class="subpage">
<p>This is </br>just</br> a test.</br> Please show</br> subpage</p>
</div>
</body>
</html>
$('img').click(function() {
var $img = $(this),
offset = $img.offset(),
subPage = $('#subPage').hide().insertAfter('.container'),
nextImage = $img.next(),
finalImage = $img;
if (!$img.is(':last-child')) {
while (offset.top == nextImage.offset().top) {
nextImage = nextImage.next();
}
finalImage = nextImage.prev();
}
subPage.html('').append($img.clone()).insertAfter(finalImage).slideDown();
});
.container {
text-align: center;
}
.container img {
display:inline-block;
width:32%;
vertical-align:top;
}
#subPage {
background:#222;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/20964301401_5d9fdf5c0d_o_large_958fe482-f2e7-4120-b4fe-016fcf612bf5_large.jpeg?v=1440873580">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/20770321799_5c81882577_o_large_c4c19c91-0532-422f-99d0-297b2731c4e3_large.jpeg?v=1440873580">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/17108089939_8d4cefd10a_o_large_3dc1d49b-cb59-432a-a8d7-b118cfd61314_large.jpeg?v=1440873578">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/17950190230_114070818c_o_large_60ce5c71-7575-49ab-be75-ed2cfed6768d_large.jpeg?v=1440873577">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15175737319_c0db73446f_o_zps867eecb9_large_858814b0-6a80-4a34-b55d-97acc179cc91_large.jpeg?v=1440873576">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15085342999_b8878e538e_o_zps54a2d381_large_f731cd55-f8d0-4e9a-8ba5-c254b4b8241d_large.jpeg?v=1440873575">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15085523427_bacc983407_o_zps2c262937_large.jpeg?v=1440873574">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15268975561_ed3f9f5c0b_o_zpsd4857119_large.jpeg?v=1440873573">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15339485796_bed118ac3c_o_zpsf0927ac3_large.jpeg?v=1440873572">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/IMG_9092_zpsc38bd27c_large.jpeg?v=1440873571">
</div>
<div id="subPage"></div>
You could do like that :
JS :
$(document).ready(function () {
$('.container img').click(function () {
var src = $(this).attr('src');
var subpage = $('.subpage');
subpage.hide().empty().fadeIn(250);
$('<img>', {'src' : src}).hide(250).appendTo(subpage).fadeIn(250);
});
});
Jsfiddle