Question

I’ve created an image gallery for some magazine issues, I’m wanting to style it like something in my images attached but I’m not sure if you can do what I’m after,

I basically want to jQuery append the image from div 1 and 3 and drop it behind the image on the div currently selected (div 2).

Thanks in advance for any help.

I’ve also got a js fiddle for the code so far: http://jsfiddle.net/huddds/5Z39B/1/

jQuery

 var issueTotal = 0;

$('#backIssue0').show();

$('.prevButton').hide();    

$('.nextButton').click(function(e) {
    e.preventDefault();

    issueTotal = issueTotal + 1;

    if(issueTotal > 0){
        $('.prevButton').show();
    }
    if(issueTotal < 4){
        $('.nextButton').show();
    }    
    if(issueTotal > 3){
        $('.nextButton').hide();
    }

    $("#backIssue" + issueTotal).show();
    if(issueTotal > 0) {
        $('#backIssue' + (issueTotal - 1)).hide();
    }

});


$('.prevButton').click(function(e) {
    e.preventDefault();

    issueTotal = issueTotal - 1;

    if(issueTotal > 1){
        $('.prevButton').show();
    }
    if(issueTotal < 1){
        $('.prevButton').hide();
    }
    if(issueTotal < 4){
        $('.nextButton').show();
    }    
    if(issueTotal > 3){
        $('.nextButton').hide();
    }

    $("#backIssue" + issueTotal).show();
    if(issueTotal > 0) {
        $('#backIssue' + (issueTotal - 1)).hide();
    }
});

HTML

 <div id="buttons">
     <a href="#" class="prevButton">PREVIOUS</a>
     <a href="#" class="nextButton">NEXT</a>
 </div>
 <div id=issueContainer>
 <div id="backIssue0">
     <img src="http://www.tuwidesign.com/tuwi/wp-content/uploads/2009/05/web_designer_magazine.jpg" width="100" alt="#" />
 </div>
 <div id="backIssue1">
     <img src="http://blogof.francescomugnai.com/wp-content/uploads/2008/07/cover_web_designer.jpg" width="100" alt="#" />
 </div>
 <div id="backIssue2">
     <img src="http://www.onerutter.com/wp-content/uploads/2011/10/WD189.jpg" width="100" alt="#" />
 </div>
 <div id="backIssue3">
     <img src="http://www.ukhumourweb.co.uk/web-design-201.jpg" width="100" alt="#" />
 </div>
 <div id="backIssue4">
     <img src="http://www.solidshops.com/blog/wp-content/uploads/web-designer-magazine1.jpg" width="100" alt="#" />
 </div>
 </div>

CSS

 #backIssue0{width:100px;display:none; float:left;}
 #backIssue1{width:100px;display:none;float:left;}
 #backIssue2{width:100px;display:none;float:left;}
 #backIssue3{width:100px;display:none;float:left;}
 #backIssue4{width:100px;display:none;float:left;}
 .nextButton{margin-left:50px;}
 .previousButton{}
 #issueContainer{width:100px;height:130px; overflow:hidden;}
 #buttons{clear:both;}​
               ​

​

Answer 1

http://jsfiddle.net/aEvhh/

How’s this?

Html:

<div id="buttons">
    <a href="#" class="prevButton">PREVIOUS</a>
    <a href="#" class="nextButton">NEXT</a>
</div>
<div id=issueContainer>
<div id="backIssue0" class="issue">
    <img src="http://www.tuwidesign.com/tuwi/wp-content/uploads/2009/05/web_designer_magazine.jpg" width="100" alt="#" />
</div>
<div id="backIssue1" class="issue">
    <img src="http://blogof.francescomugnai.com/wp-content/uploads/2008/07/cover_web_designer.jpg" width="100" alt="#" />
</div>
<div id="backIssue2" class="issue">
    <img src="http://www.onerutter.com/wp-content/uploads/2011/10/WD189.jpg" width="100" alt="#" />
</div>
<div id="backIssue3" class="issue">
    <img src="http://www.ukhumourweb.co.uk/web-design-201.jpg" width="100" alt="#" />
</div>
<div id="backIssue4" class="issue">
    <img src="http://www.solidshops.com/blog/wp-content/uploads/web-designer-magazine1.jpg" width="100" alt="#" />
</div>
</div>

Javascript:

var issueTotal = 0;
function update_issues(){
    $('.issue').removeClass('comingup').hide();
    if(issueTotal >0){
        console.log('#backIssue' + (issueTotal -1));
     $('#backIssue' + (issueTotal -1)).addClass('comingup').show();   
    }
    $('#backIssue' + (issueTotal )).show();
    if(issueTotal <4){
     $('#backIssue' + (issueTotal +1)).addClass('comingup').show();  
    }
    if(issueTotal > 0){
        $('.prevButton').show();
    }
    if(issueTotal < 4){
        $('.nextButton').show();
    }    
}


    $('.nextButton').click(function(e) {
        e.preventDefault();

        issueTotal = issueTotal + 1;
        update_issues();
    });
    update_issues();

    $('.prevButton').click(function(e) {
        e.preventDefault();

        issueTotal = issueTotal - 1;
        update_issues();

    });

CSS:

.issue { width:100px;display:none;float:left;}
.nextButton{margin-left:50px;}
.previousButton{}
#issueContainer{width:300px;height:130px; overflow:hidden;}
.issue.comingup { opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ }
#buttons{clear:both;}