Here is a div, containing images, with max-height: 300px. Whenever a scrollbar is needed (this is the case here), I want to add a second div (the gray one) next to the first. I use scrollHeight to test the presence of a scrollbar.
<div class="container">
<div class="pictures">
<img src="test1.jpg" /> <img src="test2.jpg" /> <img src="test3.jpg" /> <img src="test4.jpg" />
<img src="test5.jpg" /> <img src="test6.jpg" /> <img src="test7.jpg" /> <img src="test8.jpg" />
<img src="test9.jpg" /> <img src="test10.jpg" /> <img src="test11.jpg" /> <img src="test12.jpg" />
<img src="test13.jpg" /> <img src="test14.jpg" /> <img src="test15.jpg" /> <img src="test16.jpg" />
<img src="test17.jpg" /> <img src="test18.jpg" /> <img src="test19.jpg" /> <img src="test20.jpg" />
<img src="test21.jpg" /> <img src="test22.jpg" />
</div>
<div class="scroll"></div>
</div>
Some CSS:
div.container {
width: 410px;
max-height: 300px;
overflow: auto;
}
div.container div.pictures {
float: left;
width: 390px;
}
div.container div.scroll {
display: none;
float: left;
width: 30px;
background-color: #eee;
}
And the JS:
$(function() {
$(".scroll").each(function() {
var iParentHeight = $(this).parent()[0].scrollHeight;
if (iParentHeight > $(this).parent().css("max-height").replace(/[^-\d\.]/g, '')) {
var iWidth = $(this).parent().width()+$(this).width();
$(this).parent().css("width", iWidth);
$(this).show();
$(this).height(iParentHeight);
}
});
});
On Firefox it's working. On Chrome and Safari though, there is some issue: sometimes (actually, most of the time for Safari) the gray dive does not appear when it should.
I made some tests: without images, with X time the same image and with X different images. The issue is only appearing when there is X different images (maybe some loading time problem?).
In fact, the output of scrollHeight is not always the same on Chrome and Safari. For FF, I always get the same result.
Any idea would be appreciated!
Edit: forgot the link with an example: http://toolboxebz.free.fr/test_scroll/test.html
I think that you should wrap your js function in a document.ready or utilize something like imageloaded, as you said the behaviour is not deterministic, that's due to the fact that when your function runs, images could be not already fully loaded in the browser.
Related
So I have a bunch of elements like:
<div class="hover-icon one">
<img class="original" src="sswe-images/Circle_Customer Notifications.png"/>
<img class="hovered one" src="sswe-images/Customer-Notifications.gif" />
</div>
<div class="hover-icon two">
<img class="original" src="sswe-images/Circle_Field Service Tools.png" />
<img class="hovered" src="sswe-images/Field-Service-Tools.gif" />
</div>
<div class="hover-icon three">
<img class="original" src="sswe-images/Circle_Remote Connectivity.png" />
<img class="hovered" src="sswe-images/Remote-Connectivity.gif" />
</div>
where the .original are placeholders and the .hovered are gifs that I want to animate on hover, then go back to their normal state after the mouse leaves. My attempt is:
$('div.hover-icon').hover(function(){
var orig = $(this).find('.original');
orig.hide();
var hov = $(this).find('.hovered');
hov.attr('src', hov.attr('src') + "?x=" + Math.random());
setTimeout(function(){ hov.show(); }, 100);
/* $(this).mouseleave(function(){
hov.hide();
orig.show();
});*/
});
but the reason for the commented out section is because it's not working. It's causing all kinds of craziness. What is the proper pattern I should be using here?
The basic HTML structure is correct. Use CSS only though , like this codepen http://codepen.io/ryanpcmcquen/pen/gGqdI does
.hover-icon {
position: relative;
margin: 0 auto;
}
.hover-icon img {
position: absolute;
}
.hover-icon img.original:hover {
opacity: 0;
}
I made some code where the user can upload some images from a zip. On the next page I need to show all the images seperatly in a 85*85 px frame.
The problem is that it may take some time for all the images to load. So I want to show a loading gif while the user waits for the image to load.
I've set the src of the images to be the loading gifs, while I created some checkboxes with the real source as id
echo "<td><img src=\"beelden/ajax-loader-black-16.png\" id=\"img".$image."\" style=\" width: 85px; height: 85px; border: 1px solid gray; background-color: #fff; padding: 10px;\">";
echo "<input type=\"checkbox\" id=\"img[".$image."]\" name=\"check_image[]\" value=\"".$filename."\" /></td>";
<input type="hidden" name="aantal" id="aantal" value="<?=$image?>" >
Then I created some javascript to check if the image is loaded, and when it is, it is supposed to replace the source of the image.
<script>
var aantal = document.getElementById("aantal").value;
for(var i = 0; i < aantal; i++){
var source = document.getElementById("img["+i+"]").value;
var img = new Image();
img.onload = function(){
$("#img"+i).attr('src', source);
}();
img.src = source;
}
</script>
But this does not work the way I expected, I think it fires for all of the images as soon as the first one is loaded. Any ideas what I am doing wrong or how to fix this?
You can set the background of an image to the loading gif. It is a simple css trick. You wouldn't need then to make a js script.
.loading {
background: transparent url('http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif') center no-repeat;
}
<img class="loading" src="http://placehold.it/106&text=1" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=2" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=3" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=4" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=5" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=6" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=7" width="106px" height="106px" />
Update :
In case you have transparent images then the story becames a bit more complicated but, still can be done with css and some div elements.
.image-wrapper {
overflow: hidden;
width: 106px;
height: 106px;
display: inline-block;
}
.image-wrapper img {
float: left;
display: block;
opacity: 0.2; /* simulating a semitransparent image */
}
.image-wrapper:after, .loading {
content: ' ';
background: transparent url('http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif') center no-repeat ;
background-size : auto 100%;
width: 106px;
height: 106px;
float: left;
display: block;
}
<div class="image-wrapper">
<!-- simulates a hard loading image -->
<img src="http://placehold.it/not-existing" alt="" />
</div>
<div class="image-wrapper">
<img src="http://placehold.it/106x106&text=2" alt="" />
</div>
<div class="image-wrapper">
<img src="http://placehold.it/106x106&text=3" alt="" />
</div>
<div class="image-wrapper">
<img src="http://placehold.it/106x106&text=4" alt="" />
</div>
<div class="image-wrapper">
<img src="http://placehold.it/106x106&text=5" alt="" />
</div>
<div class="image-wrapper">
<img src="http://placehold.it/106x106&text=6" alt="" />
</div>
<div class="image-wrapper">
<img src="http://placehold.it/106x106&text=7" alt="" />
</div>
Unfortunately the browser adds a broken icon or a ? while loading, this is why the image contains an empty alt;
Update 2 :
The second variant relies very much on the image size, if you have difrent sizes than the loading gif won't be pushed away properly, as an alternative would be to use the first variant and a little js script that will remove the background as soon as the image is loaded:
$('img').load(function(){
$(this).css('background','none');
});
.loading {
background: transparent url('http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif') center no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="loading" src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=2" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=3" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=4" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=5" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=6" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=7" width="106px" height="106px" />
Angular 8 Solution with Hostlistener and Hostbinding.
1. Create a simple attribute directive
import { Directive, HostListener, Input, HostBinding } from '#angular/core';
#Directive({selector: '[imageLoader]'})
export class ImageLoaderDirective
{
#Input('src') imageSrc;
#HostListener('load')
loadImage()
{
this.srcAttr=this.imageSrc;
}
#HostBinding('attr.src') srcAttr="../../assets/pics/Loader.svg"
constructor() { }
}
Basically we set the initial image source to the loader image. Once the image loads(load event triggered), we listen to it and set the image source to the actual image.
2. Now use the just need to use the created attributes on your images.
<img imageLoader src='image.jpg'>
Using svg requires no styling changes, gif may require css changes.
You can visit the website for working implementation.
i am attempting to display images when the corresponding thumbnail is hover over using only css and am having trouble with the logic and don't know if it is even possible. i can do it in javascript if absolutely necessary.
Here is my latest attempt.
<div id='img-container' class='grd12'>
<img id='img1' class='slide-images' src='images/10086115704_15ab56a165_o.jpg' alt='1'>
<img id='img2' class='slide-images' src='images/9917938624_0a8778f8b1_o.jpg' alt='2'>
<img id='img3' class='slide-images' src='images/PIA18847.jpg' alt='3'>
<img id='img4' class='slide-images' src='images/sun-large.jpg' alt='4'>
</div>
<!-- <div class='grd3 thumbnail'>-->
<img id='thumb1' class='grd3 thumbnail' src='images/10086115704_e36e457d2b_q.jpg' alt='##'>
<!-- </div>-->
<!-- <div class='grd3 thumbnail'>-->
<img id='thumb2' class='grd3 thumbnail' src='images/9917938624_1ed12deaa2_q.jpg' alt='##'>
<!-- </div>
<div class='grd3 thumbnail'>-->
<img id='thumb3' class='grd3 thumbnail' src='images/PIA18847.jpg' alt='##'>
<!--</div>
<div class='grd3 thumbnail'>-->
<img id='thumb4' class='grd3 thumbnail' src='images/sun-large.jpg' alt='##'>
<!--</div>-->
And the CSS
#img-container{
position:relative;
top:0px;
left:0px;
height:950px;
}
.slide-images{
position:absolute;
top:0px;
left:0px;
}
.thumbnail > img{
margin-left:auto;
margin-right:auto;
display: inherit;
}
img#thumb4:hover ~ #img4>#image4{
display:none;
}
I believe this is possible using CSS alone, however it is not very scaleable and it might end up being easier and more appropriate to use Javascript for this. For example:
img#thumb1:hover ~ #img4>#image4{
display:none;
}
Your selector here is incorrect. The general sibling selector selects only elements after the first match. In this case, your image thumb is after your image, but this selector is looking for an image after an image thumb. This is the opposite of what you have. There is no 'sibling before' selector in CSS.
An easier solution, rather than fiddling around with CSS selectors, would just be to bind each thumbnail to a click event that changes the source of a single image tag each time (or alternatively, scrolls across/fades, whatever animation you're looking for). This way, you save on markup, don't need to worry about positioning as much, and can dynamically generate the image display.
For example, to get the ID of an image, you could bind a click event to each thumbnail and then grab the ID of the image which could stored in a data attribute:
$('.thumbnail').on('hover', function() {
var activeImg = $(this).data('imgid');
// From here, set the main image to have the associated image source
}
This is very possible to achieve with just CSS. The layout of your HTML is what needs to change. In this example:
Each thumbnail and full-size image is placed inside a div container
The full-size image is hidden with opacity: 0;
When the div container is hovered, the full-size image is given opacity: 1 and will fade-in thanks to the transition
z-index: 1 keeps the full-size images above the thumbnails
Full Example
.item {
float: left;
position: relative;
}
img {
display: block;
cursor: pointer;
margin: 5px;
}
.fullsize {
position: absolute;
opacity: 0;
transition: opacity 0.6s;
z-index: 1;
top: 0;
left: 0;
pointer-events: none;
}
.item:hover .fullsize {
opacity: 1;
}
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
JavaScript - I am aware that this is where I need to add something to enable multiple instances to run, however I really have no idea of how to code this correctly.
<script type="text/javascript" src="kuttinew/jquery-1.10.2.js"></script>
<script>
$('#images_thumbnails a').click(function () {
var newImageSrc = $(this).attr('href');
$('#images_full img').attr({
'src': newImageSrc
});
return false;
});
</script>
CSS - This was simple enough
#images_full img,
#images_thumbnails img {
padding: 3px;
border: 1px solid #CCC;
}
#images_thumbnails img {
margin: 4px;
width: 40px;
height: 40px;
}
HTML - Finally the HTML elements
<div id="images_full">
<img src="kuttinew/images/full_image/kuttison-complete-set01.jpg" />
</div>
<div id="images_thumbnails">
<a href="kuttinew/images/full_image/kuttison-complete-set01.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set01.jpg" />
</a>
<a href="kuttinew/images/full_image/kuttison-complete-set02.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set02.jpg" />
</a>
<a href="kuttinew/images/full_image/kuttison-complete-set03.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set03.jpg" />
</a>
</div>
It works perfectly fine until I add a second instance on same HTML page, the second set just open in own window like they have almost by-passed the Java commands.
I'm going to take a stab in the dark and say that your problem is that you are just using ids (#) instead of classes (.) to represent your multiple photo galleries. If you want similar behavior among multiple "instances," your jQuery script should be acting upon a class instead of an id. For example:
http://jsbin.com/otiTOyU/1/edit?html,css,js,output
Script:
<script type="text/javascript" src="kuttinew/jquery-1.10.2.js"></script>
<script>
$('.images_thumbnails a').click(function () {
var newImageSrc = $(this).attr('href');
// Traverse the DOM to change this's respective '.images_full img'
$(this).parent().prev().children().first().attr('src', newImageSrc);
return false;
});
</script>
CSS:
.images_full img,
.images_thumbnails img {
padding: 3px;
border: 1px solid #CCC;
}
.images_thumbnails img {
margin: 4px;
width: 40px;
height: 40px;
}
HTML:
<div id="gallery1">
<div class="images_full">
<img src="kuttinew/images/full_image/kuttison-complete-set01.jpg" />
</div>
<div class="images_thumbnails">
<a href="kuttinew/images/full_image/kuttison-complete-set01.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set01.jpg" />
</a>
<a href="kuttinew/images/full_image/kuttison-complete-set02.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set02.jpg" />
</a>
</div>
</div>
<div id="gallery2">
<div class="images_full">
<img src="kuttinew/images/full_image/kuttison-complete-set01.jpg" />
</div>
<div class="images_thumbnails">
<a href="kuttinew/images/full_image/kuttison-complete-set01.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set01.jpg" />
</a>
<a href="kuttinew/images/full_image/kuttison-complete-set02.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set02.jpg" />
</a>
</div>
</div>
There are different ways you could go about optimizing the code. However, I'll leave that to you as an exercise. Be sure to check out the link I gave near the beginning of my post for a live demo.
I'm building a simple image gallery with jquery but running into an annoying problem. Since the images are of various sizes I have centered them all to make it look even. However the built in fadeIn/fadeOut methods throw this centering awry and I'm not completely sure what is going on. I tried manually adding the centering class again then manually adding css but cannot get the image to center once it has been turned visible. Thoughts?
css -
.center { margin: 0 auto; }
img.invisible { display: none; }
img.visible { margin: 0 auto; display: block;}
markup -
<div id="content" class="center gallery">
<img src="images/event/event_1.jpg" alt="alt-text" class="visible" />
<img src="images/event/event_2.jpg" alt="alt-text" class="invisible" />
<img src="images/event/event_3.jpg" alt="alt-text" class="invisible" />
<div id="selection" class="overlay">
<div class="select first">
<img src="images/event/event_1_small.jpg" />
</div>
<div class="select">
<img src="images/event/event_2_small.jpg" />
</div>
<div class="select">
<img src="images/event/event_3_small.jpg" />
</div>
</div>
jQuery -
function updateImage(img_num) {
var cur_img = $("#content img.visible");
var next_img = $('#content img[src^="' + img_path + img_num + '.jpg"]');
cur_img.fadeOut('600',function() {
next_img.fadeIn('600');
next_img.removeClass("invisible").addClass("visible");
cur_img.removeClass("visible").addClass("invisible");
});
}
You are adding margin: 0 auto; only to the .visible class, you need to apply that to all of your images:
.gallery img{margin:0 auto;display:none}
.gallery img.visible{display:block}
Okay well that was surprising. To fix this problem I tried using fadeTo which revealed that the problem was the images once being made visible were given display: inline; so all it took to fix this problem was.
.gallery { text-align: center; }
I thought jQuery was just changing the opacity but it appears to also change the display. Tricky.