Get Isotope to not load specific images at all - javascript

I'm working with Isotope and I have a lot of images in it.
The problem is that when visiting my one page website from a smartphone it takes quite a bit to load the page as isotope load all the images thumbnails as soon as isotope itself loads.
So, basically I want to hide/not load all the images that mustn't be shown if it's category isn't clicked and what I did was use two workarounds:
set the figure to display:none so that it doesn't show the void where it was supposed to be and the other images can actually occupy that space
set the img src to about:blank so that it doesn't load until it's category is clicked
then when the link "Click me!"(category) is clicked the figure gets set to display:block and the img src gets replaced by the real image path.
style:
#showfigure{
display:none; !important
}
body:
Click me!
<figure id="showfigure" class="filter imgtoshow">
<img id="showimg" src="about:blank" alt="">
</figure>
script:
<script>
function showAll() {
document.getElementById("showfigure").style.display = 'block';
$("#showimg").attr("src","example.jpg");
};
</script>
Now, the only way I got it to work with multiple figures/images was giving each figure and image it's own id (showfigure1, showfigure2, showfigure3 etc... and showimg1, showimg2, showimg3, etc...) as using the same id only works for the first figure/img in the code.
Am I missing something?
I tried replacing the path of the img src like this:
http://jsfiddle.net/F6Gds/28/
But I can't get it to do the same with the onclick function from the link "Click me!", and anyways there's the same problem with the ids.
Thanks in advance for any help!

Related

How can I block images using js only?

I want to block all the images of any web page to lower the page loading time, consider the web page source code is loaded into browser but the documents/files still needed to be downloaded, is there any event to cover this problem?
I think can method must be followed in browsers text only mode.
No. If the src tag is already set the browser will Load the images no matter what. Remove the src tag after it was loaded doesn't change the fact that it was already downloaded.
The only way to avoid this is to set the src tags of imgs by Javascript dynamicly. And therefore not set images if you don't want to.
You can't make the browser not loading images if it's already in the html.
I'm not sure if it solves your problem but maybe you can try this:
<script type="text/javascript">
$(document).ready( function() { $("img").removeAttr("src"); } );
</script>
<div class="image"><img external-src="original.jpg" src="fake.jpg" /></div>
$(window).load(function(){
$('.image img').attr("src", $(this).attr('external-src')).removeAttr('external-src');
});
This will load all the images after whole dom loaded
You can remove the whole img tag
$("img").remove();
or you can just remove the image tag source attribute
$("img").removeAttr("src");
or you can just replace all the image source having shorter loading time
$("img").attr("src",'http://someimage.jpg');

Using JavaScript to dynamically change display style in img tags

I show links to 240 images on a page. The real images are uploaded by users. I tried to avoid showing an empty image if users did not upload it yet. jQuery did not work for me because of conflicts, so I have to do it in pure JavaScript.
image(s) links:
<img class="photo240" src="http://www.example.com/i/%%GLOBAL__AuthorID%%/p/b01.jpg" onerror="imgError()">
My JavaScript:
function imgError()
{
alert('The image could not be loaded.');
var _aryElm=document.getElementsByTagName('img'); //return an array with every <img> of the page
for( x in _aryElm) {
_elm=_aryElm[x];
_elm.className="photo240off";
}
}
The style photo240off equals to display:none.
Right now, whenever an image misses, all the images are turned to style photo240off and I want only the missing image to be hidden. So there is something wrong with my script.
(the overall script works well, because I get the alert).
Use this to get the image with the error.
Change to:
onerror="imgError(this)"
Then the function can be:
function imgError(el) {
alert('The image could not be loaded.');
el.className = "photo240off";
}
You need to reference the image from your onerror call and change the class only for that one.
Something like this:
HTML
<img class="photo240" src="example.jpg" onerror="imgError(this)">
JS
function imgError(el) {
el.className="photo240off";
}

Open specific image in fancybox from main image area

