Jump to content
Uncle Stef's Forums are now in the Clubs - July 2025.

Jquery: Help with photogallery

Guest JayGee

By Guest JayGee
in Beginners Web Design

 Share

Recommended Posts

Guest JayGee

Guest JayGee

Posted
Posted

Hi,

 

I am new to web development and would love it if someone wouldn't mind pointing out my novice mistake I've made somewhere in here.. (pffttt!)

 

Basically, my larger photo isn't showing up --- something is wrong with my jquery.

 

Without the jquery my gallery was working fine (click on thumbnail, generate larger image in new browser window). Here is the code below. Thanks for your help!

 

HMTL FILE:

 

<!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>Untitled Document</title>

<link href="gallery.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="jquery-1.6.min.js"></script>

<script type="text/javascript" src="gallery.js"></script>

</head>

 

<body>

 

<div class="page_container">

<div class="gallery_credit">

<h1>Bumble Bee Cottage // Kelleys Island</h1>

</div>

<div class="gallery_type">

<h2>// Photogallery </h2>

</div>

<div class="clear_both"></div>

<div class="gallery_top"></div>

<div class="gallery_content"></div>

<div class="gallery_thumnails">

<a href="../Images/kitchenL.jpg" title="Bumble Bee Kitchen"><img src="../Images/kitchenT.jpg" width="100" height="66" alt="kitchen" /></a>

<a href="../Images/diningL.jpg" title="Bumble Bee Dining Room"><img src="../Images/diningT.jpg" width="100" height="66" alt="dining room" /></a>

<a href="../Images/frontroomL.jpg" title="Bumble Bee Family Room"><img src="../Images/frontroomT.jpg" width="100" height="66" alt="front room" /></a>

<a href="../Images/backroomL.jpg" title="Bumble Bee Family Room"><img src="../Images/backroomT.jpg" width="100" height="66" alt="back room" /></a>

<a href="../Images/bedroom1L.jpg" title="Bumble Bee Bedroom #1"><img src="../Images/bedroom1T.jpg" width="100" height="66" alt="bedroom #1" /></a>

<a href="../Images/bedroom2L.jpg" title="Bumble Bee Bedroom #2"><img src="../Images/bedroom2T.jpg" width="100" height="66" alt="bedroom #2" /></a>

<a href="../Images/bedroom3L.jpg" title="Bumble Bee Bedroom #3"><img src="../Images/bedroom3T.jpg" width="100" height="66" alt="bedroom #3" /></a>

<a href="../Images/bathL.jpg" title="Bumble Bee Bathroom #1"><img src="../Images/bathT.jpg" width="100" height="66" alt="bathroom #1" /></a>

<a href="../Images/frontL.jpg" title="Bumble Bee Cottage"><img src="../Images/front.jpg" width="100" height="66" alt="House" /></a>

<div class="clear_both"></div>

</div>

<div class="gallery_preview"></div>

<div class="clear_both"></div>

<div class="gallery_contact">text</div>

<div class="gallery_caption">text</div>

<div class="clear_both"></div>

<div class="gallery_preload_area"></div>

</div>

<div class="gallery_bottom">

</div>

 

 

 

</body>

 

 

 

</html>

 

 

CSS FILE:

 

@charset "UTF-8";

/* CSS Document */

 

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

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;

text-align: right;

}

.gallery_top {

background-image: url(../Images/images/images/images/images/TOPpage_02_02_02_02.jpg);

margin: 0px;

padding: 0px;

height: 25px;

background-repeat: no-repeat;

background-position: 0px 0px;

}

.gallery_content {

background-image: url(../Images/images/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_thumnails {

padding: 0px;

float: left;

width: 500px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

margin-left: 40px;

 

}

.gallery_preview {

margin: 0px;

padding: 0px;

float: left;

height: 375px;

width: 375px;

}

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

}

 

body {

background-color: #000;

font-family: Arial, Helvetica, sans-serif;

font-size: .75em;

color: #FFF;

}

h1 {

font-size: 1.75em;

font-weight: normal;

letter-spacing: 2px;

margin: 0px;

padding: 0px;

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

}

h2 {

letter-spacing: 5px;

margin: 0px;

padding: 0px;

font-size: 1.25em;

font-weight: normal;

text-transform: uppercase;

color: #CCC;

}

a img {

border-top-style: none;

border-right-style: none;

border-bottom-style: none;

border-left-style: none;

}

.gallery_thumnails a {

display: block;

float: left;

height: 66px;

width: 100px;

border: 3px solid #999;

padding: 0px;

margin-top: 0px;

margin-right: 20px;

margin-bottom: 20px;

margin-left: 0px;

}

.gallery_thumnails a:hover {

border-top-color: #FFF;

border-right-color: #FFF;

border-bottom-color: #FFF;

border-left-color: #FFF;

}

.gallery_thumnails a.selected {

border-top-color: #FFF;

border-right-color: #FFF;

border-bottom-color: #FFF;

border-left-color: #FFF;

}

 

.gallery_bottom {

background-image: url(../Images/images/TOPpage_02.jpg);

background-repeat: no-repeat;

background-position: 0px 0px;

margin: 0px;

padding: 0px;

width: 20px;

}

 

.clear_both {

line-height: 1px;

clear: both;

}

 

.gallery_preview a {

display: block;

margin: 0px;

padding: 0px;

height: 375px;

width: 375px;

border: 3px solid #CCC;

}

.gallery_preview a:hover {

border-top-color: #FFF;

border-right-color: #FFF;

border-bottom-color: #FFF;

border-left-color: #FFF;

}

 

Jquery FILE:

// JavaScript Document

 

$(document).ready(function() {

 

 

$('.gallery_thumnails a').click(function(e){

 

e.preventDefault();

 

$('.gallery_thumnails a').removeClass('selected');

$('.gallery_thumnails a').children().css('opacity', '1');

 

$(this).addClass('selected');

$(this).children().css('opacity', '.4');

 

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_fulsize+'" title="'+photo_caption+'" style="background-image:url('+photo_preview+')"></a>');

$('.gallery_caption').html('<p><a href="'+ photo_fullsize+'" title="'+photo_caption+'"><View Larger></a></p><p>'+photo_caption+'</p>');

 

 

 

});

 

 

});

 

 

Thanks in advance for your help! Also, any insight as to why I wasn't "permitted to upload this kind of file"? Sorry for the ridiculously long post..

falkencreative Newbie

falkencreative

Posted
Posted

After glancing over your code, I'm not really noticing any significant issues... Besides a weird naming structure, like having multiple nested "image" folders:

 

background-image: url(../Images/images/images/images/images/TOPpage_02_02_02_02.jpg);

 

Do you have a link to these files somewhere? It's a bit hard to troubleshoot this without being able to see it with the images in place. It's possible that the jquery is actually working fine, so there are no actual errors, but it isn't doing what you had in mind.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...