Click link, div slides out, linked div slides in, click to close and reload first div

Question

I wish I knew how to write this myself. http://www.cubancouncil.com/work/project/coppola-winery/

The linked page has the exact function I would like to use. How I believe their script works. Click an image which hides the container div for that image by sliding it off to the right and loads/slides in a larger image from the right to left which is in a fixed position.

If someone here is nice enough to answer this question with a solution would you mind taking it a step further and commenting on portions of your code so I can link it to the proper html?

I think understanding this one script would set me on a path to nailing down more advanced Javascript & Jquery. Thanks.

score 1 · Accepted Answer · edited May 23 '17 at 12:20

EDIT: I found a better example with some code provided. Go to the section where it talks about how to slide your element left. If you have questions, just let us know.

I've also taken the liberty to give you a full working example (exact same as the one in the article) so you can just run it in your browser

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <style>
    .slide {
      position: relative;
      background-color: gray;
      height: 100px;
      width: 500px;
      overflow: hidden;
    }
    .slide .inner {
      position: absolute;
      left: -500px;
      bottom: 0;
      background-color:#e3e3e3;
      height: 30px;
      width: 500px;
    }
    </style>
    <script>
        $(document).ready(function() {
          $('#slideleft button').click(function() {
            var $lefty = $(this).next();
            $lefty.animate({
              left: parseInt($lefty.css('left'),10) == 0 ?
                -$lefty.outerWidth() :
                0
            });
          });
        });
    </script>
</head>
<body style>
    <div id="slideleft" class="slide">
        <button>slide it</button>
        <div class="inner">Slide to the left</div>
    </div>
</body>
</html>

The article explains most of it but I'll give you a quick run-down. In essence what we're doing is we're making it so that whatever you're trying to slide, we are altering the left position so that it comes out. Initially, I set the CSS to be -500px so it is outside the screen. The javascript then listens for the button click and moves the div by changing the left position. Jquery's animate() function does most of the work though.

The confusing bit about this is the ternary operator. You can find more info on that here. Essentially it just checks the left property to see if it's 0. If it is, we want to move it back outside to -500px. If the left isn't 0px, we know it must be outside the screen, so we move it back to 0px.

If there is anything else you're confused about let us know.

I found something similar and maybe you can shed some light on which solution is best. `` I just need a add a close function to the img so it returns to the div named imperialelite. There are also multiple images, can either solution incorporate that? — Kapitol, Aug 29 '12 at 22:23
Personally idk if directly inserting html to create the image is good style. It's way more optimal if you simply have all the images preloaded onto your HTML document and then simply slide them out. What your code does is it injects the HTML code which can get messy sometimes. Yes either solution can incorporate that. If you wanted to do this with multiple images, just stick the class onto them as an attribute and make it so that the event listener is when you click the div rather than a button (unless you want to make a button for each image to slide out). — aug, Aug 29 '12 at 22:57

Dejo Dekic · Answer 2 · 2012-08-30T18:52:11.943

Created simple fiddle for you (notice it WORKS ON HOVER!!) but it should get you going, it's kinda late in my country so my brain doesn't work properly:) Fiddle here

$(document).ready(function(){
var innerHeigth = $(".inner").outerHeight();  
$(".wrapper").hover(function(){        
$(".inner").stop().animate({top:-innerHeigth},1000);
 //alert(innerHeigth)
 },function(){
 $(".inner").stop().animate({top:0},1000);

 });
 });

Click link, div slides out, linked div slides in, click to close and reload first div

2 Answers2