Jump to content
UncleStef Mentoring Update: New SEO course!

joeyh

New Members
 View Profile  See their activity

  • Posts

    2

  • Joined

  • Last visited

 Content Type 

Posts posted by joeyh

  1. Image Gallery

    in Javascript

    Posted

    Ok Thanks for Help I got it but im having truble getting it to work

     

     

     

    <!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>

    <title>colorbox</title>

    <link media="screen" rel="stylesheet" href="colorbox.css" />

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

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

    <script>

    $(document).ready(function(){

    //Examples of how to assign the ColorBox event to elements

    $("a[rel=example1]").colorbox();

    $("a[rel=example2]").colorbox({transition:"fade"});

    $("a[rel=example3]").colorbox({transition:"none", width:"75%", height:"75%"});

    $("a[rel=example4]").colorbox({slideshow:true});

    $(".example5").colorbox();

    $(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});

    $(".example7").colorbox({width:"80%", height:"80%", iframe:true});

    $(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});

    $(".example9").colorbox({

    onOpen:function(){ alert('onOpen: colorbox is about to open'); },

    onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },

    onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },

    onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },

    onClosed:function(){ alert('onClosed: colorbox has completely closed'); }

    });

     

    //Example of preserving a JavaScript event for inline calls.

    $("#click").click(function(){

    $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");

    return false;

    });

    });

    </script>

    </head>

     

     

    <body>

    <h2>Elastic Transition</h2>

    <p><a href="content/ohoopee1.jpg" rel="example1" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>

    <p><a href="content/ohoopee2.jpg" rel="example1" title="On the Ohoopee as a child">Grouped Photo 2</a></p>

    <p><a href="content/ohoopee3.jpg" rel="example1" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

    </body>

    </html>

×
×
  • Create New...