Results 1 to 3 of 3

Thread: I want to show the image title in this javascript

  1. #1
    Join Date
    Oct 2009
    Location
    New York
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Red face I want to show the image title in this javascript

    http://dabrook.org/blog/product-imag...query-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?

  2. #2
    Join Date
    Jun 2011
    Location
    Pearl of the East
    Posts
    53
    Thanks
    1
    Thanked 2 Times in 2 Posts

    Default

    where do you want it to show?

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,772
    Thanks
    2
    Thanked 410 Times in 405 Posts

    Default

    if you view the demo source code you will see the caption element and modified code

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •