Last active
December 22, 2015 01:29
-
-
Save struts2spring/6396731 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<a href="#" class="show-photos">Show All Photos</a> | |
<ul id="tourprices"> | |
<li class="tour" data-loc="london,uk"> | |
London, UK | |
<ul class="photos"> | |
<li><img src="/assets/photos/london.jpg"></li> | |
<li><img src="/assets/photos/london.jpg"></li> | |
<li><img src="/assets/photos/london.jpg"></li> | |
</ul> | |
<a href="#" class="see-photos">See Photos</a> | |
<a href="#" class="hide-tour">Hide Tour</a> | |
</li> | |
<li class="tour" data-loc="paris,france"> | |
Paris, France | |
<ul class="photos"> | |
<li><img src="/assets/photos/paris1.jpg"></li> | |
<li><img src="/assets/photos/paris1.jpg"></li> | |
<li><img src="/assets/photos/paris1.jpg"></li> | |
</ul> | |
<a href="#" class="see-photos">See Photos</a> | |
<a href="#" class="hide-tour">Hide Tour</a> | |
</li> | |
<li class="tour" data-loc="New York, NY, USA"> | |
New York, NY, USA | |
<ul class="photos"> | |
<li><img src="/assets/photos/newyork1.jpg"></li> | |
<li><img src="/assets/photos/newyork1.jpg"></li> | |
<li><img src="/assets/photos/newyork1.jpg"></li> | |
</ul> | |
<a href="#" class="see-photos">See Photos</a> | |
<a href="#" class="hide-tour">Hide Tour</a> | |
</li> | |
</ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$.fn.photofy = function(options) { | |
this.each(function() { | |
var show = function(e) { | |
e.preventDefault(); | |
settings.tour | |
.addClass('is-showing-photofy') | |
.find('.photos') | |
.find('li:gt('+(settings.count-1)+')') | |
.hide(); | |
} | |
var settings = $.extend({ | |
count: 3, | |
tour: $(this) | |
}, options); | |
settings.tour.on('click.photofy', '.see-photos', show); | |
settings.tour.on('show.photofy', show); | |
}); | |
} | |
$(document).ready(function() { | |
$('.tour').photofy({ count: 1}); | |
$('.show-photos').on('click', function(e) { | |
e.preventDefault(); | |
$('.tour').trigger('show.photofy'); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
We've added an event handler to the "Show all photos" link above the tours. Within this event handler, you'll need to trigger an event, show.photofy, on all tours. Update the plugin to listen for this event and call the show function when it receives it |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment