Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have the following structure:
<div class="container">
<img src="images/1.png" class="image_wall_thumbnail" />
<img src="images/2.png" class="image_wall_thumbnail" />
<img src="images/3.png" class="image_wall_thumbnail" />
<img src="images/4.png" class="image_wall_thumbnail" />
<img src="images/5.png" class="image_wall_thumbnail" />
<img src="images/6.png" class="image_wall_thumbnail" />
</div>
What I want to do is use the existing images I am using in the image tags and every 2-5 seconds I want to slowly fade one image and in it's place show another image (one of the existing images in the other image tags) and I want this effect to take place randomly.
I've never done this before so not sure how to go about this? I am thinking fade in and fade out makes sense but not sure how to tackle this. Any ideas?
Okay, so like any programming task you want to break something like this down into simple steps. In this case, maybe something like this:
When the page loads, only show the first image. To do this, you should have a display:none CSS rule on all of the images EXCEPT for the first one. This can easily be accomplished by created a class called hide and applying it to the HTML. We could also manage this via JS, but that may cause bugs depending on the internet connection that your users have...
Every five seconds, fade the current image out, and fade the next one in.
If we are on the last image, make sure we go back to the first image in the list.
That's pretty much all we need to do, so let's write some code:
First, let's refactor your markup to use an id for the container and then add the CSS class to all images but the first.
<div id="img_container">
<img src="images/1.png" class="image_wall_thumbnail" />
<img src="images/2.png" class="hide image_wall_thumbnail" />
<img src="images/3.png" class="hide image_wall_thumbnail" />
<img src="images/4.png" class="hide image_wall_thumbnail" />
<img src="images/5.png" class="hide image_wall_thumbnail" />
<img src="images/6.png" class="hide image_wall_thumbnail" />
</div>
Next, let's write a little CSS:
.hide {
display:none;
}
Okay now is the "tricky" part where we write some JS:
$(function() {
//cache dom elements and set init vars
var $img = $('#img_container').find('img'),
max = $img.length, //how many images you have in the container
current = 0; //we will start the script at the first item
//Every five seconds, run the code within the handler
setInterval(function(){
$($img[current]).fadeOut('fast', function(){
determineIndex(); //Update the index of the image in the img array
$($img[current]).fadeIn();
});
}, 5000);
function determineIndex () {
current = (current === max - 1) ? 0 : (current + 1);
}
});
Now here's the demo! http://jsfiddle.net/T2nzh/
Comment if you have any questions about how the javascript works. :)
EDIT: Okay, so if you want to just randomly swap out image sources, check this out. The html you want:
<div id="img_container">
<img src="images/1.png" style="background:red" class="image_wall_thumbnail" />
<img src="images/2.png" style="background:silver" class="image_wall_thumbnail" />
<img src="images/3.png" style="background:purple" class="image_wall_thumbnail" />
<img src="images/4.png" style="background:yellow" class="image_wall_thumbnail" />
<img src="images/5.png" style="background:green" class="image_wall_thumbnail" />
<img src="images/6.png" style="background:blue" class="image_wall_thumbnail" />
</div>
<div id="img_spares" style="display:none;">
<img src="images/7.png" style="background:magenta" class="image_wall_thumbnail" />
<img src="images/8.png" style="background:brown" class="image_wall_thumbnail" />
</div>
And the JS:
$(function() {
//cache dom elements and set init vars
var $img = $('#img_container'),
$spares = $('#img_spares'),
max = $img.find('img').length,
spares_max = $spares.find('img').length;
//Every five seconds, run the code within the handler
setInterval(function(){
$($img.find('img')[randomIndex(0,max)]).fadeOut('fast', function(){
var $el = $(this),
el_source = $el.attr('style'),
$swap = $($spares.find('img')[randomIndex(0,spares_max)]),
swap_source = $swap.attr('style');
$el.attr('style', swap_source).fadeIn();
$swap.attr('style', el_source);
});
}, 1000);
function randomIndex (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
});
And the demo: http://jsfiddle.net/T2nzh/3/
take a look:
<div class="container">
<img src="images/1.png" class="image_wall_thumbnail" />
<img src="images/2.png" class="image_wall_thumbnail" />
<img src="images/3.png" class="image_wall_thumbnail" />
<img src="images/4.png" class="image_wall_thumbnail" />
<img src="images/5.png" class="image_wall_thumbnail" />
<img src="images/6.png" class="image_wall_thumbnail" />
</div>
then the jQuery:
var slide = 1;
function slideshow() {
$("#container").find("img").animate({opacity:0});
setTimeout('$("#container").find("img").hide();',400);
setTimeout('$("#container").find("[src='images/"+slide+".png']").show();',400);
setTimeout('$("#container").find("[src='images/"+slide+".png']").animate({opacity:1});',400);
slide++;
}
var slideshow = setInterval("slideshow();",3000);
also, set the opacity to 0 and display to none for all the images. This code has not beenj tested so you might have to make some minor adjustments.
Related
Good day, I'm trying to make an article content with ckeditor. Here is an example from my input.
<p>I have two images <img alt="" src="http://localhost:84/lf//assets/images/commingsoon.png" style="height:225px; width:225px" /> and this <img alt="" src="http://localhost:84/lf//assets/images/article2.jpg" style="height:91px; width:122px" /></p>
As you can see there are two images, and i want to the first image as my thumbnail. for now, i just want to extract it .
The result from extract is something like this
http://localhost:84/lf//assets/images/commingsoon.png
var myString = '<p>I have two images <img alt="" src="http://localhost:84/lf//assets/images/commingsoon.png" style="height:225px; width:225px" /> and this <img alt="" src="http://localhost:84/lf//assets/images/article2.jpg" style="height:91px; width:122px" /></p>';
var result = (someprosess)
You can use find(), first() and attr() to access the URL of the first image from your string.
var myString = '<p>I have two images <img alt="" src="http://localhost:84/lf//assets/images/commingsoon.png" style="height:225px; width:225px" /> and this <img alt="" src="http://localhost:84/lf//assets/images/article2.jpg" style="height:91px; width:122px" /></p>';
var result = $(myString).find('img').first().attr('src');
console.log(result);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can use either JavaScript or jQuery to search for the first instance of an image and parse out its src
As an example, using jQuery (if there is always going to be an image in the content)
var imgPointer = $('body').find('img');
var imgSrc = imgPointer[0].attr('src');
Here you go with a solution using jQuery
console.log($('p').find('img:first').attr('src'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>I have two images <img alt="" src="http://localhost:84/lf//assets/images/commingsoon.png" style="height:225px; width:225px" /> and this <img alt="" src="http://localhost:84/lf//assets/images/article2.jpg" style="height:91px; width:122px" /></p>
Hope this will help you.
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();
};
I am trying to run a slideshow on my website using JavaScript.
Here is my HTML:
<div id="image_slider">
<img class="active" src="images/slider/slider1.jpg" alt="My image" />
<img src="images/slider/slider1.jpg" alt="My image" />
<img src="images/slider/slider2.jpg" alt="My image" />
<img src="images/slider/slider3.jpg" alt="My image" />
<img src="images/slider/slider4.jpg" alt="My image" />
<img src="images/slider/slider5.jpg" alt="My image" />
</div>
Here is my JavaScript:
function cycleImages(){
var $active = $('#image_slider .active');
var $next = ($active.next().length > 0) ? $active.next() : $('#image_slider img:first');
$next.css('z-index',2); //move the next image up the pile
$active.fadeOut(1000,function(){ //fade out the top image
$active.css('z-index',1).show().removeClass('active'); //reset the z-index and unhide the image
$next.css('z-index',3).addClass('active'); //make the next image the top one
});
}
$(document).ready(function(){
// run every 3s
setInterval('cycleImages()', 3000);
})
The code runs well but with a glitch.
When the page loads, the first image fades off to the second image after a long time. This strange behaviour is seen again when the loop is repeated.
Why is there this lag with the first image?
I'm trying to loop through images, and if the last image has a class of .active, I start again. However, it is not working at all:
http://jsfiddle.net/tmyie/VE75U/
img.click(function () {
$(this).removeClass('active').next('img').addClass('active');
if ($('.active').is(':last-child')) {
img.first().addClass('active');
}
});
To check if the last image has the class .active you have to almost reverse it and first get the last image and then check for the class, and since the last-child isn't an image, that wont work
if ( $('.module.m-slide img:last').hasClass('.active') ) { ...
You have 2 issues in your code:
When you click on last image this code:
$(this).removeClass('active').next('img').addClass('active');
Will not add active class to anything, because .next('img') will return an empty array. So next line will not work too:
if ($('.active').is(':last-child'))
Because there is no active elements.
I believe you need to fix it in the following way:
if ($(this).is(':last-child'))
Next thing: none of your images can be a :last-child, because even your last image is not a last child! Look carefully at your html code:
<div class="module m-slide">
<img src="http://placehold.it/1200x800&text=1" alt="" />
<img src="http://placehold.it/1200x800&text=2" alt="" />
<img src="http://placehold.it/1200x800&text=3" alt="" />
<div class="m-slide-ctrl"></div>
</div>
Your last child is <div class="m-slide-ctrl"></div>
I suggest to change it in the follosing way:
<div class="module m-slide">
<div class="m-slide-ctrl"></div>
<img src="http://placehold.it/1200x800&text=1" alt="" />
<img src="http://placehold.it/1200x800&text=2" alt="" />
<img src="http://placehold.it/1200x800&text=3" alt="" />
</div>
Demo
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();
})
;