Hi all,
I have created a gallery of pictures which you cannot see with Jfiddle but all the code is there. I am attempting to have it so each time you click on an image one paragraph disappears and another emerges. The way I coded it works with one problem. If i click anywhere on the screen other than another image the paragraph disappears and another will not appear until I click an image. How can I code it so that the paragraphs will hide only if I click on one of the images and not if I click elsewhere as well. Thank you for your help!
Java:
var request;
var $current;
var cache = {};
var $frame = $('#photo-viewer');
var $thumbs = $('.thumb');
function crossfade($img) {
if ($current) {
$current.stop().fadeOut('slow');
}
$img.css({
marginLeft: -$img.width() / 2,
marginTop: -$img.height() / 2
});
$img.stop().fadeTo('slow', 1);
$current = $img;
};
$(document).on('click', '.thumb', function(e){
var $img;
var src = this.href;
request = src;
e.preventDefault();
$thumbs.removeClass('active');
$(this).addClass('active');
if(cache.hasOwnProperty(src)) {
if (cache[src].isLoading === false) {
crossfade(cache[src].$img);
}
} else {
$img = $('<img/>');
cache[src] = {
$img: $img,
isLoading: true
};
$img.on('load', function() {
$img.hide();
$frame.removeClass('is-loading').append($img);
cache[src].isLoading = false;
if(request === src) {
crossfade($img);
}
});
$frame.addClass('is-loading');
$img.attr({
'src': src,
'alt': this.title || ' '
});
}
});
$(document).mouseup(function(e) {
var container = $("#mad");
jQuery("#para").hide();
//toggle the componenet with class msg_body
jQuery("#mad").click(function() {
$(this).next($("#para").fadeIn(500))
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$("#para").hide();
}
})
});
$(document).mouseup(function(e) {
var container = $("#ralph");
jQuery("#para2").hide();
//toggle the componenet with class msg_body
jQuery("#ralph").click(function() {
$(this).next($("#para2").fadeIn(500))
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$("#para2").hide();
}
})
});
$(document).mouseup(function(e) {
var container = $("#julia");
jQuery("#para3").hide();
//toggle the componenet with class msg_body
jQuery("#julia").click(function() {
$(this).next($("#para3").fadeIn(500))
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$("#para3").hide();
}
})
});
$(document).mouseup(function(e) {
var container = $("#sophie");
jQuery("#para4").hide();
//toggle the componenet with class msg_body
jQuery("#sophie").click(function() {
$(this).next($("#para4").fadeIn(500))
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$("#para4").hide();
}
})
});
$(document).mouseup(function(e) {
var container = $("#may");
jQuery("#para5").hide();
//toggle the componenet with class msg_body
jQuery("#may").click(function() {
$(this).next($("#para5").fadeIn(500))
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$("#para5").hide();
}
})
});
$(document).mouseup(function(e) {
var container = $("#kiss");
jQuery("#para6").hide();
//toggle the componenet with class msg_body
jQuery("#kiss").click(function() {
$(this).next($("#para6").fadeIn(500))
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$("#para6").hide();
}
})
});
$('.thumb').eq(0).click();
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="Gallerystyle.css">
<ul class="navigation">
<p> Nicholas Clegg </p>
<li><a href="painthome.html">Home</a></li>
<li><a href=favart.html>Artists</a></li>
<li><a href="#">Sale</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</head>
<body>
<div id="photo-viewer">
<p id="para"> <em> "Maddy" </em> <br>
<span class="normal">This is a picture of Nicholas' <br>
niece. Her innocence and utter <br>
adorableness inspired Nick to <br>
draw this beautiful portrait <br>
of a young lady early in <br>
her life.</span></p>
<p id="para2"> <em> "Raplhie" </em> <br>
<span class="normal">This is a picture of Nicholas' <br>
grandfather. Nick captures the <br>
joy of ageing by encapsulating <br>
every detail of an older man <br>
still in the prime of his life.</span></p>
<p id="para3"> <em> "Julia" </em> <br>
<span class="normal">This is a picture of Nicholas' <br>
grandfather. Nick captures the <br>
joy of ageing by encapsulating <br>
every detail of an older man <br>
still in the prime of his life.</span></p>
<p id="para4"> <em> "Sophie" </em> <br>
<span class="normal">This is a picture of Nicholas' <br>
grandfather. Nick captures the <br>
joy of ageing by encapsulating <br>
every detail of an older man <br>
still in the prime of his life.</span></p>
<p id="para5"> <em> "Unknown" </em> <br>
<span class="normal">This is a picture of Nicholas' <br>
grandfather. Nick captures the <br>
joy of ageing by encapsulating <br>
every detail of an older man <br>
still in the prime of his life.</span></p>
<p id="para6"> <em> "Jo and Rich" </em> <br>
<span class="normal">This is a picture of Nicholas' <br>
grandfather. Nick captures the <br>
joy of ageing by encapsulating <br>
every detail of an older man <br>
still in the prime of his life.</span></p>
</div>
<div id="thumbnails">
<a id ="mad" href="img/madeline.jpg" class ="thumb active" title="Madeline">
<img id ="mad" src="img/madelinethumb.jpg" alt="Madeline" /></a>
<a id="ralph" href="img/ralph.jpg" title="Ralph" class="thumb">
<img id="ralph" src="img/ralphthumb.jpg" alt="Ralph" /></a>
<a id="julia" href="img/julia.jpg" title="Julia" class="thumb">
<img id="julia" src="img/juliathumb.jpg" alt="Julia" /></a>
<a id="sophie" href="img/sophie.jpg" title="Julia" class="thumb">
<img id="sophie" src="img/sophiethumb.jpg" alt="Julia" /></a>
<a id="may" href="img/may.jpg" title="Julia" class="thumb">
<img id="may" src="img/maythumb.jpg" alt="May" /></a>
<a id="kiss" href="img/kiss.jpg" title="Julia" class="thumb">
<img id="kiss" src="img/kissthumb.jpg" alt="Joanna and Rich" /></a>
</div>
<script src='jquery-1.11.2.min.js'> </script>
<script src='photo-viewer2.js'> </script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire