I've been working with a simple slideshow, but either I can't get the transition effects, or the images go missing on the first run when the effects work.
HTML:
<script>
$(function(){
$('.slideshow img:gt(0)').hide();
setInterval(function(){$('.slideshow img:first-child').fadeOut().next().fadeIn().end().appendTo('.slideshow');}, 3000);
});
</script>
<div class="slideshow">
<img src="img_1" width="700px" height="300px">
<img src="img_2" width="700px" height="300px">
<img src="img_3" width="700px" height="300px">
<img src="img_4" width="700px" height="300px">
</div>
CSS:
.slideshow { position:relative; width:500px; height:332px; }
.slideshow img { position:absolute; left:0; top:0; }
I'm pretty new to coding, so I'm trying to keep it as simple as possible.
You should select $('.slideshow a') as a slide instead of $('.slideshow img'). That's why the code run failed after calling next() function.
JSBin: http://jsbin.com/rofed/1/edit
//defines array of img elements
var current = $('img').length - 1;
//hide all then show the initial element
$('img').hide();
$('img').eq(current).show();
//set the interval
setInterval(function(){ $('img').eq(current).fadeOut("slow"); $('img').eq(current-1).fadeIn("slow"); if (current > 0) { current += -1; } else { current = $('img').length - 1; } }, 2000);
Try this variation of your js function (also, do make sure that you are including jquery as well)
Related
I have an HTML page with an image(wanna use as a button) and some several images that I set to be invisible by CSS visibility: hidden. I want to make when i click this 'image 'w-click.png'' another several image appear.
so, tag to some other images. In my case, I want the click 'w-click.png' to invoke a JavaScript to display the images.
i found one click one image appearing, but i want one click several images appearing....
edit : this is my code
<img src="IMAGE/w-click.png" style="z-index:200; margin-left:6680px; position:relative; width:700px; margin-top:-100px; padding:0; position:absolute; " />
<div class="invisible-livingroom">
<img src="IMAGE/w-clock.png" style="position:absolute; margin-left:1200px; filter:brightness(1.3);visibility:hidden; " />
<img src="IMAGE/w-stand.png" style="position:absolute; margin-left:1830px; margin-top:120px;filter:brightness(1.2); height:800px; z-index:5; visibility:hidden;"/>
<img src="IMAGE/w-cushion.png" style="position:absolute; margin-left:1450px; margin-top:270px; transform:rotate(2deg); visibility:hidden;"/>
<img src="IMAGE/w-light.png" style="position:absolute; margin-left:1310px; width:900px; margin-top:-130px; filter:brightness(0.95); visibility:hidden;" />
<img src="IMAGE/w-livingroom-table.png" style="position:absolute; margin-left:1310px; width:900px; margin-top:240px; filter:brightness(1.6); visibility:hidden;"/>
<img src="IMAGE/w-frame2.png" style="position:absolute; width:300px; margin-left:1500px; margin-top:120px; visibility:hidden;"/>
</div>
edit: i added this javascript code and add id="myImageId' to every images but it makes only one image appears
function showImage() {
var img = document.getElementById('myImageId');
img.style.visibility = 'visible';
}
var imagesRoot = document.getElementsByClassName("invisible-livingroom");
var images = imagesRoot[0].getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
images[i].style.visibility = "visible";
}
in jQuery it is as simple as
$(".invisible-livingroom img").css("visibility", "hidden")
Add class to all images say "hid_img"
<div class="invisible-livingroom">
<img class="hid_img" src="IMAGE/w-clock.png" style="position:absolute; margin-left:1200px; filter:brightness(1.3);visibility:hidden; " />
<img class="hid_img" src="IMAGE/w-stand.png" style="position:absolute; margin-left:1830px; margin-top:120px;filter:brightness(1.2); height:800px; z-index:5; visibility:hidden;"/>
</div>
Then you can use following script
var x = document.getElementsByClassName("hid_img");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.visibility = "visible";
}
Alternative, rather than hiding all your images, you can hide the entire div block as invisible and then display it on click.
<div id="lr" class="invisible-livingroom" style="visibility:hidden;"></div>
Then you can set its visibility as
document.getElementsById("invisible-livingroom").style.visibility = 'visible';
I will recommend you to give an id for triggering element, separating/moving from inline css to separate css file and there will be so many ways to work with javascript.
Please review this one
//declaring variables
var trigger = document.getElementById("trigger");
trigger.addEventListener('click', function(e) {
var c = document.getElementsByClassName("invisible-livingroom")[0] //only try to get first array. elements could have same class name
c.style.display = 'block';
})
/*set default none*/
.invisible-livingroom {
display: none;
}
/*for convenient only*/
img {
height: 50px;
width: 50px;
background-color:blue;
}
<img id="trigger" src="IMAGE/w-click.png" />
<div class="invisible-livingroom">
<img src="#"/>
<img src="#"/>
<img src="#"/>
<img src="#"/>
<img src="#"/>
</div>
Please visit this one:
w3schools
I have a page that has 2 functions that begin on document ready. One begins a slideshow of images fading in and out and another that slowly fades a background image in and out. I have implemented a switch that when clicked, fades in a new background image and overall background-color. I'm trying to figure out how to have this switch also stop the functions that are running on document ready (or disable them completely so the slides aren't sitting still) but also restart them when clicked again. So basically toggle the functions each time clicked. I mocked up a page that has images cycling and a button to change the image and background color (I left off the other function I mentioned to make it less complicated and more clean). Any assistance would be greatly appreciated.
I've looked into adding a global variable and then an if-statement for the functions and then have the click change that global to an invalid, then I tried looking into toggle-functions but had no luck. I'm fairly new to all of this so I apologize if my code is messy or confusing
http://jsfiddle.net/timtim123/d6xn8/2/
<body>
<img src="http://i1331.photobucket.com/albums/w600/timtim123454/background_zps3f866162.png" id="backimg" />
<div id="switch">
<img src="http://i1331.photobucket.com/albums/w600/timtim123454/darkswitch_zpsc7190818.png" width="46" height="275" border="0" />
</div>
<div class="fadein">
<img src="http://i1331.photobucket.com/albums/w600/timtim123454/slide1_zps169c4a26.png" width="394" height="630" border="0" />
<img src="http://i1331.photobucket.com/albums/w600/timtim123454/slide2_zps72fbcc61.png" width="394" height="630" border="0" />
<img src="http://i1331.photobucket.com/albums/w600/timtim123454/slide3_zpsaf2fb393.png" width="394" height="630" border="0" />
<img src="http://i1331.photobucket.com/albums/w600/timtim123454/slide4_zps9544ea88.png" width="394" height="630" border="0" />
</div>
</body>
body {
background:black;
transition:background 0.2s ease;
}
.clicked {
background:white;
}
#backimg {
position:absolute;
top: 0px;
left: 0px;
z-index: 2;
}
#backimg2 {
position:absolute;
top: 0px;
left: 0px;
z-index: 2;
}
#switch {
top: 0px;
left: 100px;
top: 300px;
height:275px;
position:absolute;
z-index: 7;
}
.fadein {
position:absolute;
width:500px;
height:630px;
top: 0px;
left: 500px;
}
.fadein img {
position:absolute;
top: 0px;
left: 500px;
}
//cycle through slides
$(document).ready(function cycle() {
timer = $('.fadein img:gt(0)').hide();
setInterval(function () {
$('.fadein :first-child').fadeOut(2000)
.next('img').fadeIn(2000)
.end().appendTo('.fadein');
}, 2000);
//switch functionality
$(document).ready(function () {
$("#switch").click(function () {
var src = $("#backimg").attr("src");
$("body").delay(2000).queue(function () {
$("body").toggleClass("clicked");
$("body").dequeue();
});
if (src == "http://i1331.photobucket.com/albums/w600/timtim123454/background_zps3f866162.png") {
$("#backimg").fadeOut(2000, (function () {
$("#backimg").fadeIn(2000).attr("src", "http://i1331.photobucket.com/albums/w600/timtim123454/background2_zps36c1126d.png");
}));
} else if (src == "http://i1331.photobucket.com/albums/w600/timtim123454/background2_zps36c1126d.png") {
$("#backimg").fadeOut(500, (function () {
$("#backimg").delay(5000).fadeIn(5000).attr("src", "http://i1331.photobucket.com/albums/w600/timtim123454/background_zps3f866162.png");
}));
}
});
});
});
1) Try doing it using clearInterval as in the example shown at the top of this page http://www.w3schools.com/jsref/met_win_clearinterval.asp. This will stop the setInterval function.
2) To hide your slideshow / image you will need to use jQuery hide. Stopping a function will not change elements in the DOM.
3) Here is an elaboration on the code in the link I sent you, that includes stop and start functionality.
<!DOCTYPE html>
<html>
<body>
<p>A script on this page starts this clock:</p>
<p id="demo"></p>
<button onclick="myStopFunction()">Stop time</button>
<button onclick="myStartFunction()">Stop time</button>
<script>
var myVar = setInterval(function(){myTimer()},1000);
function myTimer()
{
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function myStopFunction()
{
clearInterval(myVar);
}
function myStartFunction()
{
myVar = setInterval(function(){myTimer()},1000);
}
</script>
</body>
</html>
Let me know if you need further information.
FYI - you don't need 2 '$(document).ready' Just put the code of the 2nd one under the code of the 1st one.
Hi i am trying to make a slideshow for my webpage but i can't make it work. It is my first time using jQuery and im not so good at js either. Can someone see what i have done wrong?
Here are my html, css and js codes.
HTML
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="matsidacss.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jul.js"></script>
<title>Erik'p kokbok</title>
</head>
<body class="jul" onload="slider();">
<div class="slider">
<img id="1" src="Bilder/food1.jpg" border="0" alt="food1"></img>
<img id="2" src="Bilder/food2.jpg" border="0" alt="food2"></img>
<img id="3" src="Bilder/food3.jpg" border="0" alt="food3"></img>
</div>
CSS
.slider
{
position:absolute;
height: 205px;
width: 230px;
left: 50%;
top:10px;
margin-left:510px;
overflow:hidden;
}
.slider img
{
width:230px;
height:205px;
}
Javascript
$(document).ready(function()
{
$('#1').show("fade",2000);
$('#2').delay(500).hide("slide", {direction:"left"}, 500);
var sc=$(".slider img").size();
var count=2;
setInterval(function(){
$("#1"+count).show("slide", {direction:"right"}, 500);
$("#2"+count).delay(500).hide("slide", {direction:"left"}, 500);
if(count == sc){
count=1;
}else{
count=count+1;
}
}, 6500);
})
Thanks for helping//Anton
I explain you, I would change all the images' css but the first with display:none because '.hide' and '.show' changes the display, so you can't show something that is already showed.
So I will give you an example here JFiddle of how a Slider could work:
HTML
<div id="slider">
<img src="http://avatar.hq-picture.com/avatars/img27/say_cheese_avatar_picture_52454.jpg" id="image1"></img>
<img src="http://www.animated-gifs.eu/avatars-100x100-dogs/0038.gif" id="image2"></img>
<img src="http://fc08.deviantart.net/fs39/f/2008/330/0/2/Lfg_avatar_100x100_by_Shadowfang3000.gif" id="image3"></img>
</div>
CSS
img {
position: absolute;
display: none;
}
#image1 {
display: inline;
}
Javascript
var cont = 1;
setInterval(function () { //Make an action repeat each 1000 ms
$("#image" + cont).hide("slide", {direction: "right"}, 500); //Go out
if (cont == 3) { //To repeat the complete cycle
cont = 1;
} else {
cont++;
}
$("#image" + cont).show("slide", {direction: "left"}, 500); //Go in
}, 1000); //The 1000 ms
It is very commented and I think that it should be useful for you.
There is another way to do it, selecting all image elements or all the elements with the class "imageSlider", but it is way more complicated to understand compared with the way that I have showed you.
I hope it will useful to you.
Patch
PS: try to don't name your id with just a numbers.
PS2: the images aren't mine, I took it from google images.
Anton,
Not sure what your requirements are for the slideshow, but maybe you could use Twitter Bootstrap's slideshow.
http://twitter.github.io/bootstrap/javascript.html#carousel
It's effortless to get it up. Hope this helps.
Josh
Ive put together a jsfiddle for you : http://jsfiddle.net/XexmW/
There are a few issues with your markup/css/js.
img tags dont need to have a close tag - im not sure it will be understood by all browsers. Use <img src="" /> instead.
you still have an onload function call in your html
"#1"+count wont sum 1 and count, then append it to #. if count = 1 then it would give you '#11'
when i was playing around, i could only get the images to butt up against each other nicely if they have position:absolute
Here are my alterations:
html
<div class="slider">
<img id="1" src="http://i.telegraph.co.uk/multimedia/archive/02422/burger_2422297b.jpg" border="0" alt="food1" />
<img id="2" src="http://i.telegraph.co.uk/multimedia/archive/02443/shoppingbasket_2443279b.jpg" border="0" alt="food2" />
<img id="3" src="http://o-food.co.uk/wp-content/uploads/O-food-photos-overview-161.jpg" border="0" alt="food3" />
</div>
css
.slider
{
overflow:hidden;
}
.slider img
{
position:absolute;
width:230px;
height:205px;
display:none;
left:0;
top:0;
}
Javascript
$(document).ready(function()
{
$('#1').show();
var sc=$(".slider img").size();
var count=1;
var lastCount = 0;
setInterval(function(){
lastCount = count;
if(count == sc){
count=1;
}else{
count++;
}
$("#"+count).show("slide", {direction:"right"}, 500);
$("#"+lastCount).hide("slide", {direction:"left"}, 500);
}, 1000);
})
Having said all that - if you can use an existing library or jQuery plugin, its likely to be more stable and x-browser compatible.
So I have this very simple (and probably not built the recommended way) image slider at my wordpress page that I built myself. My problem is that when the images run out, it will just slide whitespace, and so on. I want it to start sliding from the beginning, or just stop sliding at the last image. Here's my code:
HTML:
<div id="gallery-wrap">
<div id="gallery">
<img class="galleryimage" src="http://materiaalit.kotisivut.name/sivustokuvat/ccc.PNG" alt="" />
<img class="galleryimage2" src="http://materiaalit.kotisivut.name/sivustokuvat/coverline.PNG" alt="" />
<img class="galleryimage3" src="http://materiaalit.kotisivut.name/sivustokuvat/ccc.PNG" alt="" />
<img class="galleryimage4" src="http://materiaalit.kotisivut.name/sivustokuvat/coverline.PNG" alt="" />
</div>
<div id="gallery-controls">
<a id="gallery-prev" href="#"><img alt="" /> </a>
<a id="gallery-next" href="#"><img alt="" /></a></div>
</div>
</div>
CSS:
#gallery-wrap{margin: 0 auto; overflow: hidden; width: 100%; position: relative; height:300px; border:1px solid black; border-radius:6px; z-index:3;}
#gallery{position: relative; left: 0; top: 0; width:100%;}
.galleryimage{position:absolute; width:100%; height:300px; top:0px;}
.galleryimage2{position:absolute; width:100%; height:300px; left:100%;top:0px;}
.galleryimage3{position:absolute; width:100%; height:300px; left:200%;top:0px;}
.galleryimage4{position:absolute; width:100%; height:300px; left:300%;top:0px;}
#gallery-controls{width: 100%; z-index:4;}
#gallery-prev{position:absolute; left:0px; top:0px; width:50%; height:300px; }
#gallery-next{position:absolute; right:0px; top:0px; width:50%; height:300px;}
And the js/jquery
var position = 1; // you always start at the first image?
$(document).ready(function()
{
$("#gallery-prev").click(function(){
var nr_of_img = $('img', $('#gallery')).length;
if (position == 1)
{
// move all the way to the last image
position = nr_of_img;
}
else
{$("#gallery").animate({"left": "+=100%"}, "slow");
// move to the previous image
position--;
}
});
$("#gallery-next").click(function(){
var nr_of_img = $('img', $('#gallery')).length;
if (position == nr_of_img)
{
// move all the way to the first image
position = 1;
}
else
{$("#gallery").animate({"left": "-=100%"}, "slow");
// move to the previous image
position++;
}
});
});
So as you can probably see, I'm thinking what to put in the variables. How does the script know when the images run out? And as you can see, the images are absolutely positioned, that was the easiest way to get them all to the same horizontal line.
If anyone wants to see this in action:
http://wordpress.kotisivut.name/
Why don't you count the amount of images in your slider...
var nr_of_img = $('img', $('#gallery')).length;
Then you can keep count of the number of moves you make from left to right etc and see if you ran out of images.
[Edit]
first of all your if-statements are at the wrong place. You want to do the if-statements in the event functions.
This would mean you would do something like this
var position = 1; // you always start at the first image?
$(document).ready(function()
{
$("#gallery-prev").click(function(){
var nr_of_img = $('img', $('#gallery')).length;
if (position == 1)
{
// move all the way to the last image
position = nr_of_img;
}
else
{
// move to the previous image
position--;
}
});
$("#gallery-next").click(function(){
var nr_of_img = $('img', $('#gallery')).length;
if (position == nr_of_img)
{
// move all the way to the first image
position = 1;
}
else
{
// move to the previous image
position++;
}
});
});
You can read this Count number of files in a folder through javascript
With PHP you can have the filecount as
$directory = "../images/team/harry/";
if (glob($directory . "*.jpg") != false)
{
$filecount = count(glob($directory . "*.jpg"));
echo $filecount;
}
else
{
echo 0;
}
I have 3 images that I want to rotate when a button is clicked.
image1, image2, image3.
If the image is at image1, then when clicked it should show image2 (and so on, in order of image1, .., image3).
When I am at image3, it should then hide the image, i.e. don't display it.
I need some help with the javascript function to do this, I already have the code for the button click event.
I am passing the toggle() function the jquery object $('myImageID');
$(document).ready(
function()
{
$('#button1').click( function() { toggleSector( $('#sector1') ) } ;
}
);
function toggleSector(o)
{
// help!
}
<div id="sector1"></div>
<input type="button" id="button1" value="Sector 1" />
Update
I have to somehow find the name of the current background image set to the
<div> where my image is.
Is there a background property to get the image name currently being displayed?
You can get a background-image by accessing it from the .css(name) method:
$("#sector1").css("background-image");
Without managing your list of images in an array or some other fashion, you're going to have to check each background-image to know when it's time to hide your element. This isn't a great way of working, as it doesn't allow you to easily add a new image in the future if you like.
Perhaps something like the following:
function toggle(el) {
var whenToHide = "background3.jpg";
var currBackground = $(el).css("background-image");
/* ...code... */
if (currBackground == whenToHide) {
$(el).remove();
}
}
Do you have to use the background image?
If not, here's a little code sample for what I would do.
<html>
<head>
<style type="text/css">
#imageRotater { list-style-type:none; }
#imageRotater, .imageRotater li { margin:0px auto; padding: 0px; }
#imageRotater img { display:none; }
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
(function($) {
$.fn.rotate = function() {
return this.each(function() {
var list = $(this).is('ul') ? $(this) : $('ul', this);
list.find('img:eq(0)').show();
$('img', list).click(function() {
$(this).hide().closest('li').next().find('img').show();
});
});
};
})(jQuery);
$(document).ready(function() {
$("#imageRotater").rotate();
});
</script>
</head>
<body>
<div id="sector1">
<ul id="imageRotater">
<li><img src="image1.png" alt="" /></li>
<li><img src="image2.png" alt="" /></li>
<li><img src="image3.png" alt="" /></li>
</ul>
</div>
</body>
</html>
Here's a thing that works.
Each overlay is initially hidden with CSS. Each time your button is clicked, all the overlays are hidden, then one is revealed based on some data stored on the button. If the data reaches the max number overlays + 1, none are shown and the data is reset to 0.
Markup
<div id="container" style="background: yellow">
<div class="overlay" style="background: red"></div>
<div class="overlay" style="background: green"></div>
<div class="overlay" style="background: blue"></div>
</div>
Style
div{
width: 100px;
height: 100px;
}
.overlay{
position: absolute;
top: 0;
left: 0;
display: none;
}
#container{
position: relative;
}
Script
$(function() {
var b = $('#button1');
b.data('next', 0);
b.data('max', $('.overlay').size()+1 );
b.click( function( e ) {
var next = $(this).data('next');
var o = $('.overlay');
o.hide();
o.eq(next).show();
next = (next+1) % $(this).data('max');
$(this).data('next', next);
});
});
In response to Bendeway's answer above, you'll need to insert before
list.find('img:eq(0)').show();
the following line:
list.find('img').hide();
This will hide all the images before it starts rotating through them.