Loading JQuery with fadein / out causing blinking
I have an images page.
<div id="contentWrap">
<?php include 'images.php'; ?>
</div>
I am testing with one image and a script in images.php, but I plan on using a dozen or so. I'm trying to.
- Reduce group of images to 'images.php'
- Upload php file for selected image 'image1.php'
- Lose content on 'image1.php
Everything is working fine at the moment, but I get double flash on both fadeOut from 'images.php' and fadeIn 'image1.php' and vice versa. It's like the image fades out twice and then fades out twice. This is what I am trying to avoid.
Images.php
<div id="contentWrap">
<script>
$(document).ready(function() {
$('#image1').click(function() {
$('#contentWrap').fadeOut('slow');
$('#contentWrap').load("http://example.com/image1.php");
$('#contentWrap').fadeIn('slow');
});
});
<script>
<a id="image1" class="pics" href="#">
<img src="aPicture.jpg">
</a>
<a id="image2" class="pics" href="#">
<img src="anotherPicture.jpg">
</a>
....
Image1.php
<div id="contentWrap">
<script>
$(document).ready(function() {
$('.back').click(function() {
$('#contentWrap').fadeOut('slow');
$('#contentWrap').load("http://example.com/images.php");
$('#contentWrap').fadeIn('slow');
});
});
</script>
<a class="back" href="#">back</a>
<img src="image1-large.jpg">
<img src="image1-effects.jpg">
</div>
Is there a better way to do this and how to avoid the double fade effect?
I thought it was caused by using ID contentWrap twice, but I still get unwanted effects when I change the ID in one of the pages and script.
+3
source to share
1 answer
Remove the script tags from the #contentWrap div and move them somewhere outside (perhaps in a chapter section or a separate js file?). Jsfiddle work
<script>
$(document).ready(function() {
$('#image1').click(function() {
$('#contentWrap').fadeOut('slow');
$('#contentWrap').load("http://example.com/image1.php");
$('#contentWrap').fadeIn('slow');
});
$('.back').click(function() {
$('#contentWrap').fadeOut('slow');
$('#contentWrap').load("http://example.com/images.php");
$('#contentWrap').fadeIn('slow');
});
});
</script>
<div id="contentWrap">
<a id="image1" class="pics" href="#">
<img src="aPicture.jpg">
</a>
<a id="image2" class="pics" href="#">
<img src="anotherPicture.jpg">
</a>
<div id="contentWrap">
<a class="back" href="#">back</a>
<img src="image1-large.jpg">
<img src="image1-effects.jpg">
</div>
0
source to share