I am trying to create a portfolio of cd covers for my music.
Currently my portfolio page loads all of the content within my albums on the initial page load. The content is contained within hidden divs.
When you click on an album, the content scrolls down and closes when it is re-clicked, using .slideToggle(). See site here
My concern is that I want the page to load faster and only content when called upon.
Any help would be greatly appreciated.
I have worked out a test scenario:
<!doctype html>
<html>
<title>jQuery external load test</title>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<style type="text/css">
#container {
width: 80%;
margin: 0 auto;
margin-top:;
}
.albumThumb {
float: left;
position: relative;
margin: 5px;
height: 150px;
width: 150px;
background-color: purple;
}
.albumThumb:hover {
opacity: 0.8;
filter:alpha(opacity=80);
}
.albumContent {
display: none;
width: 100%;
float: left;
position: relative;
padding: 20px;
color: #333;
background-color: #eee;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div id="container">
<!-- Album #1 -->
<div class="albumThumb"></div>
<div class="albumContent"></div>
<script type="text/javascript">
$(document).ready(function() {
$('.albumThumb').click(function() {
// Name content variable
var album = 'album-page';
var url = 'http://mysite.com/' + album + ' #project-info';
var content = $(this).nextAll('.albumContent:first');
// Load/Unload div content
if (content.is(':visible')) {
content.slideUp(500);
content.html('');
} else {
content.text('Loading...', function() {
content.load(url).content.slideDown(500);
});
}
});
});
</script>
<!-- Album #2 -->
<div class="albumThumb"></div>
<div class="albumContent"></div>
<script type="text/javascript">
$(document).ready(function() {
$('.albumThumb').click(function() {
// Name content variable
var album = 'album-page';
var url = 'http://mysite.com/' + album + ' #project-info';
var content = $(this).nextAll('.albumContent:first');
// Load/Unload div content
if (content.is(':visible')) {
content.slideUp(500);
content.html('');
} else {
content.text('Loading...', function() {
content.load(url).content.slideDown(500);
});
}
});
});
</script>
</div>
<!-- End Container -->
</body>
</html>
Well, I found a solution. It did take quite a bit of fiddling and mattytommo's answer put me on the right track. So, thanks again matty.
I ended up writing one function() and passing a variable name change from the html to the jQuery function, using an onClick event, Here is the new script:
<script type="text/javascript">
$(function albumSlider() {
$('.albumThumb').on("click", function() {
// Name content variables
// var album = *Gets content from html "onClick"
var url = 'http://mysite.com/' + album;
var thisAlbum = $(this);
var content = thisAlbum.nextAll('.albumContent:first');
// Load/Unload div content
if (thisAlbum.hasClass('.selected')) {
thisAlbum.removeClass('.selected');
content.slideUp(500, function() {
content.html('');
});
} else {
thisAlbum.addClass('.selected');
content.slideDown(500, function() {
content.text('Loading...').load(url);
});
}
});
});
</script>
I used .hasClass(), ,addClass(), and .removeClass() within my if/else statement - as if to say: "If the album that I clicked on already has the class .selected, then it's contents must be open and visible. So, remove the .selected class and close the div.albumContent that follows divAlbumThumb that was clicked. Otherwise, if the album that I clicked does not have a class of .selected, then it must not be open. Therefore, add the class .selected to the album I clicked on and open the following albumContent div."
Next, I simplified the html, using it to pass the external album contents(html) to the div.albumContent following the div.albumThumb that was selected:
<body>
<div id="container">
<!-- Album 1 -->
<div class="albumThumb" onClick="javascript:album = 'album-1';"></div>
<div class="albumContent"></div>
<!-- Album 2 -->
<div class="albumThumb" onClick="javascript:album = 'album-2';"></div>
<div class="albumContent"></div>
</div><!-- End Container -->
</body>
album-1 and album-2 now are passed in the "var album = '';" within the javascript function.