Simple gallery loading all pictures when opened for a first time - javascript

I am a beginer trying to make a gallery for my site, but I am failing somewhere. What I am trying to do is create a page with menu on the top and then under it boxes of small pictures. When you click on one of them, the picture should be loaded under those boxes. So far I have my menu done, and I have the boxes with the pictures, but the problem is that when you first load the page all of the pictures in the small boxes are loaded under and when you click on any boxes - they disapear and only the selected picture is loaded, as it should be. So my problem is that I can't make the page not load all those pictures when loaded for a first time. I don't mind if it just loads one of them, but not all. I've been trying to fix it for 3 days now, but no luck, so I have no choice, but to ask you for help.
Here's the HTML:
<!DOCTYPE HTML>
<HEAD>
<LINK href="Menu/Menu.css" rel="stylesheet" type="text/css" />
<LINK href="Pictures/Background.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="Style/style.css"/>
<script type="text/javascript" src="JavaScript/Script.js"></script>
</HEAD>
<BODY>
<nav class="nav">
<ul>
<li class="current"><b>MENU</b></li>
<li>BLOG</li>
<li>MUSIC</li>
<li>PHOTOGRAPHY</li>
<li>QUOTES & THOUGHTS</li>
<li>ABOUT ME</li>
</ul>
</nav>
<div id="gallery">
<div id="thumbs">
<img src="Pictures/Photography/image1.jpg" alt="" />
<img src="Pictures/Photography/image2.jpg" alt="" />
<img src="Pictures/Photography/image3.jpg" alt="" />
<img src="Pictures/Photography/image4.jpg" alt="" />
<img src="Pictures/Photography/image5.jpg" alt="" />
</div>
<CENTER>
<div id="bigimages">
<div id="normal1">
<img src="Pictures/Photography/bigimage1.jpg" alt=""/>
</div>
<div id="normal2">
<img src="Pictures/Photography/bigimage2.jpg" alt=""/>
</div>
<div id="normal3">
<img src="Pictures/Photography/bigimage3.jpg" alt=""/>
</div>
<div id="normal4">
<img src="Pictures/Photography/bigimage4.jpg" alt=""/>
</div>
<div id="normal5">
<img src="Pictures/Photography/bigimage5.jpg" alt=""/>
</div>
</div>
</div>
</BODY>
</HTML>
Here's the CSS:
html{
background:url(BACKGROUND.jpg) no-repeat center center;
min-height:100%;
background-size:cover;
}
img {
border: none;
}
#gallery {
margin: 0 auto;
width: 100%;
}
#thumbs {
margin: 10px auto 10px auto;
width: 100%;
}
#bigimages {
width: 100%;
float: left;
}
#thumbs img {
width: 50px;
height: 50px;
}
#bigimages img {
border: 4px solid #555;
margin-top: 5px;
height: 500px;
}
#thumbs a:link, #thumbs a:visited {
width: 50px;
height: 50px;
border: 6px solid #555;
margin: 6px;
float: left;
}
#thumbs a:hover {
border: 6px solid #888;
}
And finally here's my simple JavaScript:
function changeImage(current) {
var imagesNumber = 5;
for (i=1; i<=imagesNumber; i++) {
if (i == current) {
document.getElementById("normal" + current).style.display = "block";
} else {
document.getElementById("normal" + i).style.display = "none";
}
}
}

You could simply hide them via CSS.
#bigimages > div:not(:first-child) { display: none; }
This should display only the first big image.
Could be easier yet if you added a class to the image wrappers. Assuming the class could be big-image-wrap, the css would be:
#bigimages > div.big-image-wrap { display: none; }
#bigimages > div.big-image-wrap:first-child { display: block; }

You can hide those images on load event. Like this:
window.onload = function(){
var thumbs = document.getElementById('thumbs');
var images = thumbs.getElementsByTagName('img');
for (i = 0; i < images.length;i++ ) {
images[i].style.display = "none";
}
}

Related

How do I change the background of a button when clicked?

