Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Link Recognition

    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!

    Code:
    <!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.

    Code:
    @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>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Can we have a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,641
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is a link to the page:

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

    Thanks felgall I will try that and test it!

  • #5
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,641
    Thanks
    0
    Thanked 649 Times in 639 Posts
    <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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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/fi...layout-LOW.jpg and http://www.kristapavao.com/images/sunrok-logo.jpg and have another try.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,641
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by abduraooft View Post
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

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