jquery - Display specific thumbnail content when clicked -
i facing problem, every time click on thumbnail, display me content display me double in case, or in original project 6 times. managed make project title read work, struggle displaying project description in .project[x] , display once, gives me spinner , project title 2 times(or 6 in original version). figured out though problem in work-wrap section, can't identify or fix problem, yet.
after messing more html markup , js ended this, believe closer solution. displays 1 name (correctly each thumbnail) , each thumbnail shows classes (spinner/project1/project2)
example when clicked on first thumbnail: http://i.imgur.com/sieuzth.png
html markup:
<div class="work-belt"> <div class="thumb-wrap"> <div class="thumb-container"> <a href="#/" class="thumb-unit"> <div data-class="project1" class="thumb-overlay"> <strong>name1</strong> </div> </a> <a href="#/" class="thumb-unit"> <div data-class="project2" class="thumb-overlay"> <strong>name2</strong> </div> </a> </div> </div> <div class="work-wrap"> <div class="work-container"> <h4 class="project-title"></h4> <div class="project-load"></div> <div class="project1"> <div style="width: 600px; height: 500px; background: #aaa;"></div> <p>1st description</p> </div> <div class="project2"> <div style="width: 600px; height: 500px; background: #000;"></div> <p>2nd description</p> </div> </div> </div> </div> <!-- ending of work-belt -->
js markup:
function workload() {
$.ajaxsetup({ cache: false }); $('.thumb-overlay').click(function() { var $this = $(this), newtitle = $this.find('strong').text(), newclass = $this.data('class'), spinner = '<div class="loader">loading...</div>', newwork = '<div class="project-load">'+ newclass +'</div>'; $('.project-load').html(spinner).load(newwork); $('.project-title').text(newtitle); });
}
your html contains 2 div's class = "project-load"
. remove whichever don't want.
jquery changing every $('.project-load') can find.
Comments
Post a Comment