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. [一个小问题]Mainfest配置文件的version问题小结

    问题起源自己安装好产品的新build,然后用自己本地编译出来的其中一个DLL去替换到产品中,本来以为可以正常执行,但是却发现这个新DLL无法被Load,无法被使用. 从Event Viewer里找到了 ...

  2. Quick How-To deny/allow IP using iptables

    How to block an IP using iptables? iptables -A INPUT -s xx.xx.xx.xx -j DROP How to block an IP for a ...

  3. Ehcache的配置与使用

    Ehcache是JAVA内制的一个缓存框架! 目的:缓解频繁读取数据库的压力; 初步配置如下: <?xml version="1.0" encoding="UTF- ...

  4. vue-表单绑定

    表单数据绑定1.1你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖,它负责监听用户的输 ...

  5. 如何用代码填充S/4HANA销售订单行项目的数量字段

    我的任务是用代码生成S/4HANA销售订单(Sales Order)的行项目,并且填充对应的quantity(数量)值. 最开始我用了下面的代码,把quantity的值写入item字段target_q ...

  6. IOS 封装View的fram（X Y W H ）

    @interface UIView (Extension) @property (nonatomic, assign) CGFloat x; @property (nonatomic, assign) ...

  7. IOS 自定义Operation(下载功能)

    一个下载操作就交给一个HMDownloadOperation对象 HMDownloadOperation.h / .m @class HMDownloadOperation; @protocol HM ...

  8. 97: Address family not supported by protocol，nginx服务启动失败

    1.启动nginx服务报错 环境:centos 6.9,yum安装的nginx,启动报错 [root@lnmp ~]# nginx -tnginx: the configuration file /e ...

  9. Docker中的三个基本概念容器（container）、镜像（image）和仓库（registry）之间有什么关系？

    Docker镜像是一个特殊的文件系统,除了提供容器运行时所需的程序.库.资源.配置等文件外,还包含了一些为运行时准备的一些配置参数(如匿名卷.环境变量.用户等).镜像不包含任何动态数据,其内容在构建之 ...

  10. 20145238-荆玉茗 《Java程序设计》第二周学习总结

    20145238 <Java程序设计>第2周学习总结 教材学习内容总结 关于一些格式方面的问题: 1.关键字:在定义java文件名的时候要避免这些关键字的出现,因为他们在java程序语言中 ...