Creating a cropped image slideshow

I am looking to create two side by side image galleries that can be controlled independently of eachother and allow for interesting image combinations.

I have the cropped image code and the 'click to change image' code, i just cant figure out how to combine the two.

Code: http://jsfiddle.net/7ae0chbs/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<style>
.cover {
    width: 334px;
    height: 500px;
}
.thumbnail {
    height: 100%;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-position: left;
}
.thumbnail2 {
    height: 100%;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-position: right;
}
.clearBoth { clear:both; }

img{
    width : 668spx;
    height : 500px;
}

</style>

</head>

<body>

<div class="cover" style="float:left;">
    <div style="background-image: url(sam_5331.jpg); " class="thumbnail" ></div>
</div>
<div class="cover" style="float:left;">
    <div style="background-image: url(sam_5370.jpg); " class="thumbnail2"></div>
</div>
<br class="clearBotnh" />


<img src="sam_5331.jpg" id="imgClickAndChange" onclick="changeImage()" usemap="#SUB15" />

<script>
var counter = 1;

imgClickAndChange.onclick = function(){
    if(counter == 0){
        document.getElementById("imgClickAndChange").src = "sam_5331.jpg";
        counter++;
    }
    else if(counter == 1){
        document.getElementById("imgClickAndChange").src = "sam_0092.jpg";
        counter++;
    }
    else if(counter == 2){
        document.getElementById("imgClickAndChange").src = "sam_0150.jpg";
        counter = 0;
    }
};
</script>

stu

Solution

Not sure I'm 100% understanding your end result, but are you wanting the side by side div's backgrounds to change when clicked?

If so, is this what you want? http://jsfiddle.net/u1uostrc/

I just added id's to both of the divs that show the actual images, and set onclicks for them, along with counters for each.

var img1Counter = 0;
var img2Counter = 1;

img1.onclick = function() {
    if (img1Counter == 0) {
        document.getElementById("img1").style.backgroundImage = "url('http://upload.wikimedia.org/wikipedia/commons/thumb/8/88/Number_1_in_green_rounded_square.svg/2000px-Number_1_in_green_rounded_square.svg.png')";
        img1Counter++;
    } else if(img1Counter == 1) {
        document.getElementById("img1").style.backgroundImage = "url(http://tomreynolds.com/wp/wp-content/uploads/2014/01/2-graphic.png)";
        img1Counter++;
    } else if(img1Counter == 2) {
        document.getElementById("img1").style.backgroundImage = "url(http://upload.wikimedia.org/wikipedia/commons/6/69/VET_3_circle.png)";
        img1Counter = 0;
    }
}


img2.onclick = function() {
    if (img2Counter == 0) {
        document.getElementById("img2").style.backgroundImage = "url('http://upload.wikimedia.org/wikipedia/commons/thumb/8/88/Number_1_in_green_rounded_square.svg/2000px-Number_1_in_green_rounded_square.svg.png')";
        img2Counter++;
    } else if(img2Counter == 1) {
        document.getElementById("img2").style.backgroundImage = "url(http://tomreynolds.com/wp/wp-content/uploads/2014/01/2-graphic.png)";
        img2Counter++;
    } else if(img2Counter == 2) {
        document.getElementById("img2").style.backgroundImage = "url(http://upload.wikimedia.org/wikipedia/commons/6/69/VET_3_circle.png)";
        img2Counter = 0;
    }
}

Hope this helps...