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>
Related
I am writing an application that loads up with local html pages.
My html pages include some images as well , I want to show these images in a custom size in default (say 400px * 200px) , and displays in original size when user clicked in .
For example this is my image tag in html doc:
<img src="exclamation.png"
alt="alt"
style="width:20px;height:20px;vertical-
align:middle;padding-left:5px">
What changes I must make to achieve the approach ?
Check this solution
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<img src="https://cdn.pixabay.com/photo/2017/01/06/23/13/snow-crystals-1959292_960_720.jpg" id="abc"
alt="alt"
style="width:20px;height:20px;vertical-
align:middle;padding-left:5px" >
<script>
$("#abc").click(function(){
$("#abc").attr("style","width:200px;height:200px;vertical-"+
"align:middle;padding-left:5px");
});
</script>
Good morning peoples.
I just want to show higher resolutions images on hover of lower resolutions images. I want to make a rule or any type of function that can do this work dynamically, I mean I cannot just put on every image a hover effect and changing the src every where.
I have an idea if it would be useful,
I can put all small resolutions images in a folder called images/small, and all large images in folder called images/large, so can we just make a function that can change just change "images/SMALL" to "images/LARGE"
Any suggestion would be appreciated
Thanks in advance
There are so many plugins are available which is written in JQuery/JavaScript. I can name few of them here which I used on various projects
Cloud Zoom
JQuery HoverPluse Plugin
AJAX-Zoom
I hope this will help you. If you want you can write your own plugin too which could go in similar fashion.
The jQuery Hover Pulse plugin is pretty good, it's done what I've needed in the past and looks like it is what your looking for. Usage is simple too:
Check out this jsFiddle I made as a demo for you
1. Include the jQuery and hover pulse plugin
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://malsup.com/jquery/hoverpulse/jquery.hoverpulse.js"></script>
</head>
2. Add classes or id's to your images to use as selectors
<div id="thumbs">
<div class="thumb"><img src="http://malsup.com/jquery/hoverpulse/images/beach1.jpg" width="64" height="64" /></div>
<div class="thumb"><img src="http://malsup.com/jquery/hoverpulse/images/beach2.jpg" width="64" height="64" /></div>
<div class="thumb"><img src="http://malsup.com/jquery/hoverpulse/images/beach3.jpg" width="64" height="64" /></div>
</div>
3. Add the jQuery code at the bottom of the document just before the clossing tag.
$(document).ready(function() {
$('div.thumb img').hoverpulse({
size: 40, // number of pixels to pulse element (in each direction)
speed: 400 // speed of the animation
});
});
I have three images 1.jpg,2.jpg,3.jpg & <img id="add" src="1.jpg"></img> the width , Height & position of this image is set as required & working fine. I have applied JQUERY fade property to toggle between the above images & its also working fine.
But I want precisely that the images change in sliding fashion, i.e. 1.jpg slides left and vanishes and drags in 2.jpg in its position & so on continues in specific interval.
Hope I am clear...
Regards.
Yhank You everyone for your efforts, But , I configured it myself... Here is how it worked:
index.html:
<html>
<head>
<script src="jquery.js"></script>
<script src="slide.js"></script>
</head>
<body>
<div >
<img id="pic1" src="1.jpg"style="width:0px;height:120px;"/><img id="pic2" src="2.jpg" style="width:160px;height:120px;"/>
</div>
</body>
</html>
slide.js
$("document").ready(function(){
var img_l=$("#pic1");
var img_r=$("#pic2");
setInterval(function(){
img_l.animate({width:'160px'},1000);; //animating the image t colapse
img_r.animate({width:'0px'},1000);; //animating the image t expand
var temp_var=img_l; //swaping values to revert previous action
img_l=img_r;
img_r=temp_var;
},3000); //repeating the effect every 3 seconds
});
This is doing well with my requirements and has exactly same behaviour within all leading browsers...
Thanks.
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.
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");
}
);