patternjavascriptMinor
Combining four functions for toggling gallery displays
Viewed 0 times
gallerycombiningdisplaystogglingfourforfunctions
Problem
Here is my HTML:
This is some jQuery I set up to have the divs fadeIn/FadeOut. Is there a way to combine all of these together or a more elegant way of writing it? I feel I'm repeating things too much.
Ken
Kina
This is some jQuery I set up to have the divs fadeIn/FadeOut. Is there a way to combine all of these together or a more elegant way of writing it? I feel I'm repeating things too much.
$('.ken-gallery .gallery-home').click(function( e ){
e.preventDefault();
$('.ken-gallery').fadeOut(function() {
$('.artists-home').fadeIn('slow');
});
});
$('.kina-gallery .gallery-home').click(function( e ){
e.preventDefault();
$('.kina-gallery').fadeOut(function() {
$('.artists-home').fadeIn('slow');
});
});
$('.artist-ken').click(function( e ){
e.preventDefault();
$('.artists-home').fadeOut(function() {
$('.ken-gallery').fadeIn('slow');
});
});
$('.artist-kina').click(function( e ){
e.preventDefault();
$('.artists-home').fadeOut(function() {
$('.kina-gallery').fadeIn('slow');
});
});Solution
The way I have read the code, it looks like you can see 1 gallery at a time or the home links but not both.
It's not much of a saving in code, but you could simplify it a little and assume that if artists-home is clicked that all galleries fade out.
Then for showing the gallery we could use a data tag instead of class names to identify the links and galleries, then you could easily extend the code to include more galleries, with no extra js
Please note, this code is not tested, I might have missed something
It's not much of a saving in code, but you could simplify it a little and assume that if artists-home is clicked that all galleries fade out.
Ken
Kina
$('.gallery-home').click(function( e ){
e.preventDefault();
$('.gallery').fadeOut(function() {
$('.artists-home').fadeIn('slow');
});
});Then for showing the gallery we could use a data tag instead of class names to identify the links and galleries, then you could easily extend the code to include more galleries, with no extra js
$('.artist').click(function( e ){
e.preventDefault();
var artist = $(this).data('artist');
$('.artists-home').fadeOut(function() {
$('.gallery[data-artist' + artist + ']).fadeIn('slow');
});
});Please note, this code is not tested, I might have missed something
Code Snippets
<section id="artists">
<div class="artists-home" style="display: block;">
<a class="artist" data-artist="ken" href="#">Ken</a>
<a class="artist" data-artist="kina" href="#">Kina</a>
</div>
<div class="gallery" data-artist="ken" style="display: none;">
<a class="gallery-home" href="#"><img src="img/rewind.png" alt="Back to main gallery" width="50"></a>
</div>
<div class="gallery" data-artist-"kina" style="display: none;">
<a class="gallery-home" href="#"><img src="img/rewind.png" alt="Back to main gallery" width="50"></a>
</div>
</div>
</section>
$('.gallery-home').click(function( e ){
e.preventDefault();
$('.gallery').fadeOut(function() {
$('.artists-home').fadeIn('slow');
});
});$('.artist').click(function( e ){
e.preventDefault();
var artist = $(this).data('artist');
$('.artists-home').fadeOut(function() {
$('.gallery[data-artist' + artist + ']).fadeIn('slow');
});
});Context
StackExchange Code Review Q#62247, answer score: 2
Revisions (0)
No revisions yet.