Okay, okay. I know many people have asked this question on Stack Overflow, but the solutions don't work for me. So my problem is simple: how do I make the female-av-button and male-av-button have a background URL of female-avatar & male-avatar respectively? Here's my code:
body{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: black;
}
.avatars{
justify-content: center;
margin-left: 15%;
display: flex;
}
.choose-a-user-text{
font-family: 'Luckiest Guy';
font-size: 400%;
justify-content: center;
}
.choose-a-username{
margin-left: 25%;
}
.user-input{
margin-left: 29%;
}
.user-input:focus{
outline: none;
}
.female-av-button{
background: none;
border: none;
padding: 1px;
}
.female-av-button:focus{
}
.male-av-button{
background: none;
border: none;
padding: 1px;
}
.female-av{
background: url('../img/female-avatar-silhouette.png') no-repeat;
width: 500px;
height: 700px;
}
.female-av:hover{
background: url('../img/female-avatar.png') no-repeat;
width: 500px;
height: 700px;
}
.male-av{
background: url("../img/male-avatar-silhouette.png") no-repeat;
width: 500px;
height: 700px;
}
.male-av:hover{
background: url("../img/male-avatar.png") no-repeat;
width: 500px;
height: 700px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Choose Your Character</title>
<link rel="stylesheet" href="css/avatar-page.css">
<link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap" rel="stylesheet">
</head>
<body>
<div class="choose-a-username">
<h2 class="choose-a-user-text" style="color: #018D94;">CHOOSE A USERNAME</h2>
<input class="user-input" type="text" name="" value="" placeholder="username">
</div>
<div class="avatars">
<button type="button" onclick="chooseanav()" class="female-av-button" name="button"><div class="female-av"></div></button>
<button type="button" class="male-av-button" name="button"><div class="male-av"></div></button>
</div>
<!-- <div class="avatars">
<div class="silhos">
<img src="img/male-avatar-silhouette.png" class="avatar-silho" alt="male avatar silho">
<img src="img/female-avatar-silhouette.png" class="avatar-silho" alt="female avatar silho">
</div>
<div class="avas">
<img src="img/male-avatar.png" class="avatar" alt="male avatar">
<img src="img/female-avatar.png" class="avatar" alt="female avatar">
</div>
</div> -->
<script type="text/javascript">
// document.getElementsByClassName("user-input").style.height="500px";
function chooseanav() {
document.getElementsByClassName('female-av').style.background = "url('../img/female-avatar.png') no-repeat";
}
</script>
</body>
</html>
Any help is greatly appreciated.
Thanks!
Change your code to be;
document.getElementsByClassName('female-av')[0].style.background = "url('../img/female-avatar.png') no-repeat";
Oddly, unlike .getElementById() when you use .getElementsByClassName() you need to index the object. I think this is because IDs are unique where classes can be many.
The clue is in the getElement vs getElements.
EDIT: to answer your comment regarding clicking outside it etc you will have to change up your code a bit. Check my snippet below and let me know if anything doesn't make sense!
body{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: black;
}
.avatars{
justify-content: center;
margin-left: 15%;
display: flex;
}
.choose-a-user-text{
font-family: 'Luckiest Guy';
font-size: 400%;
justify-content: center;
}
.choose-a-username{
margin-left: 25%;
}
.user-input{
margin-left: 29%;
}
.user-input:focus{
outline: none;
}
.female-av-button{
background: none;
border: none;
padding: 1px;
}
.female-av-button:focus{
}
.male-av-button{
background: none;
border: none;
padding: 1px;
}
.female-av{
background: url('../img/female-avatar-silhouette.png') no-repeat;
width: 500px;
height: 700px;
}
.female-av:hover{
background: url('../img/female-avatar.png') no-repeat;
width: 500px;
height: 700px;
}
.male-av{
background: url("../img/male-avatar-silhouette.png") no-repeat;
width: 500px;
height: 700px;
}
.male-av:hover{
background: url("../img/male-avatar.png") no-repeat;
width: 500px;
height: 700px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Choose Your Character</title>
<link rel="stylesheet" href="css/avatar-page.css">
<link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap" rel="stylesheet">
</head>
<body>
<div class="choose-a-username">
<h2 class="choose-a-user-text" style="color: #018D94;">CHOOSE A USERNAME</h2>
<input class="user-input" type="text" name="" value="" placeholder="username">
</div>
<div class="avatars">
<button type="button" class="female-av-button" name="button"><div class="female-av"></div></button>
<button type="button" class="male-av-button" name="button"><div class="male-av"></div></button>
</div>
<!-- <div class="avatars">
<div class="silhos">
<img src="img/male-avatar-silhouette.png" class="avatar-silho" alt="male avatar silho">
<img src="img/female-avatar-silhouette.png" class="avatar-silho" alt="female avatar silho">
</div>
<div class="avas">
<img src="img/male-avatar.png" class="avatar" alt="male avatar">
<img src="img/female-avatar.png" class="avatar" alt="female avatar">
</div>
</div> -->
<script type="text/javascript">
var femaleAV = document.getElementsByClassName('female-av')[0];
var maleAV = document.getElementsByClassName('male-av')[0];
document.addEventListener('click', function(e) {
if (e.target.className == 'female-av') {
femaleAV.style.background = "url('../img/female-avatar.png') no-repeat";
maleAV.style.background = "";
} else if (e.target.className == 'male-av') {
femaleAV.style.background = "";
maleAV.style.background = "url('../img/male-avatar.png') no-repeat";
} else {
femaleAV.style.background = "";
maleAV.style.background = "";
}
});
</script>
</body>
</html>
Basically, I have removed your onclick="" event from the female-av and have put an overall listener in the <script>. From here I have set 2 variables (Female & Male) and then an if-statement to check what is being clicked. Depending on what is being clicked it will either set/unset the female or male background respectively and if neither of the two are clicked it resets both.
There is a downside to this though, should the user click ANYWHERE else it means it will reset the selection. Example, if you select your MALE or FEMALE and then click to change your username you will see it deselects/resets.
To fix this, you can narrow the function like so;
document.querySelector('.avatars').addEventListener('click', function(e) {...})
That way it only listens to clicks inside the .avatars box.
I hope it's clear! If not, let me know and I'll try explain further!
You don`t have to use javascript to change it. You can use :focus directly in css.
.male-av:focus{
background: url("../img/male-avatar.png") no-repeat;
width: 500px;
height: 700px;
}
.female-av:focus{
background: url('../img/female-avatar.png') no-repeat;
width: 500px;
height: 700px;
}
So this way when the button is clicked you can keep the image or change the background color.But it returns to normal when clicked outside of the button.
This will make any element that has class female-av change its background on click
let fa = document.getElementsByClassName("female-av-button");
for(let i = 0;i<fa.length;i++){
fa[i].addEventListener('click',function(){
this.style.background="url('../img/female-avatar.png') no-repeat";
});
}
if you want only one specific element to have this behavior give it an id and use
document.getElementById("elementID").addEventListener('click',function(){this.style.background="black";});
Maybe have the image contained in the button itself and not the CSS.
Then have a JavaScript function that changes the image.
Or (the easier option) have a JS function that toggles the class containing the new image and the one with the old image (with the old image class already in there).
Say...
<html>
<style>
/* add this to <style> the css (exept the image links) */
.confirm {
background: url('https://live.staticflickr.com/7057/7119974123_291cac34b7_b.jpg') no-repeat;
}
.unclicked {
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Flag_of_Tabajd_%281-1_aspect_ratio%29.svg/480px-Flag_of_Tabajd_%281-1_aspect_ratio%29.svg.png') no-repeat;
}
</style>
<script>
/*add this to <script> block*/
function change() {
var btnImg= document.getElementById("btn")
btnImg.classList.toggle("confirm")
btnImg.classList.toggle("unclicked")
}
</script>
<div id="Copy this"></div>
<button class="unclicked" id="btn" onClick=change()></button>
</html>
The classes are so the background can be swapped and clicking it twice will result in the original image showing!
It does work for me, so I hope this helps!
Gypsy.jpg location (uploaded)
This will work:
//CSS
button {
background: blue;
}
<!-- HTML and JS -->
<!-- Blue to Gypsy.jpg -->
<button id="this" onclick="putimage('https://i.stack.imgur.com/8oMX9.jpg'); //<-- paste image here.">Click Me!</button>
<script>
var putimage = function(i) {
// i is image url.
document.getElementById("this").style = 'background: url("' + i + '") space !important';
};
</script>

How to add transition sliding image for my slideshow?

Im working in an image slider. What I was able to do is very simple, and I want to add a transition effect like image sliding , or something like that. If someone knows how to add it to my code it would help me a lot. Here is what I did so far:
.banner-container {
width: 100%;
position: relative;
z-index:0;
height:100% !important;
background: no-repeat center center scroll
}
.banner-container.nomgr {
margin-top:0px;
}
.banner-container-center {
margin-top:-105px;
width: 100%;
position: relative;
z-index:0;
}
.banner {
width: 100%;
position: relative;
z-index:0;
height:120 !important;
background: no-repeat center center scroll
}
.banner-full-height {
width: 100%;
height:auto;
position: relative;
z-index:2;
}
.banner-center {
width: auto;
position: relative;
z-index:2;
}
<div class="banner-container revolution">
<div class="banner">
<ul>
<li > <img src="/images/slide1.png" /></li>
<li > <img src="/images/slide2.png" /></li>
<li > <img src="/images/slide3.png" /></li>
</ul>
</div>
</div>
I have edited your code to add the effect. Change the image source before using
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
margin: 0px;
width: 100%;
padding: 0px;
}
.ani-top{position:relative;animation:animatetop 0.5s}
#keyframes animatetop{from{top:-500px;opacity:0}
to{top:0;opacity:1}}
</style>
</head>
<body>
<div style="max-width:500px">
<img class="slidetop ani-top" src="file:///C:/Users/Administrator/Desktop/download%20(1).jpg" style="width:100%">
<img class="slidetop ani-top" src="file:///C:/Users/Administrator/Desktop/download%20(2).jpg" style="width:100%">
<img class="slidetop ani-top" src="file:///C:/Users/Administrator/Desktop/download.jpg" style="width:100%">
<img class="slidetop ani-top" src="file:///C:/Users/Administrator/Desktop/download%20(3).jpg" style="width:100%">
</div>
<script type="text/javascript">
var pos = 0;
slideshow();
function slideshow() {
var i;
var x = document.getElementsByClassName("slidetop");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
pos++;
if (pos > x.length) {pos = 1}
x[pos-1].style.display = "block";
setTimeout(slideshow, 2500);
}
</script>
</body>
</html>

Why doesn't the gallery work?

Hi I'm trying to make a simple JS image viewer all it needs to do is change the image source for my mainImage to the source of an image I click on from the gallery. for some reason it doesn't work any ideas? I just left the css in that is necessary for you to view the gallery that's why it looks a bit crazy. When I paste the code in here and click on the image it gives me an error which I'm guessing is the problem. Also ignore the fact that the link for the jscript is missing as I just put it inline to rule out that it just wasn't comminucation properly.
Any help would be greatly appreciated.
here's a link to the page as it stands now it's in very early dev so it's not very good http://stevengamedev.com/page5.html
#charset "utf-8";
/* CSS Document */
#containerImg{
width:100%;
position: fixed;
top: 0px;
bottom: 0px;
}
#Gallery{
width:100%;
position: fixed;
top: 0px;
bottom: 0px;
z-index: -7;
background-color:;
}
#padding{
width:25%;
height:100%;
background-color:;
float: left;
}
#padding2{
width:18.75%;
height:100%;
background-color: ;
float: left;
}
#boundry{
background-color: ;
width:50%;
right: 0px;
height: 100%;
float: left;
margin-left: auto;
align-content: center;
}
#mainImage{
float:left;
width: 90%;
height: auto;
margin-left: 10%;
margin-top: 10%;
margin-right: auto;
background-color:rgba(0,0,0,0.65) ;
align-content: center;
}
#imagedescription{
color: white;
}
#contentcontainerimage{
width:75%;
margin-left: 25%;
height:100%;
z-index: 2;
float: left;
overflow-y: auto;
background-color: ;
z-index: inherit;
}
#Gallerybounds{
float: left;
height: auto;
z-index: inherit;
}
#Imagebounds{
float:left;
width: 25%;
height: 100%;
padding-left: ;
z-index: inherit;
background-color: rgba(0,0,0,0.50);
}
#Imagebounds img{
margin-left: 5%;
}
.gallery{
}
.imgStyle{
margin:auto;
align-content: center;
margin-bottom: 20px;
float: left;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Steven game design</title>
<link rel="stylesheet" type="text/css" href="style3.css"/>
<link rel="stylesheet" type="text/css" href="Image.css"/>
<link type="text/javascript" href=""/>
</head>
<div id="navigation">
<div id="navcontent">
<div id="icon">
<img src="images/softwares/nav.png">
</div>
<div id="bodycontainer">
<div class="navigationbody"></div>
<div class="navigationbody">
Home
</div>
<div class="navigationbody">
About
</div>
<div class="navigationbody">
Blog
</div>
<div class="navigationbody">
Videos
</div>
<div class="navigationbody">
Pictures
</div>
<div class="navigationbody">
Contact
</div>
</div>
</div>
</div>
<body>
<div id="Gallery">
<div id="padding"></div>
<div id="padding2"></div>
<div id="boundry">
<div id="mainImage"><img id ="mainImg" src="images/background/bridge4.jpg" alt="bridge" width="100%" height="auto">
<div id="imagedescription">
<h1>description!</h1>
<a>this is a description of the picture etc! lots more words need more words words words words words words.</a>
</div>
</div>
</div>
</div>
<div id="containerImg">
<div id="contentcontainerimage">
<div id="Gallerybounds">
<div id="Imagebounds" onClick="changeImage(event)">
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
<img src="images/Blog/help6.png" width="90%" height="auto"/>
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function changeImage(event) {
event = event || window.event;
var targetElement = event.target || event.srcElement;
if (targetElement.tagName == IMG){
document.getElementById("mainImg").src = targetElement.getAttribute("src");
}
}
</script>
</body>
</html>
Try wrapping IMG in either double or single quotation marks so the if statement condition reads:
if (targetElement.tagName == 'img') {
document.getElementById("mainImage").src = targetElement.getAttribute("src");
}

How to control cycle2?

friends there is something that I want to do for a week with cycle 2 slideshow plugin but I failed every time let me tell you What I want to do I'm trying to do categorized slideshow.I have filters on my cycle2 carousel (you will see on example)
I have 3 categories (or more than 3)
<ul class="filter">
<li id="sports">Sports</li>
<li id="naturel">Naturel</li>
<li id="animals">Animals</li>
</ul>
and my each li has an id
id#sports,id#naturel,id#animals,id#blabla..
at the same time my image has data-id attribute
data-id="sports",data-id="naturel",data-id="animals",data-id="blabla.."
and at this point I can not do what I want to do.
if I click li#sports than only data-id="sports" img must be appear on slideshow with thumbnail
or if I click li#animals than only data-id="animals" img must be appear on slideshow with thumbnail
I try with jquery but nothing happend
and please click to see my little project on codepen
$(document).ready(function() {
$(".filter li").on("click", function() {
var activeId = $(this).attr("id");
$("img[data-id]").hide();
$("img[data-id = '" + activeId + "']").show();
});
});
.single-gallery{
width:800px;
overflow:hidden;
position:relative;
}
.cycle-slideshow img {
width:100%;
height:234px;
max-width:100%;
}
#single-pager a img {
width: 49.3px !important;
height:49.3px !important;
border: 1px solid #fff;
}
#single-pager a.cycle-pager-active img {
opacity: 0.4;
}
#single-left,
#single-right {
position: absolute;
top: 50%;
z-index: 1000;
background: rgba(255, 255, 255, .8);
padding: 12px;
cursor: pointer;
}
#single-left {
left: 0;
}
#single-right {
right: 0;
}
.filter {
position: absolute;
z-index: 1000;
right: 0;
top:0;
padding: 0;
color: #FFF;
background: rgba(255, 255, 255, 0.6);
padding: 10px 30px;
}
.filter li {
list-style-type:none;
cursor: pointer;
display: inline-block;
background: rgba(0, 0, 0, .6);
padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>
<div class="single-gallery">
<div class="cycle-slideshow" data-cycle-pager="#single-pager" data-cycle-pager-template="<a href='#'><img src='{{src}}' width=48 height=48></a>" data-cycle-prev="#single-left" data-cycle-next="#single-right" data-cycle-pause-on-hover="true">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg" data-id="sports">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/sunny-day-lightbox.jpg" data-id="naturel">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" data-id="animals">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/sakura%20trees-lightbox.jpg" data-id="animals" />
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg" data-id="animals" />
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" data-id="animals" />
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg" data-id="sports" />
<div id="single-pager" class="center external"></div>
<div id="single-next-prev">
<span id="single-left">Prev</span>
<span id="single-right">Next</span>
</div>
</div>
<ul class="filter">
<li id="sports">Sports</li>
<li id="naturel">Naturel</li>
<li id="animals">Animals</li>
</ul>
</div>
Even though you are setting display: none on the elements you want hidden (using .hide()) the plugin is still setting them to display: block because when you initialize the slider they are all eligible slides.
There doesn't seem to be a very easy way of dynamically removing/adding slides on the fly.
The approach I took was setting data-hidden="true" on the slides you want hidden, then re-initializing the slider to only use images that match img[data-hidden="false"] as slides.
I added the code below to your css so that the hidden slides don't show up below the slideshow.
img[data-hidden="true"]{
display: none;
}
I also took all the other data- attributes in the cycle div, and renamed its class to mySlideShow so I could render the cycle when I needed using the $('.mySlideShow').cycle({...}) method.
Here should be a working example: http://codepen.io/anon/pen/dvoLeE

Why is my jquery code not working or throwing any errors?

You can checkout my project here: http://jsfiddle.net/raj4dev/2o4uapc9/1/
Summary: I am making a jquery image slider. You can change the image in a box by pressing next and previous arrows. Currently, I have added code only for the next arrow.
Issue: Nothing happens when I click the next arrow. I don't see any errors in the chrome developer tools.
Please tell me how I can debug and fix this issue ?
Code here.
HTML:
<!DOCTYPE html>
<body>
<div id="container">
<header>
<h1>jQuery content slider</h1>
</header>
<img src="http://icongal.com/gallery/image/337589/small_arrow_left.png" alt="Prev" id="prev">
<div id="slider">
<div class="slide">
<div class="slide-copy">
<h2>Slide 1</h2>
<p>Dance and slide!</p>
</div>
<img src="http://m.rgbimg.com/cache1ny0NN/users/j/ja/jana_koll/600/mfOAUfa.jpg" alt="an image">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slide 2</h2>
<p>Dance and slide!</p>
</div>
<img src="https://s-media-cache-ak0.pinimg.com/736x/f9/2e/c0/f92ec0238d508e029be8b7163205d24e.jpg" alt="an image">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slide 3</h2>
<p>Dance and slide!</p>
</div>
<img src="http://www.pptbackgroundstemplates.com/backgrounds/abstract-red-light-wave-ppt-backgrounds-powerpoint.jpg" alt="an image">
</div>
</div>
<img src="http://icons.iconarchive.com/icons/saki/nuoveXT/128/Small-arrow-right-icon.png" alt="Next" id="next">
</div>
</body>
JS:
$(document).ready(function() {
var sliding_speed = 500;
var autoswitch = true;
var autoswitch_speed = 4000;
$('.slide').first().addClass('active');
//Hide all slides, but...
$('.slide').hide();
//...show only the first slide
$('.active').show();
$('#next').on('click', function(){
$('.active').removeClass('active').addClass('oldActive'); /*'Hide the currently active slide and mark it as oldActive so that you can go back to it using the previous button.'*/
if($('.oldActive').is(':last-child')) {
$('.slide').first().addClass('active');
}else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
});
});
CSS:
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Arial', sans-serif;
font-size: 14px;
color: #fff;
background: #333;
line-height: 1.6em;
}
a {
color: #fff;
text-decoration: none;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
#container {
width: 980px;
margin: 40px auto;
overflow: hidden;
}
#slider {
width: 940px;
height: 350px;
position: relative;
overflow: hidden;
float: left;
padding: 3px;
border: #666 solid 2px;
border-radius: 5px;
}
#silder img {
width: 940px;
height: 350px;
}
.slide {
position: absolute;
}
.slide-copy {
position: absolute;
bottom: 0px;
left:0;
padding: 20px;
background: #7f7f7f;
background: rgba(0,0,0,0.5);
width: 100%;
}
#prev, #next {
float: left;
margin-top: 130px;
cursor: pointer;
position: relative;
z-index: 100;
}
#prev {
margin-right: -45px;
}
#next {
margin-left: -45px;
}
You need to again hide all slide and then show only the active one. You are changing the classes to properly set your desired active slide to have the active class, but nothing says that all active slides are shown always and all other slides are hidden always.
http://jsfiddle.net/v1au2d57/
$('#next').on('click', function(){
$('.active').removeClass('active').addClass('oldActive'); /*'Hide the currently active slide and mark it as oldActive so that you can go back to it using the previous button.'*/
if($('.oldActive').is(':last-child')) {
$('.slide').first().addClass('active');
}else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
//Hide all slides, but...
$('.slide').hide();
//...show only the first slide
$('.active').show();
});

Categories