Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div id="gallery">
- <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"/>
- <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"/>
- <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"/>
- <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"/>
- </div>
- <div id="area">test</div>
- <div id="button-previous">prev</div>
- <div id="button-next">next</div>
- $("#gallery img").first().load(function(){
- activeImg($(this));
- });
- $("#gallery img").on('click, mouseover', function(){
- activeImg($(this));
- });
- $('#button-next').click(function(){
- var isLast = $('#gallery img.active').is(':last-child');
- if (isLast) {
- activeImg($('#gallery img').first());
- } else {
- activeImg($('#gallery img.active').next());
- }
- });
- $('#button-previous').click(function(){
- var isFirst = $('#gallery img.active').is(':first-child');
- if (isFirst) {
- activeImg($('#gallery img').last());
- } else {
- activeImg($('#gallery img.active').prev());
- }
- });
- var activeImg = function($img) {
- $('.active').removeClass('active');
- var imgUrl = $img.addClass('active').data('rel');
- $("#area").html("<img src='" + imgUrl + "' alt='description' />");
- };
- #button-previous {float:left;}
- #button-next {float:right;}
- img{border:1px solid #000}
- img.active{border-color:red}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement