javascript - Jquery Dot Navigation within Drop Down Gallery -
i developing parallax portfolio site , want include jquery features. have working drop down gallery wanting add dot navigation gallery. once added dot navigation, drop down feature stopped working. have set example on jsfiddle. first link, shows drop down feature. (currently opens every gallery @ same time.) second link adds dot navigation.
http://jsfiddle.net/carincamen/pvphpcuw/12/
html:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <body> <p>click small black box show large rectangle box.</p> <img class="arrow"> <div class="gallery"></div> css:
.gallery { position: relative; width: 620px; height: 215px; top: 30px; left: 50px; background-color: rgb(0,0,0); } .arrow{ position: relative; width:20px; height: 20px; top: 15px; left: 340px; background-color: rgb(0,0,0); } jquery:
$(document).ready(function(){ var display =$('.gallery'); $(display).hide(); $('.arrow').click(function(){ $(display).toggle(); }); }); http://jsfiddle.net/carincamen/pvphpcuw/
for ease of demonstration have color coded dot navigation buttons correspond slides.
thank in advance assistance. appreciated.
a special thank linkedin group memeber prompt take look. gallery drops down when clicking arrow, navigation buttons change out sliders. small navigation buttons increase , decrease opacity depending on corresponding slider, , large circle moves dot navigation corresponds slider. working code can found here. hope helpful.
i needed remove $(this).next , use $ , add $("[class^=gallery]").hide() remove previous gallery.
Comments
Post a Comment