I have created a script for my portfolio that is functional but I want to streamline it so that I only need to edit the HTML, not the script itself.
The main requirements for the code are:
- Count the number of
<img>tags within the element with id#thumbs - Retrieve the
SRCfrom the thumbnail image or theHREFif available from an anchor tag around the thumbnail - Store either the modified
SRC(with "_sm" removed) or theHREFin a variable
Once these variables are set up, I believe I can easily make the script fully functional. However, I am unsure of how to get the script to read this information and dynamically adjust based on it.
Below is the current code snippet:
<script type="text/javascript">
$(document).ready(function() {
// last clicked thumbnail
var last = "idthisperson";
// variables assigned based on IDs
var graphic01 = "idthisperson";
var graphic02 = "leo";
var graphic03 = "water-fire";
// test counting img tags within #thumbs
var n = $("#thumbs img").length;
alert(n);
// separate functions for each img ID click event
$("#" + graphic01).click(function() {
if(last != graphic01) {
$("#placeholder").before( "<img src=\"gallery/" + graphic01 + ".jpg\" />" );
$("#mask").css("marginTop","-=450px");
last = graphic01;
}
});
$("#" + graphic02).click(function() {
if(last != graphic02) {
$("#placeholder").before( "<img src=\"gallery/" + graphic02 + ".jpg\" />" );
$("#mask").css("marginTop","-=450px");
last = graphic02;
}
});
$("#" + graphic03).click(function() {
if(last != graphic03) {
$("#placeholder").before( "<img src=\"gallery/" + graphic03 + ".jpg\" />" );
$("#mask").css("marginTop","-=450px");
last = graphic03;
}
});
});
</script>
And here is the accompanying HTML:
<section id="portfolio">
<section id="mask">
<img src="gallery/idthisperson.jpg" />
<div id="placeholder"></div>
</section><!--/#mask-->
</section><!--/#portfolio-->
<section id="thumbs">
<a href="gallery/idthisperson.jpg"><img id="idthisperson" src="gallery/idthisperson_sm.jpg" /></a>
<a href="gallery/leo.jpg"><img id="leo" src="gallery/leo_sm.jpg" /></a>
<a href="galelry/water-fire.jpg"><img id="water-fire" src="gallery/water-fire_sm.jpg" /></a>
<a href="gallery/idthisperson.jpg"><img src="gallery/idthisperson_sm.jpg" /></a>
</section><!--/#thumbs-->
Additional Notes:
Live demo:
How can I utilize the transitionend JavaScript event to ensure my CSS3 transition completes before triggering the next thumbnail click?
For complete code details, best to view the source of the live demo.