asked on

URGENT HELP With Jquery Image Slider

Hi all,

I have made a jquery image slider and it works fine however I need to add some additional functionality and am struggleing.

I just need to make the two arrows work so when they are clicked it will scroll through the gallery left and right.

any help asap would be great

here is the code :

jquery

$(document).ready(function () { // this function loads all code before it runs

    var timer = ''
    var currentImage = $('#slideShow > div:first') // set first Image for slideshow
    var currentThumb = $('#thumbs > img:first') // Set first Image for Thumbnails
    $('#end').attr('disabled', 'disabled') // attach disabled attribute to end button
    $('#end').css({
            "background": "#e74c3c"
            , "opacity": "0.3"
            , "cursor": "not-allowed"
        }) // set css rules when the end button is inactive
    $("#slideShow > div:gt(0)").hide(); //hides all images greater than 0 
    $("#thumbs > img:eq(0)").css({
            "border": "2px solid #3498db"
            , "opacity": "1"
        }) // set css rules for active thumbnail
    function start() {
        timer = setInterval(function () {
            $('#slideShow > div:first') // Target div Element within #sideShow
                .fadeOut(1000) // fade out current image
                .next() // select next element 
                .fadeIn(1000) // fade in next element
                .end() // End the process 
                .appendTo('#slideShow'); // add functionality to slideshow element
            currentThumb.css({
                    "border": "3px solid #3498db"
                    , "opacity": "0.5"
                }) // apply css rules to active thumbnail 
            currentThumb.next().css({
                    "border": "3px solid #3498db"
                    , "opacity": "1"
                }) // apply css rules once it changes to next thumbnail
            currentThumb = currentThumb.next() // set veariables value to next 
            if (!currentThumb.length) { // checks if the length does not have a valid value 
                currentThumb = $('#thumbs > img:first') // sets back to first image
                currentThumb.css({
                        "border": "3px solid #3498db"
                        , "opacity": "1"
                    }) // applies css rules back to defult
            }
        }, 3000); // sets slideshow timer to 3 seconds per slide
    }
    $(document).on('click', '#start', function () { // onclick event for strat button 
            start();
            $(this).attr('disabled', 'disabled') // sets the value of the start button to disabled = True
            $(this).css({
                    "background": "#e74c3c"
                    , "opacity": "0.3"
                    , "cursor": "not-allowed"
                }) // applies css styles when button is disabled
            $('#end').removeAttr("disabled") // enables end button when start button is clicked
            $('#end').css(({
                    "background": "#3498db"
                    , "opacity": "1"
                    , "cursor": "pointer"
                })) // applies styles when end button is disabled 
            for (var i = 0; i < 5; i++) { // for loop to change cursor style for all thumbnails
                $("#thumbs >  img:eq(" + i + ")").css({
                    "cursor": "not-allowed"
                })
            }
        }) // end for loop
    $(document).on('click', '#end', function () { // onclick event for end button
        location.reload() // resets the slideshow by reloading the page 
    })
     
}); // End ready function

Open in new window

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Image Slide Show</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
</head>

<body> 
<div id="container">
<div id="slideShow">
<div><img src="images/1.jpg"></img></div>    
<div><img src="images/2.jpg"></img></div>     
<div><img src="images/3.jpg"></img></div>     
<div><img src="images/4.jpg"></img></div> 
<div><img src="images/5.jpg"></img></div> 
</div> 
<div id="arrowLeft"><img src="images/arrowLeft.png"></img></div>
<div id="thumbs">
<img src="images/1.jpg"></img>  
<img src="images/2.jpg"></img>    
<img src="images/3.jpg"></img>     
<img src="images/4.jpg"></img> 
<img src="images/5.jpg"></img> 
</div>
<div id="arrowRight"><img src="images/arrowRight.png"></img></div>
</div>
</div>
<div id="btn">
<button id="start">Start</button>
<button id="end">Stop</button>
</div>
</body>

</html>

Open in new window

CSS

/* START CSS RESET */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/* END CSS RESET */
body{
background-color: #2373a7;
}
#slideShow{
width: 900px; 
height: 550px; 
margin: 15px auto;
box-shadow: 3px 10px 20px #13537c;
border: 0spx ; 
border-radius: 40px;
}

#slideShow img{
width: 900px; 
height: 550px;
border: 0px ; 
border-radius: 40px;
position: absolute;
}

#thumbs{
margin: 0px auto;
width: 900px;
}

#thumbs img{
height:55px;
width: 55px; 
border: 3px solid #a4cfeb ; 
border-radius: 200px;
display: inline; 
float: left;
margin-left: 60px; 
box-shadow: 3px 10px 10px #13537c;
margin-bottom: 10px; 
cursor: pointer;

}

#btn{
width: 900px;
margin: 0 auto;
}

#btn #start, #end{
width: 430px; 
height: 70px; 
border: none; 
border-radius: 5px;
margin-left:8px;
margin-top: 5px;
color: white; 
background: #3498db;
box-shadow: 3px 10px 10px #13537c;
font-size: 16px;
cursor: pointer;
}
 

#arrowRight, #arrowLeft{
margin: 0px auto;
width: 900px;
}

#arrowRight img, #arrowLeft img{
height: 50px;
width: 50px; 
padding: 5px; 
border: 3px solid black ; 
border-radius: 200px;
display: inline; 
float: left;
margin-left: 60px; 
box-shadow: 3px 10px 10px #13537c;
margin-bottom: 10px; 
cursor: pointer;
}

Open in new window

Member_2_248744

greetings Mike Moore, , not sure about suggestions to make your buttons change the displayed Image, , also not sure about some of your element arrangements for the fadeshow container.

But, as I see it the back forward button clicks need to first determine which image is displayed, and then fade that one out, and pick the next image and fade that one in. You currently do not record the image displayed (by number ,ID or DOM object), or mark the image (<div>) with a data-current or add a class to mark the current showing, if you add a class like shown, or current, then on button click, you can do a class search
$(".shown") and get the current displayed, and then fade it, remove the class "shown", and maybe use your .next() to get another image and to the other image add the class "shown", and then fade it in.
It may or may not be helpful here, but you could add a class "first" to the initial image, and a class "last" to the final image, that way you will not need a cumbersome detector like your -
if (!currentThumb.length) {
you can just test for the class -
if ($( ".shown" ).hasClass( "last" ))
else
if ($( ".shown" ).hasClass( "first" ))

and then move to next image OR go to the class first or last image

- - - - - - - - - - - -
Also I do not beleive the -
<div><img src="images/1.jpg"></img></div>

need those useless <div> around them

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Mike Moore

ASKER

That Worked Thanks

Julian Hansen

You are welcome.