Home > Developer > Web Develop
Download the picture resource to the Web site's root directory (/usr/local/httpd/htdocs/).
1. Download and unzip:
Yum-y Install ImageMagick # #安装图片转换工具, support convert
Lftp ftp.linuxfan.cn
Lftp ftp.linuxfan.cn:~> CD tools/
Lftp ftp.linuxfan.cn:/tools> Get For_html_img.tar.xz
164757244 bytes Transferred
Lftp ftp.linuxfan.cn:/tools> bye
Tar jxvf for_html_img.tar.xz # #解压
CD img/
2. Scripting:
[Email protected] img]# vim for_html.sh
#!/bin/bash
# #创建相册
echo "Creating album ..."
Mkdir-p Thumbs
########## #创建html头部 ###############
Cat <<eof >index.html
<style type= "Text/css" >
Body {
width:960px;
margin:0 Auto;
BORDER:1PX dashed grey;
padding:10px; Background: #000;
}
img {margin:5px; border:1px solid black;}
H1 {
Color: #fd6edf;
font-size:48px;
Font-style:bold;
Font-family: "Chinese Xingkai"; width:400px;
height:50px;
Background: #eded56;
}
</style>
<body>
<center>
<embed src= "Ibl.mp3" Autostart=true loop=true></embed>
<p>
Eof
########## #为所有图片设置a标签 ###################
for IMG in *.jpg;
Do
Convert "$img"-resize "300x" thumbs/$img # #将大图转为小图并放到thumbs/directory
echo "<a href=\" $img \ "target=\" _blank\ "></a>" >> Index.html
Done
############## #创建网页的尾部 ###############
Cat <<end >>index.html
</p>
</body>
END
echo "Index.html is OK."
: Wq
[Email protected] img]# sh-x for_html.sh
3. Access test:
Http://www.linuxfan.cn/img
This article is from the "12289734" blog, please be sure to keep this source http://12299734.blog.51cto.com/12289734/1908241
Generate a Web page album with A For loop
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
