I am using masonry to layout my images and foundation interchange to load a different sized image depending on screen size. (small, medium, large) My problem is that since the images are loaded through JavaScript using the imagesLoaded plugin does not seem to work. I also tried using setTimeout(), but then masonry did not work at all. So does anyone know a way to check if images are done loading through javascript or to make sure that masonry is the absolute last script to run?
example masonry item that I am using
<li class="image masonry-item"><img data-interchange="[ {{small/thumb}}, (small)], [ {{medium/thumb}}, (default)], [ {{large/thumb}}, (large)]" ></li>
scripts at bottom of page
<script src="jquery.js"></script>
<script src="foundation.min.js"></script>
<script src="foundation.interchange.js"></script>
<script src="imagesloaded.pkgd.min.js"></script>
<script src="masonry.pkgd.js"></script>
<script> $(document).foundation(); </script>
<script>
var container = document.querySelector('#container');
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
msnry = new Masonry( container, {
columnWidth : container.querySelector('.masonry-size'),
itemSelector:'.masonry-item'} );
});
</script>
I'd like to correct my answer above with a more straight-forward approach.
I used the Interchange events to trigger a callback function that inits the Masonry grid. This works well and has given me no problems.
Here is the event as listed in the docs:
$(document).on('replace', 'img', function (e, new_path, original_path) {console.log(e.currentTarget, new_path, original_path);});
So just create a function to init the masonry grid, and call it from within the code above.
You can use Interchange to load partials into your page.
So, for small screen, load a partial with small images, plus the masonry, and its supporting code. That way, your images won't be loaded via js, and imagesloaded should be able to see them.
In your page:
<div data-interchange="[../small-image-gallery.html, (small)], [large-image-gallery.html, (large)]"></div>
The Partial (not exact code):
<img class="masonry-item" src="some-image-[small, large].jpg">
<img class="masonry-item" src="some-image-[small, large].jpg">
<img class="masonry-item" src="some-image-[small, large].jpg">
<img class="masonry-item" src="some-image-[small, large].jpg">
<script src="imagesloaded.js"></script>
<script src="masonry.js"></script>
Etc.
Related
I have coded a small Three.js animation that I put i following way in my HTML page :
<div id="mainWindow" class="popup_block">
<!-- Javascript for simulation -->
<script src="../temp/webgl-debug.js"></script>
<script src="../temp/three.min.js"></script>
<script src="../temp/Detector.js"></script>
<script src="../temp/TrackballControls.js"></script>
<script src="../temp/OrbitControls.js"></script>
<script src="../temp/dat.gui.js"></script>
<script src="./main_simulation.js"></script>
<br>
This is a test : I want to put text below the "div id="mainWindow", not above like here :<br>
How could I do that ???
</div>
where I handle the Three.js scene of "mainWindow" in main_simulation.js
Unfortunately, I can't get to put after </div> some text or other HTML elements : they are systematically put above the <div id="mainWindow">... </div> block
You can see this issue on the following link :
Can't put text below Three.js
Maybe this problem comes from the fact that I am loading JS scripts at the bottom of HTML page but I am not sure.
If I load JS scripts in <head> section, I can't make appear the Three.js scene.
Could anyone give me a trick to put text after the main div of Three.js ?
Regards
UPDATE 1 :
I have also tried with :
<div id="mainWindow" class="popup_block"></div>
<!-- Javascript for simulation -->
<script src="../temp/webgl-debug.js"></script>
<script src="../temp/three.min.js"></script>
<script src="../temp/Detector.js"></script>
<script src="../temp/TrackballControls.js"></script>
<script src="../temp/OrbitControls.js"></script>
<script src="../temp/dat.gui.js"></script>
<script src="./main_simulation.js"></script>
<br>
This is a test : I want to put text below the "div id="mainWindow", not above like here :<br>
How could I do that ???
But the problem is still present
UPDATE 2 :
Here's an illustration of my issue :
In HTML source, the text is located below the three.js div, but the rendering makes put it above.
UPDATE 3 :
First of all, its not really a matter of three.js, but there is still an important issue to address.
Whatever functions You have, either plain image positioning, or three.js placing the renderer in a div, It's easy to lose track of what is appended where.
It can happen when the html skeleton is being rather scarce, for most of the page is created in js. It's a bit unclear to anyone but the original developer, so he needs to keep track of what is going on. Imo this is a bit impractical.
I wouldn't create elements in the body in js, I'd rather append them to existing wrapper containers, so I could easily manage them with any css:
<div id="mainWindow"></div>
<div id="image"></div>
<div id="below"></div>
if You switch the target div from the body, to #image, You can rearrange them however You like, without making any changes in the js code, which could cause a chain of unpredicted behaviour.
Now the desired arrangement could be made using the position:relative; css property.
I want to use the responsive image slider 'bxslider' (bxslider.com) on my site. Unfortunately the slider's images often don't appear on the page and only the controls are visible. However as soon as I refresh the page, the slider's images reappear.
I've looked at similar questions asked here, but he suggestions given - such as "only use jQuery 1.x" - don't seem to work for me.
Would be great if someone had another suggestion! The actual URL is: http://www.lauraniebel.com/casestudy01.htm and http://www.lauraniebel.com/casestudy02.htm And here's my code:
<script src="js/modernizr-2.8.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<div class="bxslider3">
<img src="img/cvnewsletters01.jpg" alt="Curtin Volunteers Newsletters">
<img src="img/cvnewsletters02.jpg" alt="Curtin Volunteers Newsletters">
</div>
<div class="bxslider">
<img src="img/cvinfographic01.jpg" alt="Curtin Volunteers Infographic">
<img src="img/cvinfographic02.jpg" alt="Curtin Volunteers Infographic Closeup">
</div>
<div class="bxslider2">
<img src="img/cvposters01.jpg" alt="Curtin Volunteers Posters">
<img src="img/cvposters02.jpg" alt="Curtin Volunteers Posters">
</div>
<script>
$( document ).ready(function(){
$('.bxslider').bxSlider();
});
$( document ).ready(function(){
$('.bxslider2').bxSlider();
});
$( document ).ready(function(){
$('.bxslider3').bxSlider();
});
</script>
Wrap your images inside of a container, and give that container an explicit width and height.
Or set bxslider to load after the images have loaded, possibly using image onload
As it stands, bxslider is initializing before the images have had time to load, calculating 0 width and height for them, thus giving them no appearance.
jsfiddle
I've wrapped your images in a <div class="container"></div>, given that explicit width/height. The issue is inline elements (the images) calculating width/height based on their contents (the images that haven't loaded) and bxslider uses the 0 width/height to initialize itself.
Typical jQuery problem.
JavaScript is all like "You images done yet or what?"
Found this little plugin...
It detects when all the images have been properly rendered before the scr
Github link
CDN:
<script src="https://unpkg.com/imagesloaded#4.1/imagesloaded.pkgd.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/imagesloaded#4.1/imagesloaded.pkgd.js"></script>
I keep getting the error when trying to reload a page:
jquery-cycle2.js?v=3.0.43&t=1481602536:608 [cycle2] slideshow must be initialized before sending commands; "goto" ignored
As the error states, you are trying to issue the goto command for an element that has not yet been initialized to be a cycle2 slideshow.
If this is your element:
<div id="slideshow">
<img src="http://malsup.github.io/images/p1.jpg">
<img src="http://malsup.github.io/images/p2.jpg">
<img src="http://malsup.github.io/images/p3.jpg">
<img src="http://malsup.github.io/images/p4.jpg">
</div>
And you are trying to execute this:
$(function() {
$('#slideshow').cycle('goto', 2);
});
jsfiddle
You will get the error because you have not initialized the #slideshow element to be a cycle2 slideshow.
You can fix that by either having it auto-initialized by including the cycle-slideshow class on the element:
<div id="slideshow" class="cycle-slideshow">
jsfiddle
Or by programmatically initializing it:
$(function() {
$('#slideshow').cycle(); // Initialize the element to be a slideshow.
$('#slideshow').cycle('goto', 2);
});
jsfiddle
When asking a question like this, you really should include the relevant HTML and JavaScript that you have written. It is also helpful to include a link to the JQuery plugin you are using: Cycle2.
I have an image that I am using in a preloader. I want this image to be loaded before the other contents are loaded
<div class="overlay" id="mainoverlay">
<div class="preloader" id="preloader">
<img src="images/logo128.png" id="logo-preload"/>
</div>
</div>
I want this image to be loaded before the rest of the content. In a way I want this image to load the way the browser would load a js file: block page rendering until the script is loaded. Is there any way of doing this
Consider David's imagesLoaded script, which has its use cases listed in its README.
Based on that assumption, I think you are looking for something similar to this:
$('#preloader').hide();
var imgLoad = imagesLoaded('#preloader');
imgLoad.on( 'always', function() {
$('#preloader').show();
});
alright so i have some unique problems; first of all, my jquery is not working; i very well might have not put it in the html right so i am going to toss a good deal of code out to see;
basically i need the rollover class image to change to its hover state when the div class is rolled-over (i have a some css which changes the div class display to block) alright so here is the html
<div id="header">
<div class="home" id="home" ><p><img src="images/home-crown.png" class="rollover" width="100px" /></p></div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></script>
<script type="text/javascript" src="js/load-it-up.js"></script>
/so yeah... trying to swap that image stuff out here is jquery
$(document).ready(function(){
$("img.rollover").hover(
function()
{this.src = this.src.replace("images/home-crown.png","images/home-crown-hover.png");},
function()
{this.src = this.src.replace("images/home-crown-hover.png","images/home-crown.png");}
);
});
really frustrated with it because i have tried multiple solutions; any help at all would be appreciated; it is probably something stupid :P
right now i am just trying to get the image to rollover (at least)
i really want the rollover to activate when the div is rolled over (the #home div)
Try this.
$("img.rollover").hover(
function(){
$(this).attr("src","images/home-crown-hover.png");
},
function(){
$(this).attr("src","images/home-crown.png");
}
);