JavaScript Jquery image gallery problem

Page 1 of 1

0 Replies - 1002 Views - Last Post: 26 January 2013 - 07:51 AM

#1 kevinb4940  Icon User is offline

  • New D.I.C Head

Reputation: 3
  • View blog
  • Posts: 45
  • Joined: 08-October 12

JavaScript Jquery image gallery problem

Posted 26 January 2013 - 07:51 AM

Hello

I am trying to get my image gallery working properly

I am trying to the thumbnail image to appear in the preview box on the right.

Could someone help me please?

Attached are 6 images and Include folder with css & js files and an index.html file

It's something pretty simple I am overlooking but I just cannot put my finger on it.

Thanks

I am having trouble uploading the files so I will post them here

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lynda Image Gallery</title>
<link href="includes/gallery.css" rel="stylesheet" type="text/css" /><!-- Format/CSS Styles/Attach CSS-->
<script type ="text/javascript" src ="includes/jquery-1.5.min.js"></script>
<script type ="text/javascript" src ="includes/gallery.js"></script>
</head>

<body>
<div class="page_container"> <!-- Parent of all div content -->
    	<!-- Create Children -->
    	<div class="gallery_credit">
    	  <h1>Kevin Blakely</h1>
    	</div>
        <div class="gallery_type">
          <h2>Photography</h2>
        </div>
        <div class="clear_both"></div>
        <div class="gallery_top"></div>
        <div class="gallery_content"><!-- Parent for gallery content | The main Gallery thumbs and Preview images-->
		
        	<div class="gallery_thumbnails"> 
            
            <a href="images/gallery/acrobats_fullsize.jpg" title ='Caption goes here for Acrobats'>
            <img src="images/gallery/acrobats_thumbnail.jpg" width="75" height="75" alt="Acrobats" /></a>
            
            <a href="images/gallery/refraction_fullsize.jpg" title ='Caption for refraction goes here'>
            <img src="images/gallery/refraction_thumbnail.jpg" width="75" height="75" alt="Acrobats" /></a>
           	<div class="clear_both"></div>
         	</div>
            
            <div class="gallery_preview">
            	Img
            </div>
            <div class="clear_both"></div>
        	<div class="gallery_contact">Gallery Contact</div>
        	<div class="gallery_caption">Gallery Caption</div>
            <div class="clear_both"></div>
            <div class = "gallery_preload_area"></div>
        </div><!-- end of gallery content dvi-->
        <div class="gallery_bottom">Bottom</div>
        
</div> <!--End of page  container-->
</body>
</html>




