...
PDA

Link Recognition

Novice08
01-30-2012, 12:38 AM
So I'm having some problems with getting these links to recognize in Safari and Firefox. Oddly in IE they work fine. The bottom link 'Design' works but the top two do not work when I view in Safari or Firefox. Any help would be greatly appreciated.

The link: <a href="images/arcpine.png" rel="shadowbox[Photography]"> <img src="images/photography.png" border="0" /></a>

is supposed to open up a shadowbox gallery and is not working at all.

Then the following shadowbox starter link isn't working either: <a href="images/Aerosmith-Sketch.png" rel="shadowbox[Sketch]"><img src="images/sketches.png" border="0" /> </a>

I'm very new to coding so any advice is a huge help to me!


<!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" />
<link type="text/css" rel="stylesheet" href="stylesheets/stylesheet.css"/>
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

<title>Pavao Design</title>
</head>

<body>

<div id="wrapper">

<div id="mastHead">
<img src="images/mastHead.png" alt="gear productions" width="--" height="--"/>
</div>


<div id="navigation">
<ol>
<li><a href="index.html">HOME</a></li>

<li><a href="gallery.html">GALLERY</a></li>
<li><a href="contact.html">CONTACT</a></li>
<li><a href="images/resume-idea2.jpg" target="_blank">RESUME</a></li>

</ol>
</div>


<div id="content">

<div class="gallerycontainer">

<a href="images/arcpine.png" rel="shadowbox[Photography]"> <img src="images/photography.png" border="0" /></a>
<a href="images/frozen-world.png" rel="shadowbox[Photography]"> </a>
<a href="images/icicle-snonose2.png" rel="shadowbox[Photography]"> </a>
<a href="images/wintah.png" rel="shadowbox[Photography]"> </a>
<a href="images/pineyoak.png" rel="shadowbox[Photography]"> </a>
<a href="images/snowForest.png" rel="shadowbox[Photography]"> </a>
<a href="images/SimmonsSTBW2.png" rel="shadowbox[Photography]"> </a>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<a href="images/Aerosmith-Sketch.png" rel="shadowbox[Sketch]"><img src="images/sketches.png" border="0" /> </a>
<a href="images/andalusian-Sketch.png" rel="shadowbox[Sketch]"> </a>
<a href="images/Billie-Joe-Sketch.png" rel="shadowbox[Sketch]"> </a>
<a href="images/Spiderman-Sketch.png" rel="shadowbox[Sketch]"> </a>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<a href="images/book-cover-4.jpg" rel="shadowbox[Design]"><img src="images/design.png" border="0" /> </a>
<a href="images/final-green-layout-LOW.jpg" rel="shadowbox[Design]"> </a>
<a href="images/final-yellow-layout-LOW.jpg" rel="shadowbox[Design]"> </a>
<a href="images/generation-citizen-web.jpg" rel="shadowbox[Design]"> </a>
<a href="images/generation-citizenflyergrid2-rgb.jpg" rel="shadowbox[Design]"> </a>
<a href="images/generation-flyer2-s-rgb.jpg" rel="shadowbox[Design]"> </a>
<a href="images/generation-flyer3-rgb.jpg" rel="shadowbox[Design]"> </a>
<a href="images/generation-flyer5-rgb.jpg" rel="shadowbox[Design]"> </a>
<a href="images/generation-flyer6-rgb.jpg" rel="shadowbox[Design]"> </a>
<a href="images/kosmic-kicks.jpg" rel="shadowbox[Design]"> </a>
<a href="images/tapa-academy.jpg" rel="shadowbox[Design]"> </a>
<a href="images/tapalogo8.pdf" rel="shadowbox[Design]"> </a>
<a href="images/trinity-businesscard2.jpg" rel="shadowbox[Design]"> </a>
<a href="images/Tiger-Dollar-Bill-Front.pdf" rel="shadowbox[Design]"> </a>
<a href="images/Tiger-Dollar-Bill-Reverse.pdf" rel="shadowbox[Design]"> </a>
<a href="images/lost-dvd-j-copy.jpg" rel="shadowbox[Design]"> </a>
<a href="images/Magazine-Cover-grey-copy.jpg" rel="shadowbox[Design]"> </a>
<a href="images/wgb-logo.jpg" rel="shadowbox[Design]"> </a>
<a href="images/sunrok-logo.jpg" rel="shadowbox[Design]"> </a>




