Any idea how to Force Image Load of specific div of Lazy Load XT jQuery plugin ?
I mean data-src="" image will load automatically after page load without page scroll or viewport.
This plugin only loads images on the following events load orientationchange resize scroll.
But cannot find any documentation showing how to achieve this.
HTML:
<div class="specific">
<img data-src="/images/post-image.jpg">
</div>
Note: I cannot manually change img attribute data-src="" to src=""
I don't know a way for Layz Load XT. But I think that is a pretty neat functionality, so I updated my own plugin, jQuery Lazy, for this. Maybe this helps you too. It's available since version 1.7.4.
Below I made you an example. Just use the public function force to load specific elements, ignoring the viewport.
// create lazy instance
var instance = $(".lazy").lazy({
chainable: false,
autoDestroy: false,
// below just for demonstration
bind: "event",
appendScroll: null
});
// just for demonstration
$("body")
.append('<img class="lazy test1" src="" data-src="//dummyimage.com/150x100/&text=1">')
.append('<img class="lazy test2" src="" data-src="//dummyimage.com/150x100/&text=2">');
instance.addItems(".lazy");
// load only 'img' with class '.test1'
instance.force(".test1");
img {
width: 150px;
height: 100px;
margin: 5px;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.lazy/1.7.4/jquery.lazy.min.js"></script>
Related
The rollover works on the image itself, changing from one image to another then back again, but the problem is that it the image also changes on each side of the image on rollover where there is blank space.
I know there it can be done better in CSS, but it is a school assignment and must be in javascript. Below is the code in HTML, then what I have for it in CSS
HTML
<script>
imageout=new Image();
imageout.src="Pics/Image1.jpg";
imageover=new Image();
imageover.src="Pics/Image2.jpg";
function image_out(){
document.images['imageout'].src="Pics/Image1.jpg";
}
function image_over(){
document.images['imageout'].src="Pics/Image2.jpg";
}
</script>
<a href="javascript-rollover-image-swap.htm" onmouseover="image_over();"
onmouseout="image_out();"><img src="Pics/Image1.jpg" class="center"
id="imageout" width="400" height="200" alt="JavaScript rollover. Image swap"></a>
CSS
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
If someone can point out my error or if there is a better way to do this (must be javascript), I would certainly appreciate it!
As I have mentioned in the comment, block level elements will cover the entire row, So remove the class center from your anchor tag and If you want to align the items in middle then change your structure of html like below.
<div class="center">
<a href="javascript-rollover-image-swap.htm" onmouseover="image_over();"onmouseout="image_out();">
<img src="https://www.delecta.co.za/wp-content/uploads/sample.jpg" id="imageout" width="400" height="200" alt="JavaScript rollover. Image swap">
</a>
</div>
DEMO
I've programmed a small lightbox for viewing images on my website. To keep the loading process fast I would like to "lazy load" the fullsize image. At the moment browsers always load the preview (test.jpg?size=520px) and the fullsize image (test.jpg).
Is there any simple solution to prevent browsers from loading the fullsize image until the image is clicked?
The website is only using minimal javascript - but I found no "no javascript" solution. Additionally I prefer a solution that doesn't require large html strings inside the .js file that will be added on mouse click.
Most lazy load scripts change only the attribute key inside the image tag. However, with HTML 5 this is now longer a useful approach. Maybe it is possible to change the <picture> tag (<picture> <<>> <picture-disabled>) and prefetch the full size image?
HTML:
<div class="imagecc">
<picture onclick="lightboxshow('test004.jpg')">
<source type="image/webp" srcset="test004.webp?size=520px">
<img src="test.jpg?size=520px" alt="...">
</picture>
<p class="imgcaption">...</p>
</div>
<div id="test004.jpg" class="imageccbox" onclick="lightboxclose(this)">
<div class="imageccboxpicture">
<picture>
<source type="image/webp" srcset="test004.webp">
<img src="test.jpg">
</picture>
</div>
</div>
CSS:
.imageccbox {
display: none;
position: fixed;
z-index: 9999;
top: 0; left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,1));
text-align: center;}
.imageccbox:target {
background: rgba(255,255,255,0.8);
display: block;
outline: none;}
.imageccbox:target > .imageccboxpicture {opacity: 1.0;}
.imageccboxpicture {
margin-top: 5%;
opacity: 0.4;
transition: opacity 500ms linear;
cursor: none;}
JavaScript:
function lightboxshow(object) {
var imageccbox = document.getElementById(object);
imageccbox.style.display='block';
setTimeout(function() {imageccbox.getElementsByClassName("imageccboxpicture")[0].style.opacity = 1.0;}, 25);
window.location.hash = object;}
Consider using the <template> element. It's just a part of web components.
Essentially you stuff any content in <template> that you do not want the browser to load, and then move the content when you want it to be loaded. You make that change onload, or onclick, or whatever other event you like. Either way, it's not a lot of JavaScript to do and you don't need any libraries.
Take a look at this tutorial: Quick trick: using template to delay loading of images.
Older browsers that don't support the tag just won't get the lazy load benefit, so there is a nice progressive enhancement bonus there as well.
Another reference: http://webcomponents.org/articles/introduction-to-template-element/
As Charlie said, the only way to do this is with JavaScript.
One solution is to remove the src attribute from the <img> tag and only add it when the image is clicked:
function lightboxshow(object) {
var imageccbox = document.getElementById(object);
var img = imageccbox.getElementsByTagName('img')[0];
img.setAttribute('src', 'test.jpg');
imageccbox.style.display='block';
setTimeout(function() {imageccbox.getElementsByClassName("imageccboxpicture")[0].style.opacity = 1.0;}, 25);
window.location.hash = object;
}
Edit: please see aardrian response as that template solution seems way more interesting!
I make an image gallery. I have 9 fields, in each field there is an image (or better, there is a part of image). In total, I have 9 big images and in each of that fields there is a 1/9 of each big image.
When I "hover" one of these nine fields, I need to change the other fields to the rest of this image and see the whole image over all fields.
Okay, this I am able to make with CSS and a little bit of JS, but I am looking for any javascript/jQuery effect, let´s say to change image by image from right top corner to left bottom corner, any fluently change between images.
Example, with 3 images:
HTML:
<img onmouseover="show_image('r');" rel="1" src="" class="r">
<img onmouseover="show_image('r');" rel="1" src="" class="r">
<img onmouseover="show_image('b');" rel="2" src="" class="b">
<img onmouseover="show_image('g');" rel="3" src="" class="g">
<img onmouseover="show_image('b');" rel="2" src="" class="b">
<img onmouseover="show_image('g');" rel="3" src="" class="g">
<img onmouseover="show_image('r');" rel="1" src="" class="r">
<img onmouseover="show_image('b');" rel="2" src="" class="b">
<img onmouseover="show_image('g');" rel="3" src="" class="g">
CSS:
img {float: left; width: 30%; height: 100px; margin: 0 9px 9px 0;}
img:nth-child(3n+3) {margin-right: 0;}
.g {background: #070;}
.b {background: #00f;}
.r {background: #f00;}
JavaScript:
function show_image(id) {
$('img').removeClass().addClass(id).removeAttr('onmouseover');
}
(fiddle)
Do you have any idea how to make the fluent change of images when hover one of them?
In HTML there should be all 27 small images, it´s no problem, I´m looking for the switching effect. You can send links for examples, maybe I only don´t know how to call what I need :-)
Thanks.
Ok, I understand your question now!
You mean, when you hover over on an image, the rest of images get replaced by its remaining parts and whole of the 9 images match up to complete the image?
You need to set these functions!
Try to remove the onmouseover function from the element, and try to use jQuery for that!
Lets start the example!
The example image tag:
<img src="some/source/to_file.png" alt="photo" class="image5" id="red" />
First you need to get the image on which the mouse over event occured, like this:
$('img').mouseover(function () {
var id = $(this).attr('id');
var class = $(this).attr('class');
if(id == 'red') {
if(class == 'image5') {
/* replace all the other images with red one
* here you will check the image's class too, which is the number
* location where it is present at!
*/
}
}
}
After this, you will need to shift the image's back too! For that, use this:
$('img').mouseleave(function () {
// shift the src tag back as
$('.image5').attr('src', 'its/src/to_file5.png');
$('.image7').attr('src', 'its/src/to_file7.png');
$('.image6').attr('src', 'its/src/to_file6.png');
}
And so on.
And yes, you will be needed to keep the images in the browser as downloaded files on the page load and just keep shifting them once the user hover's over!
In your fiddle, all you're doing is adding a classname but you are not removing or reverting it back on mouseleave event; there is no mouseleave event.
You can use the jQuery UI switchClass() method which allows you to animate whole class.
Here is a working code sample using your as basis:
function show_image(id) {
$('img').each(function() {
var className = this.className;
if (className == id)
className = '';
$(this).removeClass().switchClass(className, id, 1000, 'linear').removeAttr('onmouseover');
});
}
Since it's removing one class and add other, if the one you remove and add is the same it won't work hence the need to check and reset.
As for "linear" it's just my personal choice of easing method, choose your own from the full list.
Updated fiddle.
I've looked at a few implementations of this and so far none have worked so I'm resorting to posting. The concept is: a placeholder image which once clicked changes into the video and autoplays.
Current HTML:
<div id="ytvideo" style="display:none;">
<iframe width="939" height="528" id="ytvideo" frameborder="0" allowfullscreen></iframe>
</div>
<img class="aligncenter size-full" id="homevideo" alt="placeholder" src="/wp-content/uploads/2013/10/placeholder.jpg" width="940" height="548" />
Current JS:
jQuery(document).on('click','#homevideo',function(e){
jQuery('#ytvideo').show();
jQuery('#homevideo').hide();
jQuery('#ytvideo').attr("src","www.youtube.com/embed/[myvidid]?autoplay=1");
jQuery("#ytvideo").attr('src', jQuery("#ytvideo", parent).attr('src') + '?autoplay=1');
});
I've looked at trying to reload the iframe but that doesn't seem to work.
Any ideas?
MARKED: FIXED
You forgot the protocol - www.youtube.com/… would link to folder on the server.
With protocol it works fine – I’d suggest creating the whole iframe dynamically though, because with an empty src attribute at the beginning it would load the same page it is embedded in.
<div id="ytvideo" style="display:none;"></div>
<!-- replaced your image with a span here for fiddle -->
<span id="homevideo" data-vidid="mbOEknbi4gQ">click me</span>
$(document).on('click','#homevideo',function(e){
$('#homevideo').hide();
$('#ytvideo').html('<iframe width="939" height="528" id="ytvideo" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/'+$(this).attr("data-vidid")+'?autoplay=1"></iframe>').show();
});
http://jsfiddle.net/HuVqm/
As discussed in one of the comments, you can get both the img and the video from the api.
This would be good if you didn't want to maintain the image, just wanted it to pull through from YouTube. (However I am not sure that YT provide an image as large as 939 so in your case you might still want to use your own image). I have put in a random channel name 'RIDEChannel' feel free to change that with your channel name.
<div id="vid"></div>
$.getJSON("http://gdata.youtube.com/feeds/api/users/RIDEChannel/uploads?max-results=1&v=2.1&alt=jsonc&callback=?", function (myvid) {
var vid = $("#vid");
$.each(myvid.data.items, function (i, item) {
vid.append("<img width='300' height='250' src='" + item.thumbnail.hqDefault + "'>");
$(document).on("click", "#vid img", function (event) {
vid.append("<iframe width='300' height='250' src='http://www.youtube.com/embed/" + item.id + "?autoplay=1' frameborder='0'></iframe>");
$(this).hide();
});
});
});
So the problem laid with the youtube url missing the http:// prefix and also for the fact that the iframe name was the same as the div it was enclosed in. (How silly of me) Thus it was attaching the SRC to the div, not the iframe.
Working DEMO
Try this,
First you cannot have same id for more than one elements <div id="ytvideo" and <iframe id="ytvideo"
[myvidid] in http://www.youtube.com/embed/[myvidid]?autoplay=1 should be replaced with the id of the video
html
<div id="ytvideo1" style="display:none;">
<iframe width="939" height="528" id="ytvideo" frameborder="0" allowfullscreen></iframe>
</div>
<img class="aligncenter size-full" id="homevideo" alt="placeholder" src="http://thefabweb.com/wp-content/uploads/2012/12/6191814472_fa47c79b67_b-900x600.jpg" width="940" height="548" data-vid='DBNYwxDZ_pA'/>
code
jQuery(document).on('click','#homevideo',function(e){
jQuery('#ytvideo1').show();
jQuery('#homevideo').hide();
jQuery('#ytvideo').attr("src","http://www.youtube.com/embed/"+$(this).data('vid')+"?autoplay=1");
});
If you have more than 1 video, it could be useful to store the url to the video in the html and use a class instead of an id.
Also, if you put the preview image into the background, behind the video, it will stay there until the iframe has loaded, reducing that "flickering" effect when clicked.
I also restructured the markup a bit to reduce redundancy, here I specify the size of the video and the video id only once.
Also, you should use jQuery's .one('click') instead of .click(), since you want that event listener removed after it has fired the first time.
html:
<div class="ytvideo"
data-video="73sgatbknvo"
style="width:939px; height:528px; background-image:url(http://lorempixel.com/939/528/)">
<div class="seo">
Have a meaningful description of the video here
</div>
</div>
CSS:
.ytvideo {
background-position: center;
background-size: contain;
background-repeat: no-repeat;
cursor: pointer;
}
.ytvideo iframe {
border-style: none;
height: 100%;
width: 100%;
}
.ytvideo .seo {
display: none;
}
jQuery:
$('.ytvideo[data-video]').one('click', function() {
$(this).html('<iframe allowfullscreen src="//www.youtube.com/embed/'+$(this).data("video")+'?autoplay=1"></iframe>');
});
If you want to support browsers with no script support, you'd have to add a "noscript" element in the .ytvideo div that already contains the iframe.
fiddle:
http://jsfiddle.net/6ARc7/
I have set up the JQuery Isotope plugin as such:
$(function(){
$('#isotopecontainer').isotope({
itemSelector : '.frontitem',
sortBy: "random",
masonry : {
}
});
});
With my HTML:
<div id="isotopecontainer">
<img src="image1.jpg" class="frontitem">
<img src="image2.jpg" class="frontitem">
<img src="image3.jpg" class="frontitem">
~
</div>
But the images only appear once the browser has been resized. Am I missing a step to trigger the images once the browser loads?
I have noticed when I look in the console, Isotope gives the #isotopecontainer div a height of 0px; so none of my images show. This changes when I resize the browser window.