I am working on website and i have this code:
http://liveweave.com/KDPgcO
It shows a menu that displays some content when a url is clicked, That is what i want but the only thing is that i need that one choice is selected or displayed by default:
So when the page loads that javascript must show the first choice on the menu by default.
the code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="pages_about" class="textContainer_about">
<div class="textWord_about" data-link="first">
<img src="../images/fondo1.png" alt="" height="" width="800"/>
</div>
<div class="textWord_about" data-link="second">
<img src="../images/fondo2.png" alt="" height="" width="800"/>
</div>
<div class="textWord_about" data-link="third">
<img src="../images/fondo3.png" alt="" height="" width="800"/>
</div>
<div class="textWord_about" data-link="fourth">
<img src="../images/fondo4.png" alt="" height="" width="800"/>
</div>
<CENTER>
<div id="menu_about">
<a class="link" href="#about" data-link="first"><img src="../images/edif.png" alt="" height="" width="65"/></a>
<a class="link" href="#about" data-link="second"><img src="../images/admininver.png" alt="" height="" width="65"/></a>
<a class="link" href="#about" data-link="third"><img src="../images/finan.png" alt="" height="" width="60"/></a>
<a class="link" href="#about" data-link="fourth"><img src="../images/inmo.png" alt="" height="" width="60"/></a>
</div>
</CENTER>
</div>
</div>
<script type="text/javascript">
$('.textWord_about').hide();
$('.link').click(function() {
$('.textWord_about').hide();
$('.textWord_about[data-link=' + $(this).data('link') + ']').fadeIn({
width: '200px'
}, 300);
});
</script>
Thanks for any comments that you can provide.
You could trigger click on the first link:
<script type="text/javascript">
$('.textWord_about').hide();
$('.link').click(function() {
$('.textWord_about').hide();
$('.textWord_about[data-link=' + $(this).data('link') + ']').fadeIn({
width: '200px'
}, 300);
}).first().trigger('click');
</script>
Related
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>
I have this code:
$('.myClass')[0].src += "somethinghere";
And I also have multiple Div's with myClass.
How can I have the [0] to by relevant to the selected Div?
For example:
$('.myClass')[this].src += "somethinghere";
Here is the js:
$(document).ready(function() {
$(document).on("mouseover",".myClass",function(){
//code here
});
});
The HTML is :
<div>
<a class="myLinkClass" href="" target="_blank">Hover Here</a>
<div class="box">
<iframe class="myIframeClass" width="260" height="150" src="" frameborder="0"></iframe>
</div>
</div>
<div>
<a class="myLinkClass" href="" target="_blank">Hover Here</a>
<div class="box">
<iframe class="myIframeClass" width="260" height="150" src="" frameborder="0"></iframe>
</div>
</div>
<div>
<a class="myLinkClass" href="" target="_blank">Hover Here</a>
<div class="box">
<iframe class="myIframeClass" width="260" height="150" src="" frameborder="0"></iframe>
</div>
</div>
What seems to work everytime is:
$('.myIframeClass')[0].src += "something";
but it will only work for the first iframe and not for the others
You could use the this directly
update: after the updated answer (with the real html) it turns out you need to use the closest method to find the container div and then the .find to locate the actual iframe
$(document).ready(function() {
$(document).on("mouseover", ".myLinkClass", function() {
var iframe = $(this).closest('div').find('iframe').get(0);
iframe.src += 'something%20';
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<a class="myLinkClass" href="" target="_blank">Hover Here</a>
<div class="box">
<iframe class="myIframeClass" width="260" height="150" src="http://urlecho.appspot.com/echo?body=frame-1" frameborder="0"></iframe>
</div>
</div>
<div>
<a class="myLinkClass" href="" target="_blank">Hover Here</a>
<div class="box">
<iframe class="myIframeClass" width="260" height="150" src="http://urlecho.appspot.com/echo?body=frame-2" frameborder="0"></iframe>
</div>
</div>
<div>
<a class="myLinkClass" href="" target="_blank">Hover Here</a>
<div class="box">
<iframe class="myIframeClass" width="260" height="150" src="http://urlecho.appspot.com/echo?body=frame-3" frameborder="0"></iframe>
</div>
</div>
Keep in mind that div elements do not have a src property.
If they are indeed div elements you might want to use the .attr method instead.
$(document).ready(function() {
$(document).on("mouseover",".myClass",function() {
var element = $(this),
currentSrc = $(this).attr('src');
element.attr('src', currentSrc + 'something');
});
});
I make a slider.and work perfect but the title of each image do not show below.please see my code :
my Html code is
<div id="jDesign_slider">
<div id="jDesign">
<div id="jDesign_nav"> <a rel="img1" href="javascript:;"><img src="http://localhost/wordpress/wp-content/uploads/2014/10/Tulips3.jpg" /></a>
<a rel="img2" href="javascript:;"><img src="http://localhost/wordpress/wp-content/uploads/2014/10/Desert2.jpg" /></a>
<a rel="img3" href="javascript:;"><img src="http://localhost/wordpress/wp-content/uploads/2014/10/Chrysanthemum3.jpg" /></a>
</div>
<div id="jDesign_output">
<img id="img1" src="http://localhost/wordpress/wp-content/uploads/2014/10/Tulips3.jpg" />
<h3>title1</h3>
<img id="img2" src="http://localhost/wordpress/wp-content/uploads/2014/10/Desert2.jpg" />
<h3>title2</h3>
<img id="img3" src="http://localhost/wordpress/wp-content/uploads/2014/10/Chrysanthemum3.jpg" />
<h3>title3</h3>
</div>
<div class="clear"></div>
</div>
</div>
my Jquery code is
<script language="javascript">
$(document).ready(function() {
$("#jDesign_output img").not(":first").hide();
$("#jDesign_output h3").not(":first").hide();
$("#jDesign a").click(function() {
if ( $("#" + this.rel).is(":hidden") ) {
$("#jDesign_output img").fadeOut();
$("#jDesign_output h3").fadeOut();
$("#" + this.rel).fadeIn();
}
});
});
</script>
The jQuery:
$(document).ready(function() {
// $("#jDesign_output img").not(":first").hide();
// $("#jDesign_output h3").not(":first").hide();
$("#jDesign_output div").not(":first").hide();
$("#jDesign a").click(function() {
if ( $("#" + this.rel).is(":hidden") ) {
// $("#jDesign_output img").fadeOut(100);
// $("#jDesign_output h3").fadeOut(100);
$("#jDesign_output div").hide(100);
//$("#" + this.rel).find('img').fadeIn(1000);
$("#" + this.rel).fadeIn(1000);
}
});
});
The HTML:
<div id="jDesign_slider">
<div id="jDesign">
<div id="jDesign_nav">
<a rel="img1" href="javascript:void(0);"><img src="image/page1_pic1.jpg" /></a>
<a rel="img2" href="javascript:void(0);"><img src="image/page1_pic2.jpg" /></a>
<a rel="img3" href="javascript:void(0);"><img src="image/page1_pic4.jpg" /></a>
</div>
<div id="jDesign_output">
<div id="img1">
<img src="image/page1_pic1.jpg" />
<h3>title1</h3>
</div>
<div id="img2">
<img src="image/page1_pic2.jpg" />
<h3>title2</h3>
</div>
<div id="img3">
<img src="image/page1_pic4.jpg" />
<h3>title3</h3>
</div>
</div>
<div class="clear"></div>
</div>
</div>
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.