Lets apply the Best practices to the Image Gallery .

/***　　　　　　index.html　　　　　　***/

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Image Gallery</title>

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

</head>

<body>

    <h1>Snapshiots</h1>

    <ul id="imagegallery">

        <li>

            <a href="images/fireworks.jpg" title="A fireworks display"> Fireworks </a>

        </li>

        <li>

            <a href="images/coffee.jpg" title="A cup of black coffe"> Coffee </a>

        </li>

        <li>

            <a href="images/rose.jpg" title="A red, red rose"> Rose </a>

        </li>

        <li>

            <a href="images/bigben.jpg" title="The famous clock"> Big Ben </a>

        </li>

    </ul>

    <div id="placeholder">

        <img src="data:images/placeholder.gif" alt="my image gallery" >

    </div>

    <div id="description">

        <p>Choose an image</p>

    </div>

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

    <script type="application/javascript">

//        alert (description.childNodes.length);

//        window.onload = countBodyChildren;

//var description = document.getElementById("description");

//alert (description.childNodes[2].nodeValue);

    </script>

</body>

</html>

/***　　　　　　showPic.js　　　　　　***/

/**

 * Created by Administrator on 9/9/2015.

 */

function addLoadEvent(func) {

    var oldonload = window.onload;

    if( typeof window.onload != 'function') {

        window.onload = func;

    } else {

        window.onload = function() {

            oldonload();

            func();

        }

    }

}

function prepareGallery() {

    if( !document.getElementsByTagName )  return false;

    if( !document.getElementById ) return false;

    if( !document.getElementById("imagegallery") ) return false;

    var gallery = document.getElementById("imagegallery");

    var links = gallery.getElementsByTagName("a");

    for(var i=0; i<links.length; i++) {

        links[i].onclick = function() {

            return showPic(this) ? false : true;

        }

    }

}

/*

    you can use this function to count how many children nodes the body element contains

 */

function countBodyChildren() {

    var body_element = document.getElementsByTagName("body")[0];

    alert(body_element.nodeType);

    alert( body_element.childNodes.length );

}

function showPic(whicPic) {

    if( !document.getElementsByTagName ) return false;

    if( !document.getElementById("placeholder") ) return false;

    var source = whicPic.getAttribute("href");

    var placeholder = document.getElementById("placeholder");

    var img = placeholder.getElementsByTagName("img")[0];

    img.setAttribute("src", source);

    if(document.getElementById("description")) {

        var text = whicPic.getAttribute("title") ? whicPic.getAttribute("title") : 3;

        var description = document.getElementById("description");

        var desc_p = description.getElementsByTagName("p")[0];

        desc_p.firstChild.nodeValue = text;

    }

    return true;

}

addLoadEvent( prepareGallery );

/***　　　　　　layout.css　　　　　　***/

body{

    font-family: "Helvetica", "Arial", serif;

    color: #333;

    background-color: #ccc;

    margin: 1em 10%;

}

h1{

    color: #333;

    /*background-color: #777;*/

}

a{

    color: #c60;

    background-color: transparent;

    font-weight: bold;

    text-decoration: none;

}

ul{

    padding:;

}

li{

    float: left;

    padding: 1em;

    list-style: none;

}

img {

    display: block;

    clear: both;

}

I think there is a function you can use in the furture, thats the addLoadEvent() :

function addLoadEvent(func) {

    var oldonload = window.onload;

    if( typeof window.onload != 'function') {

        window.onload = func;

    } else {

        window.onload = function() {

            oldonload();

            func();

        }

    }

}

This is a good plan for the future expansion.

This effectively creates a queue of functions to be executed when the page loads.

To add functions to this queue, I just need to write :
        addLoadEvent( firstFunction );
        addLoadEvent( secondFunction );

