The Image Gallery Revisited
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.
The Image Gallery Revisited的更多相关文章
- 使用图片视频展示插件blueimp Gallery改造网站的视频图片展示
在很多情况下,我们网站可能会展示我们的产品图片.以及教程视频等内容,结合一个比较好的图片.视频展示插件,能够使得我们的站点更加方便使用,也更加酷炫,在Github上有很多相关的处理插件可以找来使用,有 ...
- 备忘-Android ViewPager 与Gallery滑动冲突解决方法
解决方法,重新定义gallery,禁止触发pager的触摸事件 1 public class UserGallery extends Gallery implements OnGestureListe ...
- Android Gallery
xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android= ...
- S Gallery – 很有特色的响应式 jQuery 相册插件
S Gallery 是一款响应式的 jQuery 相册插件.使用了 HTML5 全屏 API 以及 CSS3 动画 和 CSS3 转换,所以只能在支持这些功能的浏览器中使用. 这款插件它有一个特色功能 ...
- 解决在android开发中ViewPager中Gallery无法滑动问题
我的是在viewpager中某个fragment中有gallery... 导致无法滑动,网上找到解决方法. 自定义Gallery. 代码: import android.content.Context ...
- 25个最佳的 WordPress Gallery 画廊插件
WordPress 画廊插件最适合用于作品展示网站,特别对于那些想以一个奇特的,现代的方式展示他们作品的摄影师.如果你想为你安装 WordPress Gallery 插件,那么下面的是你想要的. 本文 ...
- Android 从Gallery获取图片
本文主要介绍Android中从Gallery获取图片 设计项目布局 <LinearLayout xmlns:android="http://schemas.android.com/ap ...
- Android -- ImageSwitch和Gallery 混合使用
1. 实现效果
- jQuery插件实现图片展开效果,jquery.gallery。仿腾讯QQ空间说说图片展示效果。
公司的项目http://www.umfun.com/,有个说说的页面(和腾讯QQ空间说说一样),里面有个发表图片功能,上传完图片,需要点击展开的效果. 当时手里面事情比较多(公司就我一个前端),忙不过 ...
随机推荐
- SQLSERVER 2008 R2 事务日志已满
方法一: USE [master] GO ALTER DATABASE DNName SET RECOVERY SIMPLE WITH NO_WAIT GO ALTER DATABASE DNName ...
- dell Nx000系列交换机
dell n2048(P) dell n3048(P) dell n4064(F) P: PoE+ F: SFP+ Model GbE 10GbE(SFP+) 40GbE(QSFP+) Layer d ...
- JavaMail 的简单使用
概述 邮件功能模块在大多数网站中,都是必不可少的功能模块.无论是用户注册还是重置密码,邮件都是比较常用的一个方式.本文主要介绍 JavaMail 的简单使用,方便大家快速开发,供大家参考.完整的 de ...
- JavaScript 编写随机四位数验证码(大小写字母和数字)
1.JavaScript编写随机四位数验证码,用到的知识点为: a.Math对象的随机数:Math.random() b.Math对象的取整 :Math.floor() c.处理所需要的下标个数 ...
- linux lnmp搭建
1.安装nginx: yum install gcc -y yum install -y pcre pcre-devel yum install -y zlib zlib-devel yum inst ...
- react里面Fragments的使用
关于react Fragments,React 中一个常见模式是为一个组件返回多个元素.Fragments 可以让你聚合一个子元素列表,并且不在DOM中增加额外节点. render() { retur ...
- this指针和类的继承
神秘的家伙 在对象的世界里,有一个特殊的指针,它叫做this.我们从来没有见过他,但是他却从来都存在.我们通过一个典型的例子来认识它: class Human { char fishc; Human( ...
- 旧文备份: CANopen的LSS子协议中文翻译
有关节点地址和网络波特率的在线设置等:下载
- 旧文备份:对象字典0x1005和0x1006的理解
SYNC不一定由主站产生,因此,产生SYNC的节点,0x1005对象的值一般是0x40000080,第30位为1表示本节点产生 SYNC,而本节点的0x1006对象就是产生同步周期值了;而接收SYNC ...
- C# continue语句
一.C# continue语句 continue语句在循环体中结束本次循环,而重新开始下一次循环. 语法格式如下: continue;二.示例 using System;using System. ...