</div>


</div>



<div id="right">


<div id="deviantArt" style="margin-top:-845px;" >
<a href="http://rainingtragedy.deviantart.com/"><img src="images/deviantArt.png" height="120px" width="120px" border="0"/></a>
</div>

<br/>

<div id="facebook">
<a href="http://www.facebook.com/krista.pavao"><img src="images/facebook.png" height="120px" width="120px"border="0"/></a>
</div>

<br/>



<div id="flickr">
<!-- Start of Flickr Badge ---------------------------------->

<style type="text/css">
.zg_div {margin:0px 5px 5px 0px; width:117px;}
.zg_div_inner {border: solid 1px #898989; background-color:#898989; color:#000000; text-align:center; font-family:arial, helvetica; font-size:11px;}
.zg_div a, .zg_div a:hover, .zg_div a:visited {color:#000000; background:inherit !important; text-decoration:none !important;}
</style>
<script type="text/javascript">
zg_insert_badge = function() {
var zg_bg_color = '898989';
var zgi_url = 'http://www.flickr.com/apps/badge/badge_iframe.gne?zg_bg_color='+zg_bg_color+'&zg_person_id=23144957%40N08';
document.write('<iframe style="background-color:#'+zg_bg_color+'; border-color:#'+zg_bg_color+'; border:none;" width="113" height="151" frameborder="0" scrolling="no" src="'+
zgi_url+'" title="Flickr Badge"><\/iframe>');
if (document.getElementById) document.write('<div id="zg_whatlink"><a href="http://www.flickr.com/badge.gne" style="color:#000000;" onclick="zg_toggleWhat(); return false;"> What is this?<\/a><\/div>');
}
zg_toggleWhat = function() {
document.getElementById('zg_whatdiv').style.display = (document.getElementById('zg_whatdiv').style.display != 'none') ? 'none' : 'block';
document.getElementById('zg_whatlink').style.display = (document.getElementById('zg_whatdiv').style.display != 'none') ? 'none' : 'block';
return false;
}
</script>
<div class="zg_div"><div class="zg_div_inner"><a href="http://www.flickr.com">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><br>
<script type="text/javascript">zg_insert_badge();</script>
<div id="zg_whatdiv">This is a Flickr badge showing public photos and videos from <a href="http://www.flickr.com/photos/23144957@N08">kaysta8</a>. Make your own badge <a href="http://www.flickr.com/badge.gne">here</a>.</div>
<script type="text/javascript">if (document.getElementById) document.getElementById('zg_whatdiv').style.display = 'none';</script>
</div>
</div>
<!-- End of Flickr Badge ------------------------------>
</div>



<br/>


<!-----twitter left bar------>

<div id="twitter" style="margin-top:-410px;">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 250,
height: 300,
theme: {
shell: {
background: '#898989',
color: '#000000'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#ffffff'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('hereskrista').start();
</script>
</div>
<!------twitter---------------------------------->





<br/>





</div>






<div id="footer" style="margin-top:135px;">
<p>
Copyright 2011 | All Rights Reserved | KP Design Rehoboth, MA 02769
</p>
</div>

</div>

</body>
</html>



Also this is the CSS if this helps out too.


@charset "UTF-8";
/* CSS Document */



#wrapper{

width: 950px;
position: relative;
}


body{

background-color: #bababa;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;

}

#mastHead{

text-align: center;
margin-left:250px;

}


#navigation{

background-color: #000;
color: #fff;
text-align: center;
width: 880px;
margin-left: 250px;
border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;


}


#navigation li{
display: inline;


}

