I have a <div> with an image slider in an <li>. There are 12 images, and it takes some time to load all of them. While the images load, I want to show a loading GIF image. How can I do this with jQuery? My code is:
<div id="banner_slider">
<ul id="portfolio">
<li>
<img src="gallery/2010/2010slider//01_quddus_helal.jpg" alt="Slider Image" border="0" /><br />
<p class="caption"> Quddus Helal :: 01st - 2010</p>
</li>
<li>
<img src="gallery/2010/2010slider//02_md_moniruzzaman.jpg" alt="Slider Image" border="0" /><br />
<p class="caption"> Md Moniruzzaman :: 02nd - 2010</p>
</li>
</ul>
</div>
You can bind a listener to the load event of each image. Use a counter or some other mechanism to keep track of how many images are loaded each time the listener is invoked. Then hide the loading indicator after the last image is loaded. For example:
HTML
<span id="loading" style="display:none">Loading...</span>
<div class="images">
<img class="large-image" src="http://astritademi.files.wordpress.com/2011/04/happy_panda.jpg" width="893" height="548" />
<img class="large-image" src="http://www.pandafix.com/pandafix/images/r3387761054.jpg" width="275" height="199" />
<img class="large-image" src="http://farm1.static.flickr.com/149/357563212_f8b89ac6d8.jpg" width="500" height="375" />
</div>
jQuery
$(function() {
var images = $('.large-image')
, total = images.length
, count = 0;
$('#loading').show();
images.load(function() {
count = count + 1;
if (count >= total) {
$('#loading').hide();
}
});
});
You can see this example in action on jsFiddle: http://jsfiddle.net/hallettj/ZefaM/
You can use the jQuery load() function. It will run the code once the image has loaded. So if you have a gif shown, once the image has loaded, it will hide it.
Javascript
$('img#id').load(function(){
$('#loadingGif').hide();
});
HTML
<div id="loadingGif">
<img src="loading.gif" />
</div>
This is what you need:
http://jqueryfordesigners.com/image-loading/
if u loading all images via AJAX then use below way
HTML
<div id="loadingDiv"><img src="loading.gif"></div>
jQuery
$('#loadingDiv')
.hide() // hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
})
;
Related
Similar to a question I asked recently but the previous was using mouse over so was rubbish for touch screen.
This is 3 divs with images. on click they individually change to a second image and reset the other 2 to a standard image. this all works ok.
But when the second image in any of the divs is active i would like to be able to click this image and navigate to a different page.
Clearly adding href to the html just navigates and ignores the JS effect.
Thanks for reading.
$(document).ready(function(){
$('#s1').click(function(){
$('#s1').attr('src', 'images/object/click-1.png');
$('#s2').attr('src', 'images/object/standard-2.jpg');
$('#s3').attr('src', 'images/object/standard-3.jpg');
});
$('#s2').click(function(){
$('#s1').attr('src', 'images/object/standard-1.jpg');
$('#s2').attr('src', 'images/object/click-2.png');
$('#s3').attr('src', 'images/object/standard-3.jpg');
});
$('#s3').click(function(){
$('#s1').attr('src', 'images/object/standard-1.jpg');
$('#s2').attr('src', 'images/object/standard-2.jpg');
$('#s3').attr('src', 'images/object/click-3.png');
});
});
<div id="section3" class="container-fluid" align="center">
<div class="row row-centered ">
<div id="top-box-1" class="col-sm-4">
<img src="images/object/standard-1.jpg" class="std" id="s1" width="300" height="300"/>
</div>
<div id="top-box-2" class="col-sm-4">
<img src="images/object/standard-2.jpg" class="std "id="s2" width="300" height="300"/>
</div>
<div id="top-box-3" class="col-sm-4">
<img src="images/object/standard-3.jpg" class="std" id="s3" width="300" height="300"/>
</div>
</div>
</div>
You can see if the src now contains 'click'. if not then swap the src and return false to stop the href:-
$('#s1').click(function(e) {
if (!$(this).is('[src*="click"]')) {
$('#s1').attr('src', 'images/object/click-1.png');
$('#s2').attr('src', 'images/object/standard-2.jpg');
$('#s3').attr('src', 'images/object/standard-3.jpg');
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="section3" class="container-fluid" align="center">
<div class="row row-centered ">
<div id="top-box-1" class="col-sm-4">
<a href="http://stackoverflow.com/">
<img src="images/object/standard-1.jpg" class="std" id="s1" width="300" height="300" />
</a>
</div>
<div id="top-box-2" class="col-sm-4">
<a href="http://stackoverflow.com/">
<img src="images/object/standard-2.jpg" class="std " id="s2" width="300" height="300" />
</a>
</div>
<div id="top-box-3" class="col-sm-4">
<a href="http://stackoverflow.com/">
<img src="images/object/standard-3.jpg" class="std" id="s3" width="300" height="300" />
</a>
</div>
</div>
</div>
To break this down: if (!$(this).is('[src*="click"]')) {
$(this).is allows you to check this against a selector, returning a boolean (true) if it does.
'[src*="click"]' is the selector to determine if the src attribute contains 'click'. Where the * means contains anywhere. There are other combinations like ^= for starts with.
Therefore $(this).is('[src*="click"]') means true if the src has 'click'. But you need to invert this to not contains. That's what the ! is for, meaning if this (the clicked element) has not got 'click' in the src.
Since you're already handling the click event, you'll likely want to perform this logic in that same event. Something structurally like this:
if (/* some condition */) {
window.location.href = someUrl;
}
I guess you'd need to define what that condition is. Would it be based on the current src of the image? Something like this?:
if ($(this).attr('src') === 'images/object/click-1.png') {
window.location.href = someUrl;
}
(You'd also have to define what someUrl is, of course.)
I have an image slider like this:
<div class="outer_wrapper_hide" id="outer_wrapperID">
<div class="inner_wrapper" id="inner_wrapperID">
<img id="slideimage1" class="slideimage" height="500" width="500" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Svg_example_square.svg/500px-Svg_example_square.svg.png" alt="Green Square">
<img id="slideimage2" class="slideimage" height="500" width="500" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/000080_Navy_Blue_Square.svg/500px-000080_Navy_Blue_Square.svg.png" alt="Blue Square">
</div>
<img width="100" height="100" class="smallimage_forslide1" id="smallimage" src="http://web.mit.edu/bzbarsky/www/testcases/css3-issues/blackSquare.png">
<p class="text1" id="text1id">This is slide 1.</p>
<p class="text2" id="text2id">This is slide 2.</p>
<p class="text3" id="text2id">This is slide 3.</p>
<img width="64" height="64" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Circle_arrow_left_font_awesome.svg/512px-Circle_arrow_left_font_awesome.svg.png" class="next" alt="Next" />
<img width="64" height="64" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Circle_arrow_right_font_awesome.svg/512px-Circle_arrow_right_font_awesome.svg.png" class="prev" alt="Previous" />
</div>
Click on the fiddle to see it in action with css and javascript: https://jsfiddle.net/9xm2c9er/2/
As you can see, all of these elements are shown:
"This is slide 1.", "This is slide 2.", "This is slide 3.", and the small, black square image.
How can I hide "This is slide 1." and the black square image when I slide to "slideimage2", and vica verca with "slideimage1" and "slideimage3"?
I've been thinking about adding some sort of if statement within the "Next" and "Previous" javascript, but how can I detect when nth slide image is slided to?
$('.next').click(function () {
$('.inner_wrapper img:first-child').fadeOut().next().fadeIn().end().appendTo('.inner_wrapper');
if($('.inner_wrapper img:eq(0)')) {
$('#text1id').show();
$('#smallimage').show();
}
else {
$('#text1id').hide();
$('#smallimage').hide();
}
});
I believe the if statement I used here doesn't work, as it prevented the slider from appearing.
I appreciate all contributions - thanks a lot!
Edit: For clarification, I would like to mention that the slider has more than 2 images, and that I have several different tag elements that I would like to hide/show; < p > (text), < a > (links), and < img > (smaller images over slides).
I have already included a basic image slider in the fiddle that you can use that work with images, and any absolute positioned elements in it. However, in my fiddle, they will be visible on all the slides.
Based on the two answers I have currently received, they both can change one type of elements for each individual slides (in these answers, the p tags), by indexing a common class. They both work in a similar manner.
However, I have yet to choose a solution, as I still need to figure out how to do this with several different elements for each slide, in terms of number and types. For example, on the first slide, I can have 2 < a > links, and 4 < p > text tags, and 1 < button >, but on the second slide, I may have a different number of elements.
Edit 2: Here is a fiddle with the solution: https://jsfiddle.net/n0z6u07p/1/. By wrapping elements in divs, you can show/hide them depending on the image slided to in the slider.
Here is the approach I use for similar problems as yours: First hide all elements, then show the only needed (selected) one.
So the code should look like this:
HTML
...
<p class="text text1" id="text1id">This is slide 1.</p>
<p class="text text2" id="text2id">This is slide 2.</p>
...
JS:
...
var iText = 0;
var aTexts = $('p.text'), nTexts = aTexts.length;
function showText(i) {
aTexts.hide().eq(i).show();
}
showText(0);
$('.next').click(function () {
...
iText = (iText + 1) % nTexts;
showText(iText);
});
$('.prev').click(function () {
...
iText = (iText - 1 + nTexts) % nTexts;
showText(iText);
});
Fiddle
I added data to your img tags :
<div class="outer_wrapper_hide" id="outer_wrapperID">
<div class="inner_wrapper" id="inner_wrapperID">
<img id="slideimage1" data-index="1" class="slideimage" height="500" width="500" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Svg_example_square.svg/500px-Svg_example_square.svg.png" alt="Green Square">
<img id="slideimage2" data-index="2" class="slideimage" height="500" width="500" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/000080_Navy_Blue_Square.svg/500px-000080_Navy_Blue_Square.svg.png" alt="Blue Square">
<img id="slideimage3" data-index="3" class="slideimage" height="500" width="500" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Red.svg/500px-Red.svg.png" alt="Red Square">
</div>
<p class="label text1" id="text1id">This is slide 1.</p>
<p class="label text2" id="text2id" style="display: none;">This is slide 2.</p>
<p class="label text3" id="text3id" style="display: none;">This is slide 3.</p>
<img width="64" height="64" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Circle_arrow_left_font_awesome.svg/512px-Circle_arrow_left_font_awesome.svg.png" class="next" alt="Next" />
<img width="64" height="64" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Circle_arrow_right_font_awesome.svg/512px-Circle_arrow_right_font_awesome.svg.png" class="prev" alt="Previous" />
And I made a function to show/hide your labels :
document.getElementById("outer_wrapperID").className = "outer_wrapper_show";
$('.inner_wrapper img:eq(0)').fadeIn(500);
$('#outer_wrapperID').fadeIn(500);
$('.inner_wrapper img:gt(0)').hide();
$('.next').click(function () {
$('.inner_wrapper img:first-child').fadeOut().next().fadeIn().end().appendTo('.inner_wrapper');
toggleLabels();
});
$('.prev').click(function () {
$('.inner_wrapper img:first-child').fadeOut();
$('.inner_wrapper img:last-child').prependTo('.inner_wrapper').fadeOut();
$('.inner_wrapper img:first-child').fadeIn();
toggleLabels();
});
var toggleLabels = function () {
$("p.label").hide();
var firstIndex = $('.inner_wrapper img:first-child').data("index");
$("p.text"+firstIndex).show();
};
My project files can be downloaded here: https://rapidshare.com/files/1601614875/projectFiles.zip [if needed:" only 2mb]
I have a webpage and a popup inside the webpage. In the popup there are two images and a heading inside a div, and I want the div when hovered to hide and show another div inside which are the same images larger and a paragraph. I have the very same functionality for the same content in the main webpage and it works perfectly, but in the popup it does not work at all.
my HTML code:
<div class="thumb-list" id="popup-thumb-list">
<div class="actor">
<div class="small-thumb-holder">
<img src="images/actor-01.jpg" width="65" height="50" />
<h3>Lucas Allen</h3>as FIRST MATE KARL-CAPTAIN CARRIBEAN
</div>
<div class="big-thumb-holder" id="big-thumb-holder">
<img src="images/029 Derek_Jeremiah_Reid-ID29597.jpg" width="150" />
<p>Derek Jeremiah Reid as Home Buyer<br>Click to see profile.</p>
</div>
</div>
<div class="actor">
<div class="small-thumb-holder">
<img src="images/actor-02.jpg" width="65" height="50" />
<h3>Lucas Allen</h3>as FIRST MATE KARL-CAPTAIN CARRIBEAN
</div>
<div class="big-thumb-holder" id="big-thumb-holder">
<img src="images/030Rachel_O_meara-ID15405.jpg" width="150" />
<p>Rachel O'Meara as Agent<br>Click to see profile.</p>
</div>
</div>
</div>
Javascript code:
$('.small-thumb-holder').mouseover(function(){
$(this).parent(".actor").css({width:150},100);
$(this).hide();
$(this).next('.big-thumb-holder').show();
});
$('.big-thumb-holder').mouseout(function(){
$(this).parent(".actor").css({width:80},100);
$(this).hide();
$('.small-thumb-holder').show();
})
My attempt which does not work:
<div class="small-thumb-holder" onmouseover="(function(){
$(this).parent(".actor").css({width:150},100);
$(this).hide();
$(this).next('.big-thumb-holder').show();
};">
<a href="" class="actor_thumb">
<img src="images/actor-01.jpg" width="65" height="50" />
</a>
<h3>Lucas Allen</h3>
as FIRST MATE KARL-CAPTAIN CARRIBEAN
</div>
<div class="big-thumb-holder" onmouseout="(function(){
$(this).parent(".actor").css({width:80},100);
$(this).hide();
$('.small-thumb-holder').show();
}">
You need to execute the jQuery code after the popup has been loaded so that the mouseover and mouseout events will bind to the divs. To do so you could wrap the jQuery lines in a function and call if after loading the popup.
I am trying to get the jQuery cycle plugin working in a CMS (hence the messy mark up) and have everything working except the paging thumbnails. Due to the CMS, I have to put the thumbnails' URLs in their corresponding image's class. Then I am trying to pull those URLs and use them for the paging buttons' images. The paging wrapper is being built, but each paging button is empty. Not sure what I am doing wrong.
I also have multiple cycle slideshows on the same page.
Here is my javascript:
(function ($) {
$('.gallery').each(function (i) {
$(this).after('<div class="galleryNav galleryNav' + i + '">').cycle({
fx: 'scrollHorz',
speed: 'fast',
timeout: 0,
pager: '.galleryNav' + i,
pagerAnchorBuilder: function (idx, slide) {
var slideImg = $(slide).attr('class');
if (slideImg == undefined){
slideImg = "";
};
return '<div></div>';
}
});
});
})(jQuery);
and here is my HTML:
<div class="row">
<article class="galleryArticle">
<div class="galleryWrap">
<div class="gallery">
<img src="image1.jpg" class="image1Thumb.jpg" alt="image1" />
<img src="image2.jpg" class="image2Thumb.jpg" alt="image1" />
<img src="image3.jpg" class="image3Thumb.jpg" alt="image1" />
<img src="image4.jpg" class="image4Thumb.jpg" alt="image1" />
</div>
</div>
<header>
<h1 class="articleTitle">Title</h1>
<h2 class="eventDate">Date</h2>
</header>
<div class="articleContent">Article Content</div>
</article>
Thanks for the help.
The class name you given to the img tag is invalid
the class name should be start with a . and followed by a name but you gave name as
image1Thumb.jpg its invalid
just use like this
in your stle sheet
.image1Thump { your styles goes here }
in your html
<img src="image1.jpg" class="image1Thumb" alt="image1" />
Then it should work.
i am using this jquery and html for change the clicked image on a display div it works fine but the issue is when i click a image in the display div its open in the page itself. How to Make the image as it as when user click on it.
<script type="text/javascript">
jQuery('div#thumbs img').click(function () {
jQuery('#foo a').prop('href', jQuery(this).prop('src'));
jQuery('#foo img').prop('src', jQuery(this).prop('src'));
return false;
})
</script>
my html
<div id="foo">
<a href="#">
<img src="images/demo_slider.jpg" name="Display" id="display" /></a>
</div>
<br />
<div id="thumbs">
<img src="images/a.jpg" width="56" height="56" alt="" />
<img src="images/b.jpg" width="56" height="56" alt="" />
<img src="images/c.jpg" width="56" height="56" alt="" />
<img src="images/d.jpg" width="56" height="56" alt="" />
</div>
</div>
edit:
If the user click the thumbs image it load to the div foo. then the user click the image in foo the clicked image opens in the same page(as the basic html functionality like open image in new tab) i need to prevent the image open on click.
You should do
$('#foo a').click(function(e){
e.preventDefault();
});
Not tested, but you could try adding preventDefault:
jQuery("#foo a").click(function(e) {
e.preventDefault();
});
Did you mean something like that...