I have a lightbox (using fancybox.net) here: http://desertcinema.com/home-test/
And I use a gallery codes to show images in gallery form:
Here's my jQuery code:
$(document).ready(function() {
$(".gallery").fancybox({
openEffect : 'none',
closeEffect : 'none'
});
});
And here's my HTML:
<li class="portfolio-box photography">
<a class="gallery" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4bav1hxsgwj54nvaww.jpg" title="Concealment">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4baun93pvbri4pf1ts.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Concealment</h4>
</a>
</li>
<li class="portfolio-box photography" style="width:335px;display:none;">
<a class="gallery" rel=gallery1" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/Mike-Full-Draw-30sp495yqivl82ubkxq5mo.jpg" title="Concealment">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4baun93pvbri4pf1ts.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Concealment</h4>
</a>
</li>
using the class "gallery" that I place on <a href=""> however when clicking this images there is no next or previous button which must be working.
I just followed this instruction: http://fancyapps.com/fancybox/#examples
am I making any mistakes? You can inspect element using Chrome if you want.
Try this.You are missing rel="gallery1" in first < a >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<script src="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<link href="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.css" rel="stylesheet"/>
<link href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" rel="stylesheet"/>
<li class="portfolio-box photography">
<a class="gallery" rel="gallery1" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4bav1hxsgwj54nvaww.jpg" title="Concealment">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4baun93pvbri4pf1ts.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Concealment</h4>
</a>
</li>
<li class="portfolio-box photography" style="width:335px;display:none;">
<a class="gallery" rel="gallery1" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/Mike-Full-Draw-30sp495yqivl82ubkxq5mo.jpg" title="Concealment">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4baun93pvbri4pf1ts.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Concealment</h4>
</a>
</li>
<script>
$(document).ready(function() {
$(".gallery").fancybox({
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
try this way.. No div should be there in li
$(document).ready(function() {
$(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<script src="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<link href="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.css" rel="stylesheet"/>
<link href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" rel="stylesheet"/>
<a class="fancybox" rel="gallery1" href="http://farm2.staticflickr.com/1617/24108587812_6c9825d0da_b.jpg" title="Morning Godafoss (Brads5)">
<img src="http://farm2.staticflickr.com/1617/24108587812_6c9825d0da_m.jpg" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="http://farm4.staticflickr.com/3691/10185053775_701272da37_b.jpg" title="Vertical - Special Edition! (cedarsphoto)">
<img src="http://farm4.staticflickr.com/3691/10185053775_701272da37_m.jpg" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="http://farm1.staticflickr.com/574/22407305427_69cc6e845f_b.jpg" title="Racing against the Protons (tom.leuzi)">
<img src="http://farm1.staticflickr.com/574/22407305427_69cc6e845f_m.jpg" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="http://farm1.staticflickr.com/291/18653638823_a86b58523c_b.jpg" title="Lupines (Kiddi Einars)">
<img src="http://farm1.staticflickr.com/291/18653638823_a86b58523c_m.jpg" alt="" />
</a>
Related
I have an image gallery with magnificPopup plugin. This is my code:
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<div class="thumbs">
<a href="https://picsum.photos/id/237/800.jpg" target="_blank">
<img src="https://picsum.photos/id/237/100.jpg">
</a>
<a href="https://picsum.photos/id/1003/800.jpg" target="_blank">
<img src="https://picsum.photos/id/1003/100.jpg">
</a>
<a href="https://picsum.photos/id/1011/800.jpg" target="_blank">
<img src="https://picsum.photos/id/1011/100.jpg">
</a>
<a href="https://picsum.photos/id/1025/800.jpg" target="_blank">
<img src="https://picsum.photos/id/1025/100.jpg">
</a>
</div>
Javascript:
$(()=>{
$('.thumbs').magnificPopup({
type: 'image',
delegate: 'a',
gallery: {
enabled: true
}
});
});
$(()=>{
$('.thumbs').magnificPopup({
type: 'image',
delegate: 'a',
gallery: {
enabled: true
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<div class="thumbs">
<a href="https://picsum.photos/id/237/800.jpg" target="_blank">
<img src="https://picsum.photos/id/237/100.jpg">
</a>
<a href="https://picsum.photos/id/1003/800.jpg" target="_blank">
<img src="https://picsum.photos/id/1003/100.jpg">
</a>
<a href="https://picsum.photos/id/1011/800.jpg" target="_blank">
<img src="https://picsum.photos/id/1011/100.jpg">
</a>
<a href="https://picsum.photos/id/1025/800.jpg" target="_blank">
<img src="https://picsum.photos/id/1025/100.jpg">
</a>
</div>
How to destroy/uninitialize Magnific Popup?
This is how to destroy magnificPopup:
$.magnificPopup.close();
$('.thumbs').off('click');
$('.thumbs a').off('click');
// initialize magnificPopup
function initMagnificPopup() {
$('.thumbs').magnificPopup({
type: 'image',
delegate: 'a',
gallery: {
enabled: true
}
});
}
// destroy magnificPopup
function destroyMagnificPopup() {
$.magnificPopup.close();
$('.thumbs').off('click');
$('.thumbs a').off('click');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<button type="button" onclick="initMagnificPopup()">initialize magnificPopup</button>
<div class="thumbs">
<a href="https://picsum.photos/id/237/800.jpg" target="_blank">
<img src="https://picsum.photos/id/237/100.jpg">
</a>
<a href="https://picsum.photos/id/1003/800.jpg" target="_blank">
<img src="https://picsum.photos/id/1003/100.jpg">
</a>
<a href="https://picsum.photos/id/1011/800.jpg" target="_blank">
<img src="https://picsum.photos/id/1011/100.jpg">
</a>
<a href="https://picsum.photos/id/1025/800.jpg" target="_blank">
<img src="https://picsum.photos/id/1025/100.jpg">
</a>
</div>
<button type="button" onclick="destroyMagnificPopup()">destroy magnificPopup</button>
The user through the admin panel can add any number of sliders to the page. How to make all sliders with the same class initialized?
How do I make sure that the control buttons for each slider are applied separately, and not just for the last slider?
Now the buttons only work for the last slider.
$('.sliderBox').slick({
autoplay: true,
prevArrow: $('.sliderLeftBtn'),
nextArrow: $('.sliderRightBtn'),
dots: true,
appendDots: $('.sliderControl'),
});
.smallSlider-Item img{
width: 200px;
background: #red;
height:300px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<div class="sliderBox">
<a class="smallSlider-Item" href="">
<img src="img/smallSlider/k.png" alt="" class="smallSlider-ItemImg">
</a>
<a class="smallSlider-Item" href="">
<img src="img/smallSlider/k.png" alt="" class="smallSlider-ItemImg">
</a>
<a class="smallSlider-Item" href="">
<img src="img/smallSlider/k.png" alt="" class="smallSlider-ItemImg">
</a>
<a class="smallSlider-Item" href="">
<img src="img/smallSlider/k.png" alt="" class="smallSlider-ItemImg">
</a>
<a class="smallSlider-Item" href="">
<img src="img/smallSlider/k.png" alt="" class="smallSlider-ItemImg">
</a>
</div>
<div class="sliderControl">
<div class="arrowLeft sliderLeftBtn"></div>
<div class="arrowRight sliderRightBtn"></div>
</div>
</div>
<div class="sliderBox">
<a class="smallSlider-Item" href="">
<img src="img/smallSlider/k.png" alt="" class="smallSlider-ItemImg">
</a>
<a class="smallSlider-Item" href="">
<img src="img/smallSlider/k.png" alt="" class="smallSlider-ItemImg">
</a>
<a class="smallSlider-Item" href="">
<img src="img/smallSlider/k.png" alt="" class="smallSlider-ItemImg">
</a>
<a class="smallSlider-Item" href="">
<img src="img/smallSlider/k.png" alt="" class="smallSlider-ItemImg">
</a>
<a class="smallSlider-Item" href="">
<img src="img/smallSlider/k.png" alt="" class="smallSlider-ItemImg">
</a>
</div>
<div class="sliderControl">
<div class="arrowLeft sliderLeftBtn"></div>
<div class="arrowRight sliderRightBtn"></div>
</div>
</div>
I have found a solution by running through each slider element. Since there were some errors in your markup, I have edited everything a little bit.
$(document).ready(function() {
$('.slider-container').each(function(index, element) {
var $sliderBox = $(element).find('.slider-box'),
$sliderControls = $sliderBox.next('.slider-controls');
$sliderBox.slick({
autoplay: true,
dots: true,
prevArrow: $sliderControls.find('.slider-button.button-prev'),
nextArrow: $sliderControls.find('.slider-button.button-next'),
appendDots: $sliderControls,
});
});
});
.slider-controls .slick-dots {
position: static;
bottom: initial;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="slider-container">
<div class="slider-box">
<h3>01</h3>
<h3>02</h3>
<h3>03</h3>
<h3>04</h3>
<h3>05</h3>
</div>
<div class="slider-controls">
<button class="slider-button button-prev">< Prev</button>
<button class="slider-button button-next">Next ></button>
</div>
</div>
<div class="slider-container">
<div class="slider-box">
<h3>06</h3>
<h3>07</h3>
<h3>08</h3>
<h3>09</h3>
<h3>10</h3>
</div>
<div class="slider-controls">
<button class="slider-button button-prev">< Prev</button>
<button class="slider-button button-next">Next ></button>
</div>
</div>
I am trying to integrate the Blueimp image gallery within a website with bootstrap and the lightbox script just doesn't start when clicking on a thumbnail. Instead, the linked image is shown in a new opened page, like it's supposed to do by default. Here is the code:
in the head goes the css:
HEAD:
<link rel="stylesheet" type="text/css" href="js/blueimp_gallery/css/blueimp- gallery.min.css">
<link rel="stylesheet" type="text/css" href="/js/blueimp_gallery/css/blueimp-gallery-indicator.css">
BODY:
<div class="dgallery2 row">
<div class="content">
<div class="bg effect2">
<div id="links">
<a href="images/portfolio/1.jpg" title="Banana" data-gallery>
<img src="images/portfolio/thumbnail.jpg" alt="Banana">
</a>
<a href="images/portfolio/2.jpg" title="Apple" data-gallery>
<img src="images/portfolio/thumbnail.jpg" alt="Apple">
</a>
<a href="images/portfolio/3.jpg" title="Orange" data-gallery>
<img src="images/portfolio/thumbnail.jpg" alt="Orange">
</a>
<a href="images/portfolio/3.jpg" title="Orange" data-gallery>
<img src="images/portfolio/thumbnail.jpg" alt="Orange">
</a>
<a href="images/portfolio/3.jpg" title="Orange" data-gallery>
<img src="images/portfolio/thumbnail.jpg" alt="Orange">
</a>
<a href="images/portfolio/3.jpg" title="Orange">
<img src="images/portfolio/thumbnail.jpg" alt="Orange">
</a>
<a href="images/portfolio/3.jpg" title="Orange" data-gallery>
<img src="images/portfolio/thumbnail.jpg" alt="Orange">
</a>
<a href="images/portfolio/3.jpg" title="Orange">
<img src="images/portfolio/thumbnail.jpg" alt="Orange">
</a>
<a href="images/portfolio/3.jpg" title="Orange" data-gallery >
<img src="images/portfolio/thumbnail.jpg" alt="Orange">
</a>
</div>
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
</div>
</div>
</div>
and then the scripts at the bottom of body:
<script type="text/javascript" src="/js/blueimp_gallery/js/blueimp-helper.js"></script>
<script type="text/javascript" src="/js/blueimp_gallery/js/blueimp-gallery.min.js"></script>
<script type="text/javascript" src="/js/blueimp_gallery/js/blueimp-gallery-fullscreen.js"></script>
<script type="text/javascript" src="/js/blueimp_gallery/js/blueimp-gallery-indicator.js"></script>
<script type="text/javascript" src="/js/blueimp_gallery/js/jquery.blueimp-gallery.min.js"></script>
<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {index: link, event: event},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
</script>
And the lightbox just won't start. Any ideas? Thank you very much!
So the code was correct and all, only that there were some errors when loading some other Javascript scripts that I located through Error Console in the Developper panel...so I sorted those out and now blueimp works like a charm and it's responsive too :D Thanks anyway!
I currently have two different javascripts running on my page. One for a slideshow and another for a timed image swap. I can only get one or the other to work, depending on which one of the scripts is lower in the code. I read many tutorials and it seemed adding <body onload="func1();func2()"> would fix the problem but it did not.
I have made two sample pages
Where image swap works but slide show does not show up
http://pancakeparadise.com/shirtswap.html
Where slide show shows up and works but images do not swap out
http://pancakeparadise.com/shirtswap1.html
Thank you for any help you can provide!
<!DOCTYPE html>
<head>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Amatic+SC:700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
<script type="text/javascript">
$(document).ready(
function func2(){
$('ul#portfolio').innerfade({
speed: 'slow',
timeout: 4000,
type: 'sequence',
containerheight: '500px'
});
}
);
</script>
</head>
<body onload="func1();func2()">
<div id="wholebody">
<section id="slideshow">
<aside id="slides">
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt ="" >
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt="">
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt="">
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt="">
</aside>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.slides.min.js"></script>
<script>
$(function func1() {
$('#slides').slidesjs({
width: 980,
height: 500,
play: {
active: true,
auto: true,
interval: 4500,
swap: true,
pauseOnHover: true
}
});
});
</script>
</section>
<aside id="frontbubbles">
<aside id="shirtswapfront">
<p id="fronttextheader">Shirt Swap!</p>
<ul id="portfolio">
<li>
<a href="">
<img src="img/1.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/2.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/3.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/4.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/5.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/6.jpg" alt="" />
</a>
</li>
</ul>
</aside>
</aside>
</div>
You have two jQuery files included in the same HTML page which is causing the conflict. Try this code.
<!DOCTYPE html>
<head>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Amatic+SC:700' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.slides.min.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('ul#portfolio').innerfade({
speed: 'slow',
timeout: 4000,
type: 'sequence',
containerheight: '500px'
});
$('#slides').slidesjs({
width: 980,
height: 500,
play: {
active: true,
auto: true,
interval: 4500,
swap: true,
pauseOnHover: true
}
});
});
</script>
</head>
<body>
<div id="wholebody">
<section id="slideshow">
<aside id="slides">
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt ="" >
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt="">
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt="">
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt="">
</aside>
</section>
<aside id="frontbubbles">
<aside id="shirtswapfront">
<p id="fronttextheader">Shirt Swap!</p>
<ul id="portfolio">
<li>
<a href="">
<img src="img/1.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/2.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/3.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/4.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/5.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/6.jpg" alt="" />
</a>
</li>
</ul>
</aside>
</aside>
</div>
I have cleaned up your code a little bit... dont use body onload both functions and then define one of the functions later in the code... well here it goes, this worked for me...
$(document).ready(function func2(){
$('ul#portfolio').innerfade({
speed: 'slow',
timeout: 4000,
type: 'sequence',
containerheight: '500px'
});
});
$(document).ready(function func1() {
$('#slides').slidesjs({
width: 980,
height: 500,
play: {
active: true,
auto: true,
interval: 4500,
swap: true,
pauseOnHover: true
}
});
});
<div id="wholebody">
<section id="slideshow">
<aside id="slides">
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt ="" />
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt=""/>
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt=""/>
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt=""/>
</aside>
</section>
<aside id="frontbubbles">
<aside id="shirtswapfront">
<p id="fronttextheader">Shirt Swap!</p>
<ul id="portfolio">
<li>
<a href="">
<img src="http://pancakeparadise.com/img/1.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="http://pancakeparadise.com/img/2.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="http://pancakeparadise.com/img/3.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="http://pancakeparadise.com/img/4.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="http://pancakeparadise.com/img/5.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="http://pancakeparadise.com/img/6.jpg" alt="" />
</a>
</li>
</ul>
</aside>
</aside>
</div>
now add your css and js files in the head like usual... it should work. here is a fiddle link for it as well http://jsfiddle.net/z5yeLq2k/
If you want both of these functions to execute, the easiest way possible is to not put them in separate functions, or to not put them in functions at all. Here is what I mean...
$(document).ready(
$('ul#portfolio').innerfade({
speed: 'slow',
timeout: 4000,
type: 'sequence',
containerheight: '500px'
});
$('#slides').slidesjs({
width: 980,
height: 500,
play: {
active: true,
auto: true,
interval: 4500,
swap: true,
pauseOnHover: true
}
});
);
Outside of functions, as soon as the document.ready executes (once the page is done loading), both of those pieces of code will be executed sequentially.
EDIT: Also, as was said in another answer, you are including jquery twice...don't do that.
Ok, so I have my website which has a div container on the left side which includes my navBar with links. On the right side is another div container which I want content to fade in when a link is clicked. I don't want the whole page to refresh however. I have the code which will do this but it won't work for some reason. It worked on a previous blank html document however. Thanks in advance.
HTML:
<!doctype html>
<html lang="en"><head>
<link rel="stylesheet" type="text/css" href="../styless.css" />
<link rel="stylesheet" type="text/css" href="../images/jquery.fancybox-1.3.4.css" media="screen" />
<link href="../fadeStyle.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="../../../GJDG/js/nav.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="../images/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="../images/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a[rel=example_group]").fancybox({
'overlayColor' : '#000',
'overlayOpacity' : 0.9,
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">' +(title.length ? ' ' + title : '') + '</span>';
}
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "fast");
},
function() {
$(this).stop().animate({"opacity": "1"}, "fast");
});
$("img.c").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "fast");
},
function() {
$(this).stop().animate({"opacity": "1"}, "fast");
});
$("img.e").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "fast");
},
function() {
$(this).stop().animate({"opacity": "1"}, "fast");
});
});
</script>
<style>
body { font-family: Helvetica, Arial, sans-serif; }
.container {
width: 100%; left: 0; right: 0; top:0; bottom: 0; position: fixed; overflow: auto;
background: rgba(16,16,16,0.0);
}
</style>
</head>
<body>
<div class="container">
<div id="menu">
<img style="position:absolute; top:25px; left:50px; width:200px; height:73px" src="../../../Envy1.png">
<div style="position: absolute; top:630px; left:50px; font-size:11px; width:200px; color:#FFF">© 2012 Envy Cosmetics</div>
<div id="navBar">
<font face="abeatbyKai">
<ul id="menu-list">
<li><a class="menu_side" href="../News.html" style="text-decoration: none" id="one">News</a></li>
<li><a class="menu_side" href="../About Us.html" style="text-decoration: none" id="two">About Us</a></li>
<li><a class="menu_side" href="../Gallery.html" style="text-decoration: none" id="three">Gallery</a></li>
<li><a class="menu_side" href="../Affiliates.html" style="text-decoration: none" id="four">Affiliates</a></li>
<li><a class="menu_side" href="../Biography.html" style="text-decoration: none" id="five">Biography</a></li>
<li><a class="menu_side" href="../Contact.html" style="text-decoration: none" id="six">Contact</a></li>
</ul>
</font>
</div>
<div class="fadehover1">
<img src="../../../twitter1.png" alt="" class="a" />
<img src="../../../twitter2.png" alt="" class="b" />
</div>
<div class="fadehover2">
<img src="../../../facebook1.png" alt="" class="c" />
<img src="../../../facebook2.png" alt="" class="d" />
</div>
<div class="fadehover3">
<img src="../../../youtube1.png" alt="" class="e" />
<img src="../../../youtube2.png" alt="" class="f" />
</div>
</div>
<div id="main">
<div id="gallery1">
<a rel="example_group" href="../images/1_b.jpg" title="ENVY!"><img alt="" src="../images/1_s.jpg" /></a>
<a rel="example_group" href="../images/2_b.jpg" title="ENVY!"><img alt="" src="../images/2_s.jpg" /></a>
<a rel="example_group" href="../images/3_b.jpg" title="ENVY!"><img alt="" src="../images/3_s.jpg" /></a>
<a rel="example_group" href="../images/4_b.jpg" title="ENVY!"><img alt="" src="../images/4_s.jpg" /></a>
<a rel="example_group" href="../images/5_b.jpg" title="ENVY!"><img alt="" src="../images/5_s.jpg" /></a>
<a rel="example_group" href="../images/6_b.jpg" title="ENVY!"><img alt="" src="../images/6_s.jpg" /></a><br>
<a rel="example_group" href="../images/7_b.jpg" title="ENVY!"><img alt="" src="../images/7_s.jpg" /></a>
<a rel="example_group" href="../images/8_b.jpg" title="ENVY!"><img alt="" src="../images/8_s.jpg" /></a>
<a rel="example_group" href="../images/9_b.jpg" title="ENVY!"><img alt="" src="../images/9_s.jpg" /></a>
<a rel="example_group" href="../images/10_b.jpg" title="ENVY!"><img alt="" src="../images/10_s.jpg" /></a>
<a rel="example_group" href="../images/11_b.jpg" title="ENVY!"><img alt="" src="../images/11_s.jpg" /></a>
<a rel="example_group" href="../images/12_b.jpg" title="ENVY!"><img alt="" src="../images/12_s.jpg" /></a>
</div>
</div>
</div>
<script src="../jquery.backstretch.min.js"></script>
<script>
$.backstretch("photo1.jpg", {speed: 500});
</script>
<div id="mesh"></div>
nav.js
$(document).ready(function() {
$('#main').load($().attr('href'));
});
$('.menu_side').click(function() {
var href = $(this).attr('href');
$('#main').hide().load(href).fadeIn('fast');
return false;
});
The trick is that the fadeIn needs to occur when the load is successful. It's currently being called before the content has loaded. You need to use the load() method's callback handler argument:
$('.menu_side').click(function() {
var href = $(this).attr('href');
$('#main').hide().load(href, function() { $(this).fadeIn('fast'); });
return false;
});
Will probably do what you want.