Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
​
  
  <ul  class="gallery">
    
    <button class="prev">Prev</button><!--end btnLeft-->
  <button class="next">Next</button><!--end btnRight-->
    <li>
<div class="wrapper">
                <span class="slide-title">Title</span>
<div class="dark">
<img src="http://www5.mercedes-benz.com/media/image/master/mercedes-benz-dtm-oschersleben-race-master_1_380_211.jpg" alt="horse">
<p>Mercedes</p>
<a href="http://www5.mercedes-benz.com/en/">Купить</a>
​
    </div>
    </div>
    
    
    <div class="wrapper">
<div class="dark">
​
<img src="http://www.nationalgeographic.com/dc/exposure/homepage/photoconfiguration/image/15042_photo_whdvenf37y72uer4efd6rx2wltvu2hmpyjyavf6lo6pvvsfavj3q_480x360.jpg" alt="cat">
    <p>Mercedes</p>
<a href="http://www5.mercedes-benz.com/en/">Купить</a>
​
    </div>
    </div>
    
    <div class="wrapper">
<div class="dark">
​
<img src="http://www.nationalgeographic.com/dc/exposure/homepage/photoconfiguration/image/14946_photo_6slgabdfc5qowfkf2umhj3h4dgguoo4tfzqnozlypf2gukfxr27q_480x360.jpg">
  <p>Mercedes</p>
<a href="http://www5.mercedes-benz.com/en/">Купить</a>
    </div>
  
    </div>
        </li>
    <li>
        <div class="wrapper">
<div class="dark">
        <img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/685/overrides/eight-inch-two-week-old-caiman_68508_160x120.jpg">
  <p>Mercedes</p>
<a href="http://www5.mercedes-benz.com/en/">Купить</a>
    </div>
    </div>
            
  <div class="wrapper">
<div class="dark">
       <img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/493/cache/sillett-redwood-tree-450_49311_160x120.jpg">
  <p>Mercedes</p>
<a href="http://www5.mercedes-benz.com/en/">Купить</a>
        </div>
    </div>
 
      <div class="wrapper">
<div class="dark">
                <img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/234/overrides/tahoe-fluke-trail_23499_160x120.jpg">
  <p>Mercedes</p>
<a href="http://www5.mercedes-benz.com/en/">Купить</a>
    </div>
    </div>
        </li>
     
  </ul>
  
  
​
</body>
</html>
 
jQuery(document).ready(function ($) { 
​
var clicked;
​
$('.wrapper').click(function(){
  
clicked = $(this);
clicked.find('img').fadeOut().trigger('click');
});
​
$('button.next').click(function(){
  clicked.next().find('img').fadeOut().trigger('click');   
  
   }); 
   });
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers