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 2 of 2
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    12
    Thanks
    6
    Thanked 0 Times in 0 Posts

    How add "Feature Banner is Loading" placeholder??

    Hi!

    The banner on my page takes longer to load than the website... Right now nothing is at the top, then suddenly it will appear then after it loads.

    I was wondering if it's possible to have a placeholder there that says "Feature Banner is Loading" so visitors know something will appear there before they click away to another page.

    Could someone please tell me the code for something like this? Thanks!

    The index.html is pasted below.

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Suspense Author Jeremy Bates - White Lies</title>
    <link href="css/reset.css" rel="stylesheet" media="screen">
    <link href="css/style.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />

    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    </head>

    <body>
    <div id="page">
    <aside id="sidebar">
    <nav><a class="logo" href="#top" id="nav-logo"><span>suspense author</span>jeremy bates</a>
    <ul>
    <li class="active" id="nav-1"><a href="#home">Home</a></li>
    <li id="nav-2"><a href="#work">media</a></li>
    <li id="nav-3"><a href="#about">About</a></li>
    <li id="nav-4"><a href="#contact">Connect</a></li>
    <li id="nav-4"><a href="http://jeremybatesbooks.blogspot.com/">Blog</a></li>
    </ul>
    <div class="bg_bottom"></div>
    </nav>
    </aside>
    <div id="main-content">
    <section id="top"></section><!-- do not remove -->
    <section id="home">
    <div id="loader" class="loader"></div>
    <div id="ps_container" class="ps_container"> <span class="ribbon"></span>
    <div class="ps_image_wrapper">
    <!-- First initial image -->
    <img src="images/1.jpg" alt="" /> </div>
    <!-- Navigation items -->
    <div class="ps_next"></div>
    <div class="ps_prev"></div>
    <!-- Dot list with thumbnail preview -->
    <ul class="ps_nav">
    <li class="selected"><a href="images/1.jpg" rel="images/thumbs/1.jpg">Image 1</a></li>
    <li><a href="images/2.jpg" rel="images/thumbs/2.jpg">Image 2</a></li>
    <li><a href="images/3.jpg" rel="images/thumbs/3.jpg">Image 3</a></li>
    <li><a href="images/4.jpg" rel="images/thumbs/4.jpg">Image 4</a></li>
    <li><a href="images/5.jpg" rel="images/thumbs/5.jpg">Image 5</a></li>
    <li class="ps_preview">
    <div class="ps_preview_wrapper">
    <!-- Thumbnail comes here -->
    </div>
    <!-- Little triangle -->
    <span></span> </li>
    </ul>
    </div>
    <!--end ps_container-->
    <header class="divider intro-text">
    <h2>welcome</h2>
    <!-- <div class="contact-me"><a class="contact button" href="#contact">Contact Me</a></div>-->
    </header>
    <div class="recent-work columns">
    <h3>coming soon</h3>
    <div class="two-column">
    <figure><a href="images/pricing_table_3.jpg" rel="recent_work" class="zoom"><img src="images/cover.jpg" alt="Image"></a></figure>
    <blockquote><center><form method="post" action="https://www.paypal.com/cgi-bin/webscr">
    <input type="hidden" value="_s-xclick" name="cmd" /> <input type="hidden" value="SJ4GFJH5CCQ94" name="hosted_button_id" />ISBN: 978-1-60809-043-3<br /><br>Pre-Order Your Copy Now!
    <p></p>
    <table>
    <tbody>
    <tr>
    <td>
    <select name="os0">
    <option value="Pre-order Hardcover" />
    Pre-order Hardcover $19.50

    </select>
    </td>
    </tr>
    </tbody>
    </table>
    <input type="hidden" value="USD" name="currency_code" /> <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online!" /> <img alt="" width="1" height="1" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" style="border-width: 0px; border-style: solid;" />
    <p></p>
    </form></center></blockquote>
    </div>
    <div class="two-column last">
    <p>While driving to a charming village tucked away deep in the Cascade Mountains of eastern Washington, where she is to begin a new job teaching high school English, Katrina Burton picks up a young hitchhiker who turns out to be drunk and predatory. Fearful for her safety, she lies about her destination in order to get him out of the car. But when she later discovers that he is a teacher at the same school, she finds herself feeding that initial lie with more lies.</p>
    <p> Then Katrina meets a mysterious man. Handsome, charismatic and strong, he is exactly what she needs to extricate her from the expanding network of lies, now spinning out of control. She falls fast and hard for him.</p>
    <p> But her perfect solution soon becomes a nightmare that lands her in the middle of a grisly murder. And Katrina’s problems don’t stop there. She must decide whether to betray her new love or to cover up the murder and hope for the best…until she discovers that the choice may not be hers to make.</p>
    </div>
    </div>

    <div class="one-column columns testimony">
    <div class="clearfix says">
    <figure class="marginRight"><img src="images/sophocles.jpg" alt="Image" /></figure>
    <blockquote>
    <p>A lie never grows old.</p>
    <cite>&mdash; <a href="#">Sophocles</a></cite> </blockquote>
    </div>
    <div class="clearfix says">
    <figure class="marginRight"><img src="images/aman.jpg" alt="Image" /></figure>
    <blockquote>
    <p>The least initial deviation from the truth is multiplied later a thousandfold.</p>
    <cite>&mdash; <a href="#">Aristotle</a></cite> </blockquote>
    </div>

    </div>
    </section> <!--end section-->

    <section id="work" class="clearfix">
    <header>
    <h2>media room</h2>
    </header>
    <blockquote><center><object style="height: 390px; width: 640px"><param name="movie" value="http://www.youtube.com/v/U-E4e0Q9NzU?version=3"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/U-E4e0Q9NzU?version=3" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360"></object></center></blockquote>

    </section> <!--end section-->
    <section id="about" class="clearfix">
    <header>
    <h2>Who is this Guy?</h2>
    </header>


    <figure class="marginRight"><img src="images/me.jpg" alt="Image" /></figure>
    <p>Jeremy Bates has spent the last ten years traveling the world, visiting more than thirty countries. He has lived in Canada, the United States, Australia, Japan, South Korea, and the Philippines.</p>
    <p> Bates is a graduate of the University of Western Ontario with a degree in English literature and philosophy.</p>
    <p> His frightening debut novel, <a href="http://oceanviewpub.com/white-lies"><em>White Lies</em></a>, is set in a small village in the Cascade Mountain range of eastern Washington. In the book, he succeeds in bringing world-class terror to this tranquil community.</p>

    <div class="clearfix"></div>
    <h3>bucket list</h3>
    <ul class="skills">
    <li>quit the day job<span class="bar_100"><span class="percent">100%</span></span></li>
    <li>visit all the continents <span class="bar_90"><span class="percent">90%</span></span></li>
    <li>learn more languages<span class="bar_50"><span class="percent">50%</span></span></li>
    <li>go to space<span class="bar_70"><span class="percent">70%</span></span></li>
    <li><span class="bar_60"><span class="percent">60%</span></span>riverboat down the amazon</li>
    </ul>

    </section> <!--end section-->
    <section id="contact" class="clearfix">
    <header>
    <h2>Get in touch</h2>
    </header>

    <form action="#" method="post">
    <p><input type="text" name="name" value="Your Name" id="name" onblur="if (this.value == ''){this.value = 'Your Name'; }" onfocus="if (this.value == 'Your Name') {this.value = '';}" /></p>
    <p><input type="text" name="email" value="Your Email" id="email" onblur="if (this.value == ''){this.value = 'Your Email'; }" onfocus="if (this.value == 'Your Email') {this.value = '';}" /></p>
    <p><input type="text" name="url" value="Your Site" id="url" onblur="if (this.value == ''){this.value = 'Your Site'; }" onfocus="if (this.value == 'Your Site') {this.value = '';}" /></p>
    <p><textarea cols="20" rows="7" name="message" id="message" onblur="if (this.value == ''){this.value = 'Your Message'; }" onfocus="if (this.value == 'Your Message') {this.value = '';}" >Your Message</textarea></p>
    <p><input type="submit" name="submit" value="Send Message" class="button" /></p>
    </form>
    <div class="social_wrapper">
    <h3>Where to find me?</h3>
    <ul class="social">
    <li class="dribble"><a href="#">Dribble</a></li>
    <li class="twitter"><a href="#">Twitter</a></li>
    <li class="lastfm"><a href="#">Last FM</a></li>
    <li class="facebook"><a href="#">Facebook</a></li>
    <li class="location"><a href="#">Location</a></li>
    <li class="forrst"><a href="#">Forrst</a></li>
    </ul>
    </div>

    <!-- Include the Google Friend Connect javascript library. -->
    <script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
    <!-- Define the div tag where the gadget will be inserted. -->
    <div id="div-2679675032294530846" style="width:276px;border:1px solid #cccccc;"></div>
    <!-- Render the gadget into a div. -->
    <script type="text/javascript">
    var skin = {};
    skin['BORDER_COLOR'] = '#cccccc';
    skin['ENDCAP_BG_COLOR'] = '#e0ecff';
    skin['ENDCAP_TEXT_COLOR'] = '#333333';
    skin['ENDCAP_LINK_COLOR'] = '#0000cc';
    skin['ALTERNATE_BG_COLOR'] = '#ffffff';
    skin['CONTENT_BG_COLOR'] = '#ffffff';
    skin['CONTENT_LINK_COLOR'] = '#0000cc';
    skin['CONTENT_TEXT_COLOR'] = '#333333';
    skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
    skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
    skin['CONTENT_HEADLINE_COLOR'] = '#333333';
    skin['NUMBER_ROWS'] = '4';
    google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
    google.friendconnect.container.renderMembersGadget(
    { id: 'div-2679675032294530846',
    site: '03179725261382987771' },
    skin);
    </script>

    <div class="copyright">
    <p><small>Copyright 2011. Jeremy Bates. All rights reserved.<em></em></small></p>
    </div><!--end copyright-->
    </section> <!--end section-->
    </div>
    </div>
    <script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
    <script type="text/javascript" src="js/jquery_003.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>

    <!-- The JavaScript -->
    <script type="text/javascript">
    /*
    the images preload plugin
    */
    (function($) {
    $.fn.preload = function(options) {
    var opts = $.extend({}, $.fn.preload.defaults, options),
    o = $.meta ? $.extend({}, opts, this.data()) : opts;
    return this.each(function() {
    var $e = $(this),
    t = $e.attr('rel'),
    i = $e.attr('href'),
    l = 0;
    $('<img/>').load(function(i){
    ++l;
    if(l==2) o.onComplete();
    }).attr('src',i);
    $('<img/>').load(function(i){
    ++l;
    if(l==2) o.onComplete();
    }).attr('src',t);
    });
    };
    $.fn.preload.defaults = {
    onComplete : function(){return false;}
    };
    })(jQuery);
    </script>
    <script type="text/javascript">
    $(function() {
    //some elements..
    var $ps_container = $('#ps_container'),
    $ps_image_wrapper = $ps_container.find('.ps_image_wrapper'),
    $ps_next = $ps_container.find('.ps_next'),
    $ps_prev = $ps_container.find('.ps_prev'),
    $ps_nav = $ps_container.find('.ps_nav'),
    $tooltip = $ps_container.find('.ps_preview'),
    $ps_preview_wrapper = $tooltip.find('.ps_preview_wrapper'),
    $links = $ps_nav.children('li').not($tooltip),
    total_images = $links.length,
    currentHovered = -1,
    current = 0,
    $loader = $('#loader');

    /*check if you are using a browser*/
    var ie = false;
    if ($.browser.msie) {
    ie = true;//you are not!Anyway let's give it a try
    }
    if(!ie)
    $tooltip.css({
    opacity : 0
    }).show();


    /*first preload images (thumbs and large images)*/
    var loaded = 0;
    $links.each(function(i){
    var $link = $(this);
    $link.find('a').preload({
    onComplete : function(){
    ++loaded;
    if(loaded == total_images){
    //all images preloaded,
    //show ps_container and initialize events
    $loader.hide();
    $ps_container.show();
    //when mouse enters the pages (the dots),
    //show the tooltip,
    //when mouse leaves hide the tooltip,
    //clicking on one will display the respective image
    $links.bind('mouseenter',showTooltip)
    .bind('mouseleave',hideTooltip)
    .bind('click',showImage);
    //navigate through the images
    $ps_next.bind('click',nextImage);
    $ps_prev.bind('click',prevImage);
    }
    }
    });
    });

    function showTooltip(){
    var $link = $(this),
    idx = $link.index(),
    linkOuterWidth = $link.outerWidth(),
    //this holds the left value for the next position
    //of the tooltip
    left = parseFloat(idx * linkOuterWidth) - $tooltip.width()/2 + linkOuterWidth/2,
    //the thumb image source
    $thumb = $link.find('a').attr('rel'),
    imageLeft;

    //if we are not hovering the current one
    if(currentHovered != idx){
    //check if we will animate left->right or right->left
    if(currentHovered != -1){
    if(currentHovered < idx){
    imageLeft = 75;
    }
    else{
    imageLeft = -75;
    }
    }
    currentHovered = idx;

    //the next thumb image to be shown in the tooltip
    var $newImage = $('<img/>').css('left','0px')
    .attr('src',$thumb);

    //if theres more than 1 image
    //(if we would move the mouse too fast it would probably happen)
    //then remove the oldest one (:last)
    if($ps_preview_wrapper.children().length > 1)
    $ps_preview_wrapper.children(':last').remove();

    //prepend the new image
    $ps_preview_wrapper.prepend($newImage);

    var $tooltip_imgs = $ps_preview_wrapper.children(),
    tooltip_imgs_count = $tooltip_imgs.length;

    //if theres 2 images on the tooltip
    //animate the current one out, and the new one in
    if(tooltip_imgs_count > 1){
    $tooltip_imgs.eq(tooltip_imgs_count-1)
    .stop()
    .animate({
    left:-imageLeft+'px'
    },150,function(){
    //remove the old one
    $(this).remove();
    });
    $tooltip_imgs.eq(0)
    .css('left',imageLeft + 'px')
    .stop()
    .animate({
    left:'0px'
    },150);
    }
    }
    //if we are not using a "browser", we just show the tooltip,
    //otherwise we fade it
    //
    if(ie)
    $tooltip.css('left',left + 'px').show();
    else
    $tooltip.stop()
    .animate({
    left : left + 'px',
    opacity : 1
    },150);
    }

    function hideTooltip(){
    //hide / fade out the tooltip
    if(ie)
    $tooltip.hide();
    else
    $tooltip.stop()
    .animate({
    opacity : 0
    },150);
    }

    function showImage(e){
    var $link = $(this),
    idx = $link.index(),
    $image = $link.find('a').attr('href'),
    $currentImage = $ps_image_wrapper.find('img'),
    currentImageWidth = $currentImage.width();

    //if we click the current one return
    if(current == idx) return false;

    //add class selected to the current page / dot
    $links.eq(current).removeClass('selected');
    $link.addClass('selected');

    //the new image element
    var $newImage = $('<img/>').css('left',currentImageWidth + 'px')
    .attr('src',$image);

    //if the wrapper has more than one image, remove oldest
    if($ps_image_wrapper.children().length > 1)
    $ps_image_wrapper.children(':last').remove();

    //prepend the new image
    $ps_image_wrapper.prepend($newImage);

    //the new image width.
    //This will be the new width of the ps_image_wrapper
    var newImageWidth = $newImage.width();

    //check animation direction
    if(current > idx){
    $newImage.css('left',-newImageWidth + 'px');
    currentImageWidth = -newImageWidth;
    }
    current = idx;
    //animate the new width of the ps_image_wrapper
    //(same like new image width)
    $ps_image_wrapper.stop().animate({
    width : newImageWidth + 'px'
    },350);
    //animate the new image in
    $newImage.stop().animate({
    left : '0px'
    },350);
    //animate the old image out
    $currentImage.stop().animate({
    left : -currentImageWidth + 'px'
    },350);

    e.preventDefault();
    }

    function nextImage() {
    var cache='';
    cache = cache==''?current+':'+total_images:cache;
    if(current < total_images)
    $links.eq(current+1).trigger('click');
    if(cache == (current+':'+total_images))
    $links.eq(0).trigger('click');

    }
    function prevImage(){
    if(current > 0){
    $links.eq(current-1).trigger('click');
    }
    }
    setInterval( function(){
    $('.ps_next').click();
    },4000 );

    });
    </script>
    <script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <script type="text/javascript">

    $(document).ready(function() {


    $('.projects li figure a img').animate({'opacity' : 1}).hover(function() {
    $(this).animate({'opacity' : .5});
    }, function() {
    $(this).animate({'opacity' : 1});
    });
    $('.zoom img').animate({'opacity' : 1}).hover(function() {
    $(this).animate({'opacity' : .5});
    }, function() {
    $(this).animate({'opacity' : 1});
    });

    $("a[rel=work]").fancybox({
    'transitionIn' : 'elastic',
    'transitionOut' : 'elastic',
    'titlePosition' : 'over',
    'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
    return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
    }
    });
    $("a[rel=recent_work]").fancybox({
    'transitionIn' : 'elastic',
    'transitionOut' : 'elastic',
    'titlePosition' : 'over',
    'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
    return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
    }
    });


    });

    </script>
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts
    Try:
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Suspense Author Jeremy Bates - White Lies</title>
    <link href="css/reset.css" rel="stylesheet" media="screen">
    <link href="css/style.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />
    
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    
    </head>
    
    <body>
    <div id="page">
    <aside id="sidebar">
    <nav><a class="logo" href="#top" id="nav-logo"><span>suspense author</span>jeremy bates</a>
    <ul>
    <li class="active" id="nav-1"><a href="#home">Home</a></li>
    <li id="nav-2"><a href="#work">media</a></li>
    <li id="nav-3"><a href="#about">About</a></li>
    <li id="nav-4"><a href="#contact">Connect</a></li>
    <li id="nav-4"><a href="http://jeremybatesbooks.blogspot.com/">Blog</a></li>
    </ul>
    <div class="bg_bottom"></div>
    </nav>
    </aside>
    <div id="main-content">
    <section id="top"></section><!-- do not remove -->
    <section id="home">
    <div id="loader" class="loader"><!-- fix inserted by ironboy-->
    <div style="width:636px;height:345px;background:#222;margin-bottom:70px">
    <div style="padding:170px 0 0 245px">Feature Banner is Loading...</div>
    </div>
    <!-- end fix-->
    </div>
    <div id="ps_container" class="ps_container"> <span class="ribbon"></span>
    <div class="ps_image_wrapper">
    <!-- First initial image -->
    <img src="images/1.jpg" alt="" /> </div>
    <!-- Navigation items -->
    <div class="ps_next"></div>
    <div class="ps_prev"></div>
    <!-- Dot list with thumbnail preview -->
    <ul class="ps_nav">
    <li class="selected"><a href="images/1.jpg" rel="images/thumbs/1.jpg">Image 1</a></li>
    <li><a href="images/2.jpg" rel="images/thumbs/2.jpg">Image 2</a></li>
    <li><a href="images/3.jpg" rel="images/thumbs/3.jpg">Image 3</a></li>
    <li><a href="images/4.jpg" rel="images/thumbs/4.jpg">Image 4</a></li>
    <li><a href="images/5.jpg" rel="images/thumbs/5.jpg">Image 5</a></li>
    <li class="ps_preview">
    <div class="ps_preview_wrapper">
    <!-- Thumbnail comes here -->
    </div>
    <!-- Little triangle -->
    <span></span> </li>
    </ul>
    </div>
    <!--end ps_container-->
    <header class="divider intro-text">
    <h2>welcome</h2>
    <!-- <div class="contact-me"><a class="contact button" href="#contact">Contact Me</a></div>-->
    </header>
    <div class="recent-work columns">
    <h3>coming soon</h3>
    <div class="two-column">
    <figure><a href="images/pricing_table_3.jpg" rel="recent_work" class="zoom"><img src="images/cover.jpg" alt="Image"></a></figure>
    <blockquote><center><form method="post" action="https://www.paypal.com/cgi-bin/webscr">
    <input type="hidden" value="_s-xclick" name="cmd" /> <input type="hidden" value="SJ4GFJH5CCQ94" name="hosted_button_id" />ISBN: 978-1-60809-043-3<br /><br>Pre-Order Your Copy Now!
    <p></p>
    <table>
    <tbody>
    <tr>
    <td>
    <select name="os0">
    <option value="Pre-order Hardcover" />
    Pre-order Hardcover $19.50
    
    </select>
    </td>
    </tr>
    </tbody>
    </table>
    <input type="hidden" value="USD" name="currency_code" /> <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online!" /> <img alt="" width="1" height="1" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" style="border-width: 0px; border-style: solid;" />
    <p></p>
    </form></center></blockquote>
    </div>
    <div class="two-column last">
    <p>While driving to a charming village tucked away deep in the Cascade Mountains of eastern Washington, where she is to begin a new job teaching high school English, Katrina Burton picks up a young hitchhiker who turns out to be drunk and predatory. Fearful for her safety, she lies about her destination in order to get him out of the car. But when she later discovers that he is a teacher at the same school, she finds herself feeding that initial lie with more lies.</p>
    <p> Then Katrina meets a mysterious man. Handsome, charismatic and strong, he is exactly what she needs to extricate her from the expanding network of lies, now spinning out of control. She falls fast and hard for him.</p>
    <p> But her perfect solution soon becomes a nightmare that lands her in the middle of a grisly murder. And Katrina's problems don't stop there. She must decide whether to betray her new love or to cover up the murder and hope for the best…until she discovers that the choice may not be hers to make.</p>
    </div>
    </div>
    
    <div class="one-column columns testimony">
    <div class="clearfix says">
    <figure class="marginRight"><img src="images/sophocles.jpg" alt="Image" /></figure>
    <blockquote>
    <p>A lie never grows old.</p>
    <cite>&mdash; <a href="#">Sophocles</a></cite> </blockquote>
    </div>
    <div class="clearfix says">
    <figure class="marginRight"><img src="images/aman.jpg" alt="Image" /></figure>
    <blockquote>
    <p>The least initial deviation from the truth is multiplied later a thousandfold.</p>
    <cite>&mdash; <a href="#">Aristotle</a></cite> </blockquote>
    </div>
    
    </div>
    </section> <!--end section-->
    
    <section id="work" class="clearfix">
    <header>
    <h2>media room</h2>
    </header>
    <blockquote><center><object style="height: 390px; width: 640px"><param name="movie" value="http://www.youtube.com/v/U-E4e0Q9NzU?version=3"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/U-E4e0Q9NzU?version=3" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360"></object></center></blockquote>
    
    </section> <!--end section-->
    <section id="about" class="clearfix">
    <header>
    <h2>Who is this Guy?</h2>
    </header>
    
    
    <figure class="marginRight"><img src="images/me.jpg" alt="Image" /></figure>
    <p>Jeremy Bates has spent the last ten years traveling the world, visiting more than thirty countries. He has lived in Canada, the United States, Australia, Japan, South Korea, and the Philippines.</p>
    <p> Bates is a graduate of the University of Western Ontario with a degree in English literature and philosophy.</p>
    <p> His frightening debut novel, <a href="http://oceanviewpub.com/white-lies"><em>White Lies</em></a>, is set in a small village in the Cascade Mountain range of eastern Washington. In the book, he succeeds in bringing world-class terror to this tranquil community.</p>
    
    <div class="clearfix"></div>
    <h3>bucket list</h3>
    <ul class="skills">
    <li>quit the day job<span class="bar_100"><span class="percent">100%</span></span></li>
    <li>visit all the continents <span class="bar_90"><span class="percent">90%</span></span></li>
    <li>learn more languages<span class="bar_50"><span class="percent">50%</span></span></li>
    <li>go to space<span class="bar_70"><span class="percent">70%</span></span></li>
    <li><span class="bar_60"><span class="percent">60%</span></span>riverboat down the amazon</li>
    </ul>
    
    </section> <!--end section-->
    <section id="contact" class="clearfix">
    <header>
    <h2>Get in touch</h2>
    </header>
    
    <form action="#" method="post">
    <p><input type="text" name="name" value="Your Name" id="name" onblur="if (this.value == ''){this.value = 'Your Name'; }" onfocus="if (this.value == 'Your Name') {this.value = '';}" /></p>
    <p><input type="text" name="email" value="Your Email" id="email" onblur="if (this.value == ''){this.value = 'Your Email'; }" onfocus="if (this.value == 'Your Email') {this.value = '';}" /></p>
    <p><input type="text" name="url" value="Your Site" id="url" onblur="if (this.value == ''){this.value = 'Your Site'; }" onfocus="if (this.value == 'Your Site') {this.value = '';}" /></p>
    <p><textarea cols="20" rows="7" name="message" id="message" onblur="if (this.value == ''){this.value = 'Your Message'; }" onfocus="if (this.value == 'Your Message') {this.value = '';}" >Your Message</textarea></p>
    <p><input type="submit" name="submit" value="Send Message" class="button" /></p>
    </form>
    <div class="social_wrapper">
    <h3>Where to find me?</h3>
    <ul class="social">
    <li class="dribble"><a href="#">Dribble</a></li>
    <li class="twitter"><a href="#">Twitter</a></li>
    <li class="lastfm"><a href="#">Last FM</a></li>
    <li class="facebook"><a href="#">Facebook</a></li>
    <li class="location"><a href="#">Location</a></li>
    <li class="forrst"><a href="#">Forrst</a></li>
    </ul>
    </div>
    
    <!-- Include the Google Friend Connect javascript library. -->
    <script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
    <!-- Define the div tag where the gadget will be inserted. -->
    <div id="div-2679675032294530846" style="width:276px;border:1px solid #cccccc;"></div>
    <!-- Render the gadget into a div. -->
    <script type="text/javascript">
    var skin = {};
    skin['BORDER_COLOR'] = '#cccccc';
    skin['ENDCAP_BG_COLOR'] = '#e0ecff';
    skin['ENDCAP_TEXT_COLOR'] = '#333333';
    skin['ENDCAP_LINK_COLOR'] = '#0000cc';
    skin['ALTERNATE_BG_COLOR'] = '#ffffff';
    skin['CONTENT_BG_COLOR'] = '#ffffff';
    skin['CONTENT_LINK_COLOR'] = '#0000cc';
    skin['CONTENT_TEXT_COLOR'] = '#333333';
    skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
    skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
    skin['CONTENT_HEADLINE_COLOR'] = '#333333';
    skin['NUMBER_ROWS'] = '4';
    google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
    google.friendconnect.container.renderMembersGadget(
    { id: 'div-2679675032294530846',
    site: '03179725261382987771' },
    skin);
    </script>
    
    <div class="copyright">
    <p><small>Copyright 2011. Jeremy Bates. All rights reserved.<em></em></small></p>
    </div><!--end copyright-->
    </section> <!--end section-->
    </div>
    </div>
    <script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
    <script type="text/javascript" src="js/jquery_003.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
    
    <!-- The JavaScript -->
    <script type="text/javascript">
    /*
    the images preload plugin
    */
    (function($) {
    $.fn.preload = function(options) {
    var opts = $.extend({}, $.fn.preload.defaults, options),
    o = $.meta ? $.extend({}, opts, this.data()) : opts;
    return this.each(function() {
    var $e = $(this),
    t = $e.attr('rel'),
    i = $e.attr('href'),
    l = 0;
    $('<img/>').load(function(i){
    ++l;
    if(l==2) o.onComplete();
    }).attr('src',i);
    $('<img/>').load(function(i){
    ++l;
    if(l==2) o.onComplete();
    }).attr('src',t);
    });
    };
    $.fn.preload.defaults = {
    onComplete : function(){return false;}
    };
    })(jQuery);
    </script>
    <script type="text/javascript">
    $(function() {
    //some elements..
    var $ps_container = $('#ps_container'),
    $ps_image_wrapper = $ps_container.find('.ps_image_wrapper'),
    $ps_next = $ps_container.find('.ps_next'),
    $ps_prev = $ps_container.find('.ps_prev'),
    $ps_nav = $ps_container.find('.ps_nav'),
    $tooltip = $ps_container.find('.ps_preview'),
    $ps_preview_wrapper = $tooltip.find('.ps_preview_wrapper'),
    $links = $ps_nav.children('li').not($tooltip),
    total_images = $links.length,
    currentHovered = -1,
    current = 0,
    $loader = $('#loader');
    
    /*check if you are using a browser*/
    var ie = false;
    if ($.browser.msie) {
    ie = true;//you are not!Anyway let's give it a try
    }
    if(!ie)
    $tooltip.css({
    opacity : 0
    }).show();
    
    
    /*first preload images (thumbs and large images)*/
    var loaded = 0;
    $links.each(function(i){
    var $link = $(this);
    $link.find('a').preload({
    onComplete : function(){
    ++loaded;
    if(loaded == total_images){
    //all images preloaded,
    //show ps_container and initialize events
    $loader.hide();
    $ps_container.show();
    //when mouse enters the pages (the dots),
    //show the tooltip,
    //when mouse leaves hide the tooltip,
    //clicking on one will display the respective image
    $links.bind('mouseenter',showTooltip)
    .bind('mouseleave',hideTooltip)
    .bind('click',showImage);
    //navigate through the images
    $ps_next.bind('click',nextImage);
    $ps_prev.bind('click',prevImage);
    }
    }
    });
    });
    
    function showTooltip(){
    var $link = $(this),
    idx = $link.index(),
    linkOuterWidth = $link.outerWidth(),
    //this holds the left value for the next position
    //of the tooltip
    left = parseFloat(idx * linkOuterWidth) - $tooltip.width()/2 + linkOuterWidth/2,
    //the thumb image source
    $thumb = $link.find('a').attr('rel'),
    imageLeft;
    
    //if we are not hovering the current one
    if(currentHovered != idx){
    //check if we will animate left->right or right->left
    if(currentHovered != -1){
    if(currentHovered < idx){
    imageLeft = 75;
    }
    else{
    imageLeft = -75;
    }
    }
    currentHovered = idx;
    
    //the next thumb image to be shown in the tooltip
    var $newImage = $('<img/>').css('left','0px')
    .attr('src',$thumb);
    
    //if theres more than 1 image
    //(if we would move the mouse too fast it would probably happen)
    //then remove the oldest one (:last)
    if($ps_preview_wrapper.children().length > 1)
    $ps_preview_wrapper.children(':last').remove();
    
    //prepend the new image
    $ps_preview_wrapper.prepend($newImage);
    
    var $tooltip_imgs = $ps_preview_wrapper.children(),
    tooltip_imgs_count = $tooltip_imgs.length;
    
    //if theres 2 images on the tooltip
    //animate the current one out, and the new one in
    if(tooltip_imgs_count > 1){
    $tooltip_imgs.eq(tooltip_imgs_count-1)
    .stop()
    .animate({
    left:-imageLeft+'px'
    },150,function(){
    //remove the old one
    $(this).remove();
    });
    $tooltip_imgs.eq(0)
    .css('left',imageLeft + 'px')
    .stop()
    .animate({
    left:'0px'
    },150);
    }
    }
    //if we are not using a "browser", we just show the tooltip,
    //otherwise we fade it
    //
    if(ie)
    $tooltip.css('left',left + 'px').show();
    else
    $tooltip.stop()
    .animate({
    left : left + 'px',
    opacity : 1
    },150);
    }
    
    function hideTooltip(){
    //hide / fade out the tooltip
    if(ie)
    $tooltip.hide();
    else
    $tooltip.stop()
    .animate({
    opacity : 0
    },150);
    }
    
    function showImage(e){
    var $link = $(this),
    idx = $link.index(),
    $image = $link.find('a').attr('href'),
    $currentImage = $ps_image_wrapper.find('img'),
    currentImageWidth = $currentImage.width();
    
    //if we click the current one return
    if(current == idx) return false;
    
    //add class selected to the current page / dot
    $links.eq(current).removeClass('selected');
    $link.addClass('selected');
    
    //the new image element
    var $newImage = $('<img/>').css('left',currentImageWidth + 'px')
    .attr('src',$image);
    
    //if the wrapper has more than one image, remove oldest
    if($ps_image_wrapper.children().length > 1)
    $ps_image_wrapper.children(':last').remove();
    
    //prepend the new image
    $ps_image_wrapper.prepend($newImage);
    
    //the new image width.
    //This will be the new width of the ps_image_wrapper
    var newImageWidth = $newImage.width();
    
    //check animation direction
    if(current > idx){
    $newImage.css('left',-newImageWidth + 'px');
    currentImageWidth = -newImageWidth;
    }
    current = idx;
    //animate the new width of the ps_image_wrapper
    //(same like new image width)
    $ps_image_wrapper.stop().animate({
    width : newImageWidth + 'px'
    },350);
    //animate the new image in
    $newImage.stop().animate({
    left : '0px'
    },350);
    //animate the old image out
    $currentImage.stop().animate({
    left : -currentImageWidth + 'px'
    },350);
    
    e.preventDefault();
    }
    
    function nextImage() {
    var cache='';
    cache = cache==''?current+':'+total_images:cache;
    if(current < total_images)
    $links.eq(current+1).trigger('click');
    if(cache == (current+':'+total_images))
    $links.eq(0).trigger('click');
    
    }
    function prevImage(){
    if(current > 0){
    $links.eq(current-1).trigger('click');
    }
    }
    setInterval( function(){
    $('.ps_next').click();
    },4000 );
    
    });
    </script>
    <script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <script type="text/javascript">
    
    $(document).ready(function() {
    
    
    $('.projects li figure a img').animate({'opacity' : 1}).hover(function() {
    $(this).animate({'opacity' : .5});
    }, function() {
    $(this).animate({'opacity' : 1});
    });
    $('.zoom img').animate({'opacity' : 1}).hover(function() {
    $(this).animate({'opacity' : .5});
    }, function() {
    $(this).animate({'opacity' : 1});
    });
    
    $("a[rel=work]").fancybox({
    'transitionIn' : 'elastic',
    'transitionOut' : 'elastic',
    'titlePosition' : 'over',
    'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
    return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
    }
    });
    $("a[rel=recent_work]").fancybox({
    'transitionIn' : 'elastic',
    'transitionOut' : 'elastic',
    'titlePosition' : 'over',
    'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
    return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
    }
    });
    
    
    });
    
    </script>
    </body>
    </html>
    Last edited by ironboy; 10-06-2011 at 06:59 AM.

  • Users who have thanked ironboy for this post:

    jemacba (10-06-2011)


  •  

    Tags for this Thread

    Posting Permissions

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