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. (WPF) ComboBox 之绑定

    1.  在UI(Xaml) 里面直接绑定数据. <Window x:Class="WpfTutorialSamples.ComboBox_control.ComboBoxSample& ...

  2. MVC 默认路由 Areas

    1.使用重名controller 在asp.net mvc2以后的版本里面,有了area(区域的概念),这为我们开发中提供了不少方便的地方,但是很不凑巧,若是存在多个重名的controller就会发生 ...

  3. Help for enable SSL 3.0 and disable TLS 1.0..

    https://support.mozilla.org/en-US/questions/967266 i cant find tab Encryption for enable SSL 3.0 and ...

  4. linux 内存地址空间管理 mm_struct

    http://blog.csdn.net/yusiguyuan/article/details/39520933 Linux对于内存的管理涉及到非常多的方面,这篇文章首先从对进程虚拟地址空间的管理说起 ...

  5. flexslider 图片轮播插件参数

    $(window).load(function() { $('.flexslider').flexslider({ animation: "fade", //String: Sel ...

  6. 第50章 读写内部FLASH—零死角玩转STM32-F429系列

    第50章     读写内部FLASH 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/fire ...

  7. 3、SpringBoot+MybatisPlus整合-------代码生成器

    <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</art ...

  8. vue-router 实现分析

    我们分别从不同的视角来看 vue-router. http://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247485737&idx ...

  9. socket传送二进制流的一些总结

    第一次实质性的接触socket通信方面的工作,所以遇到的问题还真不少,写篇博客记录一下,提升下记忆. 需求是通过私有协议进行二进制数据的传输,必须保证数据包不能被丢失,所以选择tcp的socket进行 ...

  10. LeetCode207 课程表

    问题:课程表 现在你总共有 n 门课需要选,记为 0 到 n-1. 在选修某些课程之前需要一些先修课程. 例如,想要学习课程 0 ,你需要先完成课程 1 ,我们用一个匹配来表示他们: [0,1] 给定 ...