I have fancybox opening when I click on the "main image" area in my gallery, and no matter what image is open fancybox always starts at the first image in the gallery. For example when a user clicks on the 4th image thumbnail, it loads into the "main image" area correctly, but when clicking on the main image fancybox starts from the beginning.
I understand why it's doing this, because the main image area is wrapped in:
<a rel="gallery" class="fancybox" href="#hover0"> <img/> </a>
But what I would like to happen is to have the href '#hover0' change to #hover2, #hover3, #hover4 etc when the corresponding image is loaded in the main area. Not sure how to go about doing this.
Test Page: http://www.pixlsnap.com/j/testb.php
Alright, so I have tested this by saving your whole page (along with all the resources linked to your live site, so glad the images had a direct path), you could do the following, but before I go to that there is a script error that you need to correct:
$(function(){
// Bind a click event to a Cloud Zoom instance.
$('#1').bind('click',function(){
^ You have not closed this function correctly, it needs an extra }); at the end.
Now there are 2 things you need to do for your problem:
1) Paste the following code above the function I mentioned previously (the order matters so it needs to be above it):
$(document).ready(function(){
$('#imgconstrain img').on('click',function(){
$new_hoverid = $('img.cloudzoom-gallery-active').attr('id');
$('#1').closest('a').attr('href','#'+$new_hoverid);
});
});
To explain what this code is doing, when the big image is clicked, we are going to get the active image, in case you haven't noticed, when you click on a thumbnail it gets the class cloudzoom-gallery-active. So, on click of the bigger image, we are going to retrieve the id of the thumbnail with the cloudzoom-gallery-active class.
Now, since we are getting the id attribute, each image should have a unique id. So here we go for the second part:
2) Give your thumbnails image a unique id like:
<li><img class = 'cloudzoom-gallery' id="hover1" src ="http://brecksargent.com/slideshowpro/p.php?a=eXt1NExlZT1uemwuIjItOjI6Hys4OzouNio%2BNC4iKyAiPjQjJjs%2FNCY%2BLiY0&m=1383849642" alt ="LIG Hippie Commune" data-cloudzoom = "useZoom: '.cloudzoom', image:'http://brecksargent.com/slideshowpro/albums/album-16/lg/lig5_on.jpg', zoomImage:'http://brecksargent.com/slideshowpro/albums/album-16/lg/lig5_on.jpg' "> </li>
<!-- ^ here -->
<li><img class = 'cloudzoom-gallery' id="hover2" src ="http://brecksargent.com/slideshowpro/p.php?a=cX12XnxkJXl0bSczJSgwOzIDOjY5OyYzKzE8LTI%2BMiU%2BJzE%2FOicjKD8nNyM%3D&m=1383853420" alt ="Dunno weird though" data-cloudzoom = "useZoom: '.cloudzoom', image:'http://brecksargent.com/slideshowpro/albums/album-16/lg/dod_on.jpg', zoomImage:'http://brecksargent.com/slideshowpro/albums/album-16/lg/dod_on.jpg' "> </li>
<!-- ^ here -->
...till hover6 and that's it.
Let me know if that works for you and feel free to ask if the explanation wasn't clear enough ^-^
Edits:
So as per the comments, here's a few things to be done:
1) In your this anchor tag:
<div id="imgconstrain">
<a rel="gallery" class="fancybox" href="#hover0">
<img class = "cloudzoom" id="1" src =
Take out rel="gallery" (this is the reason fancybox is showing from start on click of next) and remove fancybox class and instead add open-fancybox (the reason for this is coming later)
2) All these lines:
<script type="text/javascript">
function displayCaption() {
var caption = document.getElementById('caption');
caption.innerHTML = this.alt;
}
document.getElementById('1').onclick = displayCaption;
document.getElementById('2').onclick = displayCaption;
//....
</script>
is not needed, we will do this in a smaller way
3) Like I mentioned previously, please add the ids here:
<li><img class = 'cloudzoom-gallery' id="hover1" src ="http://brecksargent.com/slideshowpro/p.php?a=eXt1NExlZT1uemwuIjItOjI6Hys4OzouNio%2BNC4iKyAiPjQjJjs%2FNCY%2BLiY0&m=1383849642" alt ="LIG Hippie Commune" data-cloudzoom = "useZoom: '.cloudzoom', image:'http://brecksargent.com/slideshowpro/albums/album-16/lg/lig5_on.jpg', zoomImage:'http://brecksargent.com/slideshowpro/albums/album-16/lg/lig5_on.jpg' "> </li>
<!-- ^ here -->
<li><img class = 'cloudzoom-gallery' id="hover2" src ="http://brecksargent.com/slideshowpro/p.php?a=cX12XnxkJXl0bSczJSgwOzIDOjY5OyYzKzE8LTI%2BMiU%2BJzE%2FOicjKD8nNyM%3D&m=1383853420" alt ="Dunno weird though" data-cloudzoom = "useZoom: '.cloudzoom', image:'http://brecksargent.com/slideshowpro/albums/album-16/lg/dod_on.jpg', zoomImage:'http://brecksargent.com/slideshowpro/albums/album-16/lg/dod_on.jpg' "> </li>
<!-- ^ here -->
and so on till the last image.
4) Now the final piece:
$('ul#carousel.elastislide-list img').on('click',function(){
//here we get the updated id (hover1, hover2 etc.)
//and pass it to the cloud-zoomed anchor tag
$new_hoverid = $('img.cloudzoom-gallery-active').attr('id');
$('#imgconstrain a').attr('href','#'+$new_hoverid);
//get the caption of the thumbnail image and set it to the
//p tag with id caption
caption_text = $(this).attr('alt');
var caption_element = document.getElementById('caption');
caption_element.innerHTML = caption_text;
});
//what this code does is, when the cloud-zoomed image is clicked,
//we get the updated href (which is what the above code does)
//and we are going to make that href get clicked so that the fancybox opens
$('#imgconstrain a.open-fancybox').on('click',function(){
$to_open = $(this).attr('href');
$('a.fancybox[href="'+$to_open+'"]').click();
});
});
You can take out this code which was in my previous answer as I have already placed it in the new one:
$(document).ready(function(){
$('#imgconstrain img').on('click',function(){
$new_hoverid = $('img.cloudzoom-gallery-active').attr('id');
$('#1').closest('a').attr('href','#'+$new_hoverid);
});
Full code pastebin
Let me know if it works for you :)

Displaying Loading... animation while loading new images into website

I have a website which will display an image statically, I have some image thumbnails below to that Preview section and when I click on the thumbnails, the big image will be displayed on the preview section, Im using jQuery here to replace the SRC of the IMG tag while click on thumbnails, so it takes some time to display the selected image on the browser, until the new image loads it is displaying the previous one there even after few seconds of click action on thumbs(Loading time into browser depends on internet connection), so I would like to display an Image saying "Loading.." while it loads into browser.
Any help would be appreciated.
I tried with onload() for img tag, but seems it is on first time load, since im just changing the SRC value alone its not working though.
Here is my code looks like
function show_preview()
{
$("#preview_loader_gif").css( "display", "block" ); //to show the loader image
$('#big_image').attr( "src", selected_file_src); //to change the source
$("#preview_loader_gif").css( "display", "none" ); //to hide the loader image
}
beforeSend: function () {
$('YOUR_SELECTOR').before('<img src="YOUR_PATH/loading.gif" class="loading">');
},
success: function(html){
$(".loading").remove();
}
if you are using ajax call.
or just add show the loading image start of the show thumb method and hide it end of the method
<div>
<img src="image.png" id="image" />
<span class="loading">Loading...</span>
$(function(){
//animate loading text
$(".loading").animate({left: '+=100'},500);
//On image loaded, remove loading text
$("#image").load(){
$(".loading").remove();
}
});

click a button to load a different video player into div

i'm working on adding a video to the home page of a site i'm working on. ideally, i'd like to show the youtube version by default, and add a button underneath that says something like "don't have access to youtube? click here to watch an alternate version".
once clicked, a different player will load into the same video div and replace the youtube version.
we have the video uploaded to youtube, and also have an html5 version on the site that is played via the video.js plugin for wordpress.
how can i load the alternate html5 video player into the div via a button click (without refreshing the page if possible)? i'm assuming this can be done via javascript / jquery / ajax somehow, but I'm not sure how to do this (my js level is novice).
thanks!!
You can clear the div out with:
$("#yourDivID").empty()
Then populate the div with new content
var newHtml = "Whatever you want!"
$("#yourDivID").append(newHtml);
Or
$("#yourDivID").html(newHtml);
Here's a very primitive example of replacing content in a Div: http://jsfiddle.net/FJuwd/
Html
<div id="myvideodiv"> </div>
In script
mybutton.click(function(){
playerMethod("myvideodiv").setup({ //here player intializations based on sepecific type
file: "/uploads/example.mp4",
height: 360,
image: "/uploads/example.jpg",
width: 640
});
})
see example here.
jQuery solution: Just create div and populate with video on button click. Many ways to do this. The check for length is only there to eliminate putting another video up.
<div id="player"><div>
<button id="clickme">Click to play video</button>
$("#clickme").on("click", function(e) {
if($('#myfileplayer').length == 0) {
var mydiv = $("#player");
var myvideo = $("<video id='myfileplayer' src='http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv' width='320' height='240' controls></video>");
mydiv.append(myvideo);
}
});
See example
thanks so much everyone for all of the help. love this place.
i was actually able to work this out more easily by just toggling divs that contain the two different videos. not sure why i didn't think of this initially. doesn't actually remove the content, just hides it, but i think it will work for me.
html
<div id="youtube">my youtube vid</div>
<div id="html5" style="display:none;">my alternate vid</div>
<input type="button" value="switch video" id="click"/>
jquery
$(function(){
$('#click').click(function(){
$('#youtube').toggle();
$('#html5').toggle();
});
});
i also tried this with the js, so the youtube video would be removed & stop playing when the divs are toggled
$(function(){
$('#click').click(function(){
$('#youtube').toggle();
$('#html5').toggle();
$('#youtube').empty();
});
});
this works, but i wasn't sure how to add the youtube video back when toggling back. not really a big deal - just something i was curious about. i'm assuming it can be done with .append.
problem with this is that both of the vids exist in the wordpress page as shortcodes, so it complicates things a bit. i just wrapped the shortdoces in divs with these ids in the wordpress page to get the toggle working, and added the js to my page template. thx again!

Categories

Resources