10A Computer Science

The content of index.html

<html>

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

<title>Economic crisis</title>
</head>
<body >
<div class="content">

<div class="top"> top </div>

<div class="menu"> menu </div>
<div class="center">   center</div>
<div class="footer"> footer  </div>

</div>
</body>

</html>

**************************************************************************
Content of style.css

body {
    margin:0px 0px 0px 100px;
    font-family:Arial;
    font-size:12px;
    color:#5c5c5c
}

div.content {
    width:1000px;
}

div.top  {
    float:left;
    width:1000px;
    height:120px;
    background-color: #ff0000;
}

div.menu  {
    float:left;
    width:100px;
    background-color: #00ff00;
}

div.center {
    float:left;
    width:900px;
    background-color: #0000ff;
}

div.footer  {
    float:left;
    width:1000px;
    background-color: #ff00ff;
}

******************************************************************

A simple scrollable image gallery

http://flowplayer.org/tools/demos/scrollable/gallery.html

http://flowplayer.org/tools/demos/scrollable/gallery.htm

<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

<!-- standalone page styling (can be removed) -->
 <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/> 


 <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/scrollable-horizontal.css" />
 <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/scrollable-buttons.css" />

 <style>
 

 /* styling for the image wrapper  */
 #image_wrap {
  /* dimensions */
  width:677px;
  margin:15px 0 15px 40px;
  padding:15px 0;

  /* centered */
  text-align:center;

  /* some "skinning" */
  background-color:#efefef;
  border:2px solid #fff;
  outline:1px solid #ddd;
  -moz-ouline-radius:4px;
 }
 </style>

<!-- wrapper element for the large image -->
<div id="image_wrap">

 <!-- Initially the image is a simple 1x1 pixel transparent GIF -->
 <img src="http://static.flowplayer.org/tools/img/blank.gif" width="500" height="375" />

</div>


<!-- HTML structures -->


<!-- "previous page" action -->
<a class="prev browse left"></a>

<!-- root element for scrollable -->
<div class="scrollable">   
   
   <!-- root element for the items -->
   <div class="items">
   
      <!-- 1-5 -->
      <div>
         <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
         <img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
         <img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
         <img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />

<img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />      </div>
      
      <!-- 5-10 -->
      <div>
         <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
         <img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />

<img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
         <img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
         <img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" />

</div>
      

</div>
   
</div>

<!-- "next page" action -->
<a class="next browse right"></a>

<script>
$(function() {

$(".scrollable").scrollable();

$(".items img").click(function() {

 // see if same thumb is being clicked
 if ($(this).hasClass("active")) { return; }

 // calclulate large image's URL based on the thumbnail URL (flickr specific)
 var url = $(this).attr("src").replace("_t", "");

 // get handle to element that wraps the image and make it semi-transparent
 var wrap = $("#image_wrap").fadeTo("medium", 0.5);

 // the large image from www.flickr.com
 var img = new Image();


 // call this function after it's loaded
 img.onload = function() {

  // make wrapper fully visible
  wrap.fadeTo("fast", 1);

  // change the image
  wrap.find("img").attr("src", url);

 };

 // begin loading the image from www.flickr.com
 img.src = url;

 // activate item
 $(".items img").removeClass("active");
 $(this).addClass("active");

// when page loads simulate a "click" on the first image
}).filter(":first").click();
});
</script>

****************************************************************

Menu

http://apycom.com/