Advertisement
Guest User

Untitled

a guest
Oct 31st, 2014
140
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.10 KB | None | 0 0
  1. <div id="gallery">
  2. <img data-rel="http://2.bp.blogspot.com/-MUcNEVzLIB8/TrStjvP92kI/AAAAAAAABLI/eK3vb1QMrrw/s1600/slide1-new.png" src="http://2.bp.blogspot.com/-MUcNEVzLIB8/TrStjvP92kI/AAAAAAAABLI/eK3vb1QMrrw/s1600/slide1-new.png" style="max-width:150px;max-height:50px"/>
  3.  
  4. <img data-rel="http://1.bp.blogspot.com/-KDiH65CZ8Hs/TjO9rQbmt9I/AAAAAAAAAfg/HeVV38ckUzk/s1600/3.jpg" src="http://1.bp.blogspot.com/-KDiH65CZ8Hs/TjO9rQbmt9I/AAAAAAAAAfg/HeVV38ckUzk/s1600/3.jpg" style="max-width:150px;max-height:50px"/>
  5.  
  6. <img data-rel="http://4.bp.blogspot.com/-pZuNX8uqQhw/TjO9rDvyC8I/AAAAAAAAAfY/N91storzGWc/s1600/2.jpg" src="http://4.bp.blogspot.com/-pZuNX8uqQhw/TjO9rDvyC8I/AAAAAAAAAfY/N91storzGWc/s1600/2.jpg" style="max-width:150px;max-height:50px"/>
  7.  
  8. <img data-rel="http://4.bp.blogspot.com/-y1cPqvkIts8/TjPDKH1-XDI/AAAAAAAAAgA/l8JbwyqcQvI/s1600/hompimenu.jpg" src="http://4.bp.blogspot.com/-y1cPqvkIts8/TjPDKH1-XDI/AAAAAAAAAgA/l8JbwyqcQvI/s1600/hompimenu.jpg" style="max-width:150px;max-height:50px"/>
  9. </div>
  10.  
  11. <div id="area">test</div>
  12. <div id="button-previous">prev</div>
  13. <div id="button-next">next</div>
  14.  
  15. $("#gallery img").first().load(function(){
  16. activeImg($(this));
  17. });
  18.  
  19. $("#gallery img").on('click, mouseover', function(){
  20. activeImg($(this));
  21. });
  22.  
  23. $('#button-next').click(function(){
  24. var isLast = $('#gallery img.active').is(':last-child');
  25.  
  26. if (isLast) {
  27. activeImg($('#gallery img').first());
  28. } else {
  29. activeImg($('#gallery img.active').next());
  30. }
  31. });
  32.  
  33. $('#button-previous').click(function(){
  34. var isFirst = $('#gallery img.active').is(':first-child');
  35.  
  36. if (isFirst) {
  37. activeImg($('#gallery img').last());
  38. } else {
  39. activeImg($('#gallery img.active').prev());
  40. }
  41. });
  42.  
  43. var activeImg = function($img) {
  44. $('.active').removeClass('active');
  45.  
  46. var imgUrl = $img.addClass('active').data('rel');
  47. $("#area").html("<img src='" + imgUrl + "' alt='description' />");
  48.  
  49. };
  50.  
  51. #button-previous {float:left;}
  52. #button-next {float:right;}
  53. img{border:1px solid #000}
  54. img.active{border-color:red}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement