Skip to content

Instantly share code, notes, and snippets.

@struts2spring
Last active December 22, 2015 01:29
Show Gist options
  • Save struts2spring/6396731 to your computer and use it in GitHub Desktop.
Save struts2spring/6396731 to your computer and use it in GitHub Desktop.
<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>
$.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');
});
});
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