@charset "UTF-8";
.page_container {
	padding: 0px;
	width: 960px;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
.gallery_credit {
	padding: 0px;
	float: left;
	width: 425px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 15px;
}
.gallery_type {
	text-align: right;
	float: left;
	width: 500px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	padding-top: 4px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.gallery_top {
	background-image: url(../images/template/page_top.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	margin: 0px;
	padding: 0px;
	height: 20px;
}
.gallery_content {
	background-image: url(../images/template/page_tile.jpg);
	background-repeat: repeat-y;
	background-position: 0px 0px;
	margin: 0px;
	padding-top: 15px;
	padding-right: 0px;
	padding-bottom: 1px;
	padding-left: 0px;
}
.gallery_bottom {
	background-image: url(../images/template/page_bottom.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	height: 20px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 20px;
}
h1 {
	font-size: 1.75em;
	font-weight: normal;
	color: #FFF;
	letter-spacing: 2px;
	margin: 0px;
	padding: 0px;
}
h2 {
	font-size: 1.25em;
	font-weight: normal;
	text-transform: uppercase;
	color: #999;
	letter-spacing: 23px;
	margin: 0px;
	padding: 0px;
}
a img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.gallery_thumbnails a {
	display: block;
	padding: 0px;
	float: left;
	height: 75px;
	width: 75px;
	margin-top: 0px;
	margin-right: 23px;
	margin-bottom: 23px;
	margin-left: 0px;
	border: 1px solid #999;
}
.gallery_thumbnails a:hover {
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
	border-left-color: #FFF;
}
.gallery_thumbnails a.selected {
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
	border-left-color: #FFF;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: .75em;
	color: #FFF;
	background-color: #000;
}

.clear_both {
	line-height: 1px;
	clear: both;
}
.gallery_thumbnails {
	padding: 0px;
	float: left;
	width: 500px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 40px;
}
.gallery_preview {
	margin: 0px;
	padding: 0px;
	height: 375px;
	width: 375px;
	float: left;
}
.gallery_preview a {
	display: block;
	height: 375px;
	width: 375px;
	border: 1px solid #CCC;
}
.gallery_preview a:hover {
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
	border-left-color: #FFF;
}

.gallery_contact {
	float: left;
	height: 60px;
	width: 477px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 40px;
	padding-top: 0px;
	padding-right: 23px;
	padding-bottom: 0px;
	padding-left: 0px;
	text-align: right;
}
.gallery_caption {

	margin: 0px;
	padding: 0px;
	float: left;
	width: 375px;
}




@charset "UTF-8";
.page_container {
	padding: 0px;
	width: 960px;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
.gallery_credit {
	padding: 0px;
	float: left;
	width: 425px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 15px;
}
.gallery_type {
	text-align: right;
	float: left;
	width: 500px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	padding-top: 4px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.gallery_top {
	background-image: url(../images/template/page_top.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	margin: 0px;
	padding: 0px;
	height: 20px;
}
.gallery_content {
	background-image: url(../images/template/page_tile.jpg);
	background-repeat: repeat-y;
	background-position: 0px 0px;
	margin: 0px;
	padding-top: 15px;
	padding-right: 0px;
	padding-bottom: 1px;
	padding-left: 0px;
}
.gallery_bottom {
	background-image: url(../images/template/page_bottom.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	height: 20px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 20px;
}
h1 {
	font-size: 1.75em;
	font-weight: normal;
	color: #FFF;
	letter-spacing: 2px;
	margin: 0px;
	padding: 0px;
}
h2 {
	font-size: 1.25em;
	font-weight: normal;
	text-transform: uppercase;
	color: #999;
	letter-spacing: 23px;
	margin: 0px;
	padding: 0px;
}
a img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.gallery_thumbnails a {
	display: block;
	padding: 0px;
	float: left;
	height: 75px;
	width: 75px;
	margin-top: 0px;
	margin-right: 23px;
	margin-bottom: 23px;
	margin-left: 0px;
	border: 1px solid #999;
}
.gallery_thumbnails a:hover {
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
	border-left-color: #FFF;
}
.gallery_thumbnails a.selected {
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
	border-left-color: #FFF;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: .75em;
	color: #FFF;
	background-color: #000;
}

.clear_both {
	line-height: 1px;
	clear: both;
}
.gallery_thumbnails {
	padding: 0px;
	float: left;
	width: 500px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 40px;
}
.gallery_preview {
	margin: 0px;
	padding: 0px;
	height: 375px;
	width: 375px;
	float: left;
}
.gallery_preview a {
	display: block;
	height: 375px;
	width: 375px;
	border: 1px solid #CCC;
}
.gallery_preview a:hover {
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
	border-left-color: #FFF;
}

.gallery_contact {
	float: left;
	height: 60px;
	width: 477px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 40px;
	padding-top: 0px;
	padding-right: 23px;
	padding-bottom: 0px;
	padding-left: 0px;
	text-align: right;
}
.gallery_caption {

	margin: 0px;
	padding: 0px;
	float: left;
	width: 375px;
}


The Jquery file is named jquery-1.5.min.js

images are

acrobats_fullsize.jpg
acrobats_preview.jpg
acrobats_preview.jpg
and
acrobats_preview.jpg
refraction_preview
refraction_thumbnail

// Javascript Document

$(document).ready(function(){ //everthing in here runs when jquery has downloaded all the html in the page
	
	// target all the anchor tags
	$('.gallery_thumbnails a').click(function(e){ //click event to all of the a anchor tags (e) parameter captures the click event
	e.preventDefault(); //ignore the default behaviour on an anchor link
	
	//set the states of the thumbnails
	$('.gallery_thumbnails a').removeClass('selected'); 
	$('.gallery_thumbnails a').children().css('opacity', '1');//add css properties
	//children is the img tag inside the anchor tag with an opacity of 1
	//a href is the parent | img is the child
	
	$(this).addClass('selected');
	$(this).children().css('opacity','.4'); //.4 is 40& opacity

	var photo_caption = $(this).attr('title');
	var photo_fullsize = $(this).attr('href');
	var photo_preview = photo_fullsize.replace('_fullsize', '_preview');
	
	$('.gallery_preview').html('<a href="'+photo_fullsize+'" title="'+photo_caption+'" style="backgroud-image:url('+photo_preview+');"></a>');
	});
});


Is This A Good Question/Topic? 0
  • +
Page 1 of 1