PDA

View Full Version : I want to show the image title in this javascript



rekk
12-28-2011, 02:12 AM
http://dabrook.org/blog/product-image-switcher-with-jquery-tutorial

I found this awesome tutorial that works really well for my purposes. I'd like to modify it to show the image title.

Do you know how to do that?:o

regicidedelferoz
01-03-2012, 07:00 AM
where do you want it to show?

vwphillips
01-03-2012, 11:38 AM
if you view the demo source code you will see the caption element and modified code


<!DOCTYPE html>
<header>
<title>Product Image Switcher Demo - DaBrook Webucation</title>
<link href="main.css" rel="stylesheet">
<style>
img#main {
border: 1px #ccc solid;
padding: 2px;
margin: 10px;
}
p.caption {
text-align: center;
margin: 5px 0;
padding: 0;
}
nav {
display: none;
margin: 0 10px;
}
nav a {
border: 1px #ccc solid;
padding: 2px 2px 0;
display: block;
float: left;
margin: 2px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
nav a:first-child {
margin-left: 0;
}
nav a:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);
}
nav a.active {
background: #FEFFC0;
border-color: #ECD95C;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script>
$(document).ready(function() {
$("aside.preview nav").show();
var previewImg = $("img#main");
var imgTitle = $("nav img:first-child").attr("title");
console.log(imgTitle);

$("a:first").addClass("active");
$(".caption").html(imgTitle);
$("nav a img").click(function(){
imgTitle = $(this).attr("title");
var link = $(this).parent();
var linkHref = link.attr("href");
var linkAlt = link.attr("alt");
if( $(link).hasClass("active") == false)
{
$("a").removeClass("active");
link.addClass("active");
$(previewImg).animate({
opacity: 0.8,
}, 300, function() {
if(imgTitle != "") $(".caption").html(imgTitle);
previewImg.attr("src", linkHref);
previewImg.attr("alt", linkAlt);
$(this).animate({
opacity: 1,
}, 300
);
});
}
return false;
});
$("input").click(function(){
$("p.more").fadeIn("slow");
})
});
</script>
</header>

<body>
<article class="item">
<h1>Custom Chucks</h1>
<aside class="preview">
<img id="main" src="images/shoe-inside.png" width="300" height="220" alt="Alt title of image">
<p class="caption"></p>
<nav>
<a href="images/shoe-inside.png"><img src="images/shoe-inside.png" title="Inside" width="100" height="73" title="" alt="Side of the shoe"></a>
<a href="images/shoe-front.png"><img src="images/shoe-front.png" title="Front" width="91" height="73" alt="Front of the shoe"></a>
<a href="images/shoe-back.png"><img src="images/shoe-back.png" title="Back" width="91" height="73" alt="Back of the shoe"></a>
</nav>

</aside>
<p>Check out these rad shoes I built with Converse's online builder.</p>
<p>I really just built them to demonstrate how the produce image viewer could be used, but I would definitely wear these shoes.</p>
<p>If these were for sale we'd have a button like this: <input type="submit" value="$67.00 Buy"></p>
<p class="more">If you really want to buy these shoes, <a href="https://www.converse.com/#/products/shoes/converseone/builder/chuTayOxCanNeo1002,,,251218984">you can</a>.</p>
</article>

<section class="source">
<p>Return to the <a href="http://dabrk.co/image-switcher-tutorial">Product Image Switcher with jQuery Tutorial</a></p>
</section>
</body>