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. 运行python文件报SyntaxError：Non-ASCII character '\xe7'

    以下是报错内容: 在文件页头加上: #coding=uft-8 ~解决了~ 记录一下(捂脸)

  2. JavaScript基础：比较运算符——==与 ===；！=与！==

    var x=10, y="10", m=15 x==y;//返回true x===y;//返回false x!=y;//返回false x!==y;//返回true//同理cons ...

  3. C#学习基础，面向对象的三大特征

    学习C#编程,相信大家除了经常接触的是hello world之外,更多的是进一步的去熟悉这门语言的基本特征,以及有哪些概念是我们必要掌握了解的,相信大家都是会知道面向对象的三大特性分别是:封装,继承, ...

  4. 寄生构造函数模式 js

    有一点需要说明:首先返回的对象与构造函数或者构造函数的原型属性之间没有关系,也就是说构造函数返回的对象与在构造函数外部创建的对象没有什么不同,为此不能依赖 instanceof 操作符来确定对象类型. ...

  5. IOS笔记 : 一些小技巧

    计算单元格高度,在自定义cell中 -(void) resizeTheHeight{ CGFloat contentWidth = 280; UIFont *font = [UIFont fontWi ...

  6. AJAX(四)：XHR2支持的方法

    XMLHttpRequest 1级只是把已有的XHR对象的实现细节描述了出来.而XMLHttpRequest 2级则进一步发展了XHR FormDataFormData为序列化表单以及创建与表单格式相 ...

  7. [Pytorch] pytorch笔记 <二>

    pytorch笔记2 用到的关于plt的总结 plt.scatter scatter(x, y, s=None, c=None, marker=None, cmap=None, norm=None, ...

  8. mysql题目（二学年）

    1.哪些命令可以知道mysql安装的版本 mysqladmin --version mysql --version 2.关于mysql密码说法正确的是 初始化安装完毕后密码为空 3.进入或者打开数据库 ...

  9. SpringBoot发布WAR启动报错：Error assembling WAR: webxml attribute is required

    Spring Boot发布war包流程: 1.修改web model的pom.xml <packaging>war</packaging> SpringBoot默认发布的都是j ...

  10. C语言结构体排序

    定义学生信息结构体和结构体数组,包括学号.两门百分制成绩和姓名;键盘输入 学生不多于 30 人的信息,以输入成绩为负数或大于 100 作为输入结束;按照学号和平均成绩排序,并输出学生信息 //输入学生 ...