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

12-28-2011, 02:12 AM

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

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

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

<!DOCTYPE html>
<title>Product Image Switcher Demo - DaBrook Webucation</title>
<link href="main.css" rel="stylesheet">
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;
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
$(document).ready(function() {
$("aside.preview nav").show();
var previewImg = $("img#main");
var imgTitle = $("nav img:first-child").attr("title");

$("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)
opacity: 0.8,
}, 300, function() {
if(imgTitle != "") $(".caption").html(imgTitle);
previewImg.attr("src", linkHref);
previewImg.attr("alt", linkAlt);
opacity: 1,
}, 300
return false;

<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>
<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>

<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>

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