The Image Gallery Revisited的更多相关文章

  1. 使用图片视频展示插件blueimp Gallery改造网站的视频图片展示

    在很多情况下,我们网站可能会展示我们的产品图片.以及教程视频等内容,结合一个比较好的图片.视频展示插件,能够使得我们的站点更加方便使用,也更加酷炫,在Github上有很多相关的处理插件可以找来使用,有 ...

  2. 备忘-Android ViewPager 与Gallery滑动冲突解决方法

    解决方法,重新定义gallery,禁止触发pager的触摸事件 1 public class UserGallery extends Gallery implements OnGestureListe ...

  3. Android Gallery

    xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android= ...

  4. S Gallery – 很有特色的响应式 jQuery 相册插件

    S Gallery 是一款响应式的 jQuery 相册插件.使用了 HTML5 全屏 API 以及 CSS3 动画 和 CSS3 转换,所以只能在支持这些功能的浏览器中使用. 这款插件它有一个特色功能 ...

  5. 解决在android开发中ViewPager中Gallery无法滑动问题

    我的是在viewpager中某个fragment中有gallery... 导致无法滑动,网上找到解决方法. 自定义Gallery. 代码: import android.content.Context ...

  6. 25个最佳的 WordPress Gallery 画廊插件

    WordPress 画廊插件最适合用于作品展示网站,特别对于那些想以一个奇特的,现代的方式展示他们作品的摄影师.如果你想为你安装 WordPress Gallery 插件,那么下面的是你想要的. 本文 ...

  7. Android 从Gallery获取图片

    本文主要介绍Android中从Gallery获取图片 设计项目布局 <LinearLayout xmlns:android="http://schemas.android.com/ap ...

  8. Android -- ImageSwitch和Gallery 混合使用

    1. 实现效果

  9. jQuery插件实现图片展开效果，jquery.gallery。仿腾讯QQ空间说说图片展示效果。

    公司的项目http://www.umfun.com/,有个说说的页面(和腾讯QQ空间说说一样),里面有个发表图片功能,上传完图片,需要点击展开的效果. 当时手里面事情比较多(公司就我一个前端),忙不过 ...

随机推荐

  1. 谁动了我的I/O？

    首先,是信用卡账单欠款0.13美刀~~~然后上亚马逊云查了一下账单. 3M次I/O...(1215133次超额的,2000000次免费的.) 于是监控了一下数据:每秒至少写5次,每秒写300KB,平均 ...

  2. GNU Nano编辑器

    ^表示 control建 ^X 退出 nano ^O 保存文件 ^R 插入其他文件内容至光标位置 ^W 查找字符串 ^Y 跳至前一屏 ^V 跳至后一屏 ^K 剪切光标所在行并保存到剪贴板,或剪切选中内 ...

  3. git/github初级运用自如（转自：虫师）

    注:本文来源于 虫师博客(http://www.cnblogs.com/fnng/archive/2012/01/07/2315685.html) ,内容详尽,真实有用. 另:发一个github使用教 ...

  4. Android（java）学习笔记71：Tab标签的使用

    1. 案例1---TabProject (1)首先是main.xml文件: <?xml version="1.0" encoding="utf-8"?&g ...

  5. ELF文件格式与进程地址空间的联系

    http://blog.csdn.net/q_l_s/article/details/52597330 三.分析在fork产生新进程中ELF文件格式与进程地址空间的联系 1.进程的虚拟地址空间 每个程 ...

  6. mysql 全连接 报错1051的原因

    由于mysql 不支持 直接写full outer join 或者 full join来表示全外连接但是可以用left right union right 代替 下面是例子: select * fro ...

  7. cudaMalloc和cudaMallocPitch

    原文链接 偶有兴趣测试了一下题目中提到的这两个函数,为了满足对齐访问数据,咱们平时可能会用到cudamallocPitch,以为它会带来更高的效率.呵呵,这里给出一段测试程序,大家可以在自己的机器上跑 ...

  8. Java中的逻辑运算符短路效应

    在Java中逻辑运算符&& 和 ||,它们都存在短路效应. 对于a && b,只有当a和b同时为true时,整个表达式才为true(在java中,首先运算表达式a,如果 ...

  9. ibator自动代码生成

    首先,强烈推荐一篇文章,介绍的特详细 http://www.iteye.com/topic/821983 1. 插件安装 http://blog.csdn.net/rchm8519/article/d ...

  10. SQL之Case when 语句

    --case简单函数 (把多列变成单列) ' then '女' when ' then '男' else '其他' end from [Northwind].[dbo].[Users] --case搜 ...