#navigation li a{
color: #fff;
font-weight: 600;
text-transform: uppercase;
text-decoration: none;
padding: 0 10px;
font-family: Arial, Helvetica, sans-serif;
}

#navigation li a:hover{
text-decoration: underline;
color: #bababa;

}

#content{
margin-left: 520px;
text-align: center;
background-color: #898989;
color: #000;

border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 5px;
padding-left: 5px;
padding-right: 5px;
-moz-box-shadow: inset -5px -5px 5px #888;
-webkit-box-shadow: inset -5px -5px 5px #888;
box-shadow: inset -5px -5px 5px #888;
width: 450px;

}

/****#content{
margin-left: 630px;

text-align: center;
background-color: #898989;
color: #000;
width: 55%;
border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 5px;
padding-left: 5px;
padding-right: 5px;
-moz-box-shadow: inset -5px -5px 5px #888;
-webkit-box-shadow: inset -5px -5px 5px #888;
box-shadow: inset -5px -5px 5px #888;
width: 350px;

}*****/

#twitter{

/*background-color: #000;*/
color: #fff;

margin-top: -295px;
margin-left: 250px;


border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

}

#rightGallery{
margin-top: -305px;
width: 20px;

}

#right{
margin-top:400px;
width:130px;
border: thick;
border-color:#ffffff;
}

#deviantArt{
float: clear;
background-color: #898989;
border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 120px;
height: 120px;

margin-left: 1000px;
margin-top: -355px;
text-decoration: none;

}


#facebook{

background-color: #898989;
border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 120px;
height: 120px;

margin-left: 1000px;



}


#flickr{
background-color: #898989;
border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 120px;
height: 120px;
text-align: center;
margin-left: 1000px;



}





#footer{
margin-left: 450px;
margin-top: 45px;
background-color: #898989;
text-align: center;
width: 55%;
border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

h1{
text-shadow: 2px 2px 2px #000;

}

/*----THIS IS THE CODE FOR THE IMAGE GALLERY-------*/

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.gallerycontainer{
position: relative;
height: 66px;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

</style>
abduraooft
01-30-2012, 07:10 AM
Can we have a link to your page?
felgall
01-30-2012, 08:02 AM
The standard rel attribute values can be found at http://www.w3.org/TR/html4/types.html#type-links

If you want to define your own then you need a profile attribute on your head tag that points to where they are defined.

The [ and ] characters are probably not valid in the attribute. Having it as two separate values with a space between would be valid and more likely to work. Of course you'd need to amend the JavaScript to match the corrected HTML.

JavaScript doesn't always work when the HTML is invalid.
Novice08
01-30-2012, 08:45 PM
This is a link to the page:

http://www.kristapavao.com/gallery.html

Thanks felgall I will try that and test it!
Novice08
01-30-2012, 08:59 PM
I tried adding a space here:

<a href="images/frozen-world.png" rel="shadowbox [Photography]"> </a>

Is this what you meant by adding the space?
felgall
01-31-2012, 01:23 AM
<a href="images/frozen-world.png" rel="shadowbox Photography"> </a>

The rel attribute is supposed to be a space separated list of relationships that the page linked to has to the current page.
abduraooft
01-31-2012, 04:54 AM
I don't think there's anything wrong about the current rel attributes. It's a common technique used by such libraries to group the elements. See http://lokeshdhakar.com/projects/lightbox2/

@Novice08: The shadow box works for me but it take a lot of time to load the images. Reduce the size/dimension of your images - http://www.kristapavao.com/images/book-cover-4.jpg, http://www.kristapavao.com/images/final-green-layout-LOW.jpg and http://www.kristapavao.com/images/sunrok-logo.jpg and have another try.
felgall
01-31-2012, 08:13 PM
It's a common technique used by such libraries to group the elements.

I don't know why it would be so common given that:

1. it is invalid HTML as the rel attribute is required to be a space separated list

and

2. it makes using the value from JavaScript a lot more difficult than would be the sase were the two values to be supplied as a space separated list.

Presumably the people writing such scripts do not know either HTML or JavaScript as well as they ought to.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum