安卓开发拍照或相册换图像




android 打开相册页面 安卓开发相册_js


android 打开相册页面 安卓开发相册_js


Image Flow – Multiple Albums Long ago I made tutorial about creating nice photo album with Image Flow script. Today I made up my mind to enhance this work with adding possibility to use it for multiple albums. So, you can load different sets of images (albums) on-fly. Finally, I put our albums into CSS3 horizontal accordion.

Image Flow –多个相册很久以前，我进行了有关使用Image Flow脚本创建漂亮相册的教程。 今天，我下定决心要增强这项工作，增加将其用于多个专辑的可能性。 因此，您可以即时加载不同的图像集(相册)。 最后，我将专辑放入CSS3水平手风琴中。

Our today’s result:

我们今天的结果：


android 打开相册页面 安卓开发相册_html_03


android 打开相册页面 安卓开发相册_android 打开相册页面_04


Here are our demo and source package:

这是我们的演示和源代码包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the source files and lets start coding !

好的，下载源文件并开始编码！

(Step 1. HTML)

In the beginning, let prepare markup for our albums (pure CSS3 accordion):

首先，让我们为专辑准备标记(纯CSS3手风琴)：

(index.html)
<div class="accordion">
    <span id="tab1"></span>
    <span id="tab2"></span>
    <span id="tab3"></span>
    <div class="tabs">
        <dl class="tab1">
            <dd>
                <a href="#tab1">Album1</a>
                <div id="1" class="sets"><img src="photos/1.jpg" alt="" /></div>
            </dd>
        </dl>
        <dl class="tab2">
            <dd>
                <a href="#tab2">Album2</a>
                <div id="2" class="sets"><img src="photos/5.jpg" alt="" /></div>
            </dd>
        </dl>
        <dl class="tab3">
            <dd>
                <a href="#tab3">Album3</a>
                <div id="3" class="sets"><img src="photos/9.jpg" alt="" /></div>
            </dd>
        </dl>
    </div>
</div>
<div class="accordion">
    <span id="tab1"></span>
    <span id="tab2"></span>
    <span id="tab3"></span>
    <div class="tabs">
        <dl class="tab1">
            <dd>
                <a href="#tab1">Album1</a>
                <div id="1" class="sets"><img src="photos/1.jpg" alt="" /></div>
            </dd>
        </dl>
        <dl class="tab2">
            <dd>
                <a href="#tab2">Album2</a>
                <div id="2" class="sets"><img src="photos/5.jpg" alt="" /></div>
            </dd>
        </dl>
        <dl class="tab3">
            <dd>
                <a href="#tab3">Album3</a>
                <div id="3" class="sets"><img src="photos/9.jpg" alt="" /></div>
            </dd>
        </dl>
    </div>
</div>

This is an easy definition list with album names and little thumbnails of the albums. And now, let prepare a markup for our Image Flow object.

这是一个简单的定义列表，其中包含专辑名称和专辑的缩略图。 现在，让我们为Image Flow对象准备一个标记。 

<div id="imageFlow">
    <div class="text">
        <div class="title">Loading</div>
        <div class="legend">Please wait...</div>
    </div>
    <div class="scrollbar">
        <img class="track" src="images/sb.gif" alt="">
        <img class="arrow-left" src="images/sl.gif" alt="">
        <img class="arrow-right" src="images/sr.gif" alt="">
        <img class="bar" src="images/sc.gif" alt="">
    </div>
</div>
<div id="imageFlow">
    <div class="text">
        <div class="title">Loading</div>
        <div class="legend">Please wait...</div>
    </div>
    <div class="scrollbar">
        <img class="track" src="images/sb.gif" alt="">
        <img class="arrow-left" src="images/sl.gif" alt="">
        <img class="arrow-right" src="images/sr.gif" alt="">
        <img class="bar" src="images/sc.gif" alt="">
    </div>
</div>

(Step 2. CSS)

Now – it’s time to turn our definition list of the albums into a great CSS3 switcher:

现在–是时候将我们的专辑定义列表变成一个很棒CSS3切换器了：

(css/accordion.css)
.accordion {
    background-color: #444;
    margin: 15px auto;
    padding: 5px;
    position: relative;
    width: 480px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
    -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
}
.accordion span {
    display: none
}
.tabs {
    background-color: #FFFFFF;
    overflow: hidden;
}
.tabs dl {
    float: left;
    overflow: hidden;
    width: 100px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.tabs dl dd {
    overflow: hidden;
    width: 280px;
}
.tabs dl dd a {
    background-color: #C8CEFF;
    border: 1px solid;
    border-color:#ccc;border-bottom-color:#aaa;
    display: block;
    float: left;
    font-size: 18px;
    line-height: 126px;
    padding: 0 20px;
    text-decoration: none;
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffffff,EndColorStr=#ffe0e0e0);
    background-image: -moz-linear-gradient(top,#fff 0,#e0e0e0 100%);
    background-image: -ms-linear-gradient(top,#fff 0,#e0e0e0 100%);
    background-image:-o-linear-gradient(top,#fff 0,#e0e0e0 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#e0e0e0));
    background-image: -webkit-linear-gradient(top,#fff 0,#e0e0e0 100%);
    background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
.tabs dl dd div {
    float: left;
    height: 128px;
}
.tabs dl dd div img {
    height: 128px;
    padding: 0 3px;
}
.tabs dl dd a:hover {
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
    -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
}
.tabs dl dd a:active {
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#e6e6e6,EndColorStr=#dcdcdc);
    background-image: -moz-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: -ms-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: -o-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc));
    background-image: -webkit-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: linear-gradient(to bottom,#e6e6e6 0,#dcdcdc 100%);
}
#tab1:target ~ .tabs .tab1, #tab2:target ~ .tabs .tab2, #tab3:target ~ .tabs .tab3 {
    width: 280px;
}
#tab1:target ~ .tabs .tab1 dd a,
#tab2:target ~ .tabs .tab2 dd a,
#tab3:target ~ .tabs .tab3 dd a {
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#e6e6e6,EndColorStr=#dcdcdc);
    background-image: -moz-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: -ms-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: -o-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc));
    background-image: -webkit-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: linear-gradient(to bottom,#e6e6e6 0,#dcdcdc 100%);
}
.accordion {
    background-color: #444;
    margin: 15px auto;
    padding: 5px;
    position: relative;
    width: 480px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
    -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
}
.accordion span {
    display: none
}
.tabs {
    background-color: #FFFFFF;
    overflow: hidden;
}
.tabs dl {
    float: left;
    overflow: hidden;
    width: 100px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.tabs dl dd {
    overflow: hidden;
    width: 280px;
}
.tabs dl dd a {
    background-color: #C8CEFF;
    border: 1px solid;
    border-color:#ccc;border-bottom-color:#aaa;
    display: block;
    float: left;
    font-size: 18px;
    line-height: 126px;
    padding: 0 20px;
    text-decoration: none;
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffffff,EndColorStr=#ffe0e0e0);
    background-image: -moz-linear-gradient(top,#fff 0,#e0e0e0 100%);
    background-image: -ms-linear-gradient(top,#fff 0,#e0e0e0 100%);
    background-image:-o-linear-gradient(top,#fff 0,#e0e0e0 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#e0e0e0));
    background-image: -webkit-linear-gradient(top,#fff 0,#e0e0e0 100%);
    background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
.tabs dl dd div {
    float: left;
    height: 128px;
}
.tabs dl dd div img {
    height: 128px;
    padding: 0 3px;
}
.tabs dl dd a:hover {
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
    -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
}
.tabs dl dd a:active {
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#e6e6e6,EndColorStr=#dcdcdc);
    background-image: -moz-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: -ms-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: -o-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc));
    background-image: -webkit-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: linear-gradient(to bottom,#e6e6e6 0,#dcdcdc 100%);
}
#tab1:target ~ .tabs .tab1, #tab2:target ~ .tabs .tab2, #tab3:target ~ .tabs .tab3 {
    width: 280px;
}
#tab1:target ~ .tabs .tab1 dd a,
#tab2:target ~ .tabs .tab2 dd a,
#tab3:target ~ .tabs .tab3 dd a {
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#e6e6e6,EndColorStr=#dcdcdc);
    background-image: -moz-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: -ms-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: -o-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc));
    background-image: -webkit-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: linear-gradient(to bottom,#e6e6e6 0,#dcdcdc 100%);
}

And, we also should stylize our ImageFlow:

而且，我们还应该将ImageFlow样式化：

(css/image-flow.css)
#imageFlow{position:relative;overflow:hidden;background:#000;width:100%;height:500px}
#imageFlow .diapo{position:absolute;left:-4000px;cursor:pointer;-ms-interpolation-mode:nearest-neighbor}
#imageFlow .link{border:dotted #fff 1px;margin-left:-1px;margin-bottom:-1px}
#imageFlow .text{position:absolute;left:0;width:100%;bottom:16%;text-align:center;color:#FFF;font-family:verdana, arial, Helvetica, sans-serif;z-index:1000}
#imageFlow .title{font-size:.9em;font-weight:700}
#imageFlow .legend{font-size:.8em}
#imageFlow .scrollbar{position:absolute;left:10%;bottom:10%;width:80%;height:16px;z-index:1000}
#imageFlow .track{position:absolute;left:1%;width:98%;height:16px;filter:alpha(opacity=30);opacity:0.3}
#imageFlow .arrow-left{position:absolute}
#imageFlow .arrow-right{position:absolute;right:0}
#imageFlow .bar{position:absolute;height:16px;left:25px}
#imageFlow a,#imageFlow a:visited{text-decoration:none;color:#ff8000}
#imageFlow a:hover,#imageFlow a:visited:hover{text-decoration:none;background:#ff8000;color:#fff}
#imageFlow{position:relative;overflow:hidden;background:#000;width:100%;height:500px}
#imageFlow .diapo{position:absolute;left:-4000px;cursor:pointer;-ms-interpolation-mode:nearest-neighbor}
#imageFlow .link{border:dotted #fff 1px;margin-left:-1px;margin-bottom:-1px}
#imageFlow .text{position:absolute;left:0;width:100%;bottom:16%;text-align:center;color:#FFF;font-family:verdana, arial, Helvetica, sans-serif;z-index:1000}
#imageFlow .title{font-size:.9em;font-weight:700}
#imageFlow .legend{font-size:.8em}
#imageFlow .scrollbar{position:absolute;left:10%;bottom:10%;width:80%;height:16px;z-index:1000}
#imageFlow .track{position:absolute;left:1%;width:98%;height:16px;filter:alpha(opacity=30);opacity:0.3}
#imageFlow .arrow-left{position:absolute}
#imageFlow .arrow-right{position:absolute;right:0}
#imageFlow .bar{position:absolute;height:16px;left:25px}
#imageFlow a,#imageFlow a:visited{text-decoration:none;color:#ff8000}
#imageFlow a:hover,#imageFlow a:visited:hover{text-decoration:none;background:#ff8000;color:#fff}

(Step 3. JS)

Now, let’s review our javascript codes. The first one file – is our gallery script:

现在，让我们回顾一下我们的javascript代码。 第一个文件是我们的库脚本：

(js/image-flow.js)

This file is available in our package. Our next file:

该文件在我们的软件包中。 我们的下一个文件：

(js/script.js)
// set another album
function setAlbum(i) {
    imf.create('imageFlow', 'xml/set'+i+'.xml', 0.85, 0.20, 1.5, 10, 5, 7);
}
// main initialization
document.addEventListener('DOMContentLoaded', function() {
    // set first album
    setAlbum(1);
    // attaching 'click' event listener to '.sets'
    [].forEach.call( document.querySelectorAll('.sets'), function(el) {
        el.addEventListener('click', function(e) {
            imf.reinit();
            setAlbum(e.currentTarget.id);
        }, false);
    });
});
// set another album
function setAlbum(i) {
    imf.create('imageFlow', 'xml/set'+i+'.xml', 0.85, 0.20, 1.5, 10, 5, 7);
}
// main initialization
document.addEventListener('DOMContentLoaded', function() {
    // set first album
    setAlbum(1);
    // attaching 'click' event listener to '.sets'
    [].forEach.call( document.querySelectorAll('.sets'), function(el) {
        el.addEventListener('click', function(e) {
            imf.reinit();
            setAlbum(e.currentTarget.id);
        }, false);
    });
});

As you can see – this is very small and easy script. Main idea – to attach ‘click’ event listener to our Albums (in our accordion). And, when visitor click at certain album, we will load predefined XML file with a list of images (of selected album).

如您所见–这是非常小的简单脚本。 主要思想-将“ click”事件监听器附加到我们的专辑(在我们的手风琴中)。 而且，当访问者单击某些相册时，我们将加载预定义的XML文件以及(所选相册的)图像列表。

(Step 4. XML)

Finally, we should prepare three XML files: predefined lists of our albums.

最后，我们应该准备三个XML文件：相册的预定义列表。

(xml/set1.xml)
<?xml version="1.0" ?>
<bank>
    <img>
        <src>photos/1.jpg</src>
        <title>Image 1</title>
        <caption>Thailand #1</caption>
    </img>
    <img>
        <src>photos/2.jpg</src>
        <title>Image 2</title>
        <caption>Thailand #1</caption>
    </img>
    <img>
        <src>photos/3.jpg</src>
        <title>Image 3</title>
        <caption>Thailand #1</caption>
    </img>
    <img>
        <src>photos/4.jpg</src>
        <title>Image 4</title>
        <caption>Thailand #1</caption>
    </img>
</bank>
<?xml version="1.0" ?>
<bank>
    <img>
        <src>photos/1.jpg</src>
        <title>Image 1</title>
        <caption>Thailand #1</caption>
    </img>
    <img>
        <src>photos/2.jpg</src>
        <title>Image 2</title>
        <caption>Thailand #1</caption>
    </img>
    <img>
        <src>photos/3.jpg</src>
        <title>Image 3</title>
        <caption>Thailand #1</caption>
    </img>
    <img>
        <src>photos/4.jpg</src>
        <title>Image 4</title>
        <caption>Thailand #1</caption>
    </img>
</bank>
(xml/set2.xml)
<?xml version="1.0" ?>
<bank>
    <img>
        <src>photos/5.jpg</src>
        <title>Image 5</title>
        <caption>Thailand #2</caption>
    </img>
    <img>
        <src>photos/6.jpg</src>
        <title>Image 6</title>
        <caption>Thailand #2</caption>
    </img>
    <img>
        <src>photos/7.jpg</src>
        <title>Image 7</title>
        <caption>Thailand #2</caption>
    </img>
    <img>
        <src>photos/8.jpg</src>
        <title>Image 8</title>
        <caption>Thailand #2</caption>
    </img>
</bank>
<?xml version="1.0" ?>
<bank>
    <img>
        <src>photos/5.jpg</src>
        <title>Image 5</title>
        <caption>Thailand #2</caption>
    </img>
    <img>
        <src>photos/6.jpg</src>
        <title>Image 6</title>
        <caption>Thailand #2</caption>
    </img>
    <img>
        <src>photos/7.jpg</src>
        <title>Image 7</title>
        <caption>Thailand #2</caption>
    </img>
    <img>
        <src>photos/8.jpg</src>
        <title>Image 8</title>
        <caption>Thailand #2</caption>
    </img>
</bank>
(xml/set3.xml)
<?xml version="1.0" ?>
<bank>
    <img>
        <src>photos/9.jpg</src>
        <title>Image 9</title>
        <caption>Thailand #3</caption>
    </img>
    <img>
        <src>photos/10.jpg</src>
        <title>Image 10</title>
        <caption>Thailand #3</caption>
    </img>
    <img>
        <src>photos/11.jpg</src>
        <title>Image 11</title>
        <caption>Thailand #3</caption>
    </img>
    <img>
        <src>photos/12.jpg</src>
        <title>Image 12</title>
        <caption>Thailand #3</caption>
    </img>
</bank>
<?xml version="1.0" ?>
<bank>
    <img>
        <src>photos/9.jpg</src>
        <title>Image 9</title>
        <caption>Thailand #3</caption>
    </img>
    <img>
        <src>photos/10.jpg</src>
        <title>Image 10</title>
        <caption>Thailand #3</caption>
    </img>
    <img>
        <src>photos/11.jpg</src>
        <title>Image 11</title>
        <caption>Thailand #3</caption>
    </img>
    <img>
        <src>photos/12.jpg</src>
        <title>Image 12</title>
        <caption>Thailand #3</caption>
    </img>
</bank>

That’s all!

就这样！

现场演示

(Conclusion)

Now you have it – cool animated image gallery with multiple albums support. We even haven’t used jQuery today. It was pure CSS3 and Javascript. I will be glad to see your thanks and comments. Good luck!

现在，您拥有了–具有多个专辑支持的超酷动画画廊。 今天，我们甚至还没有使用过jQuery。 那是纯CSS3和Javascript。 看到您的感谢和评论，我将非常高兴。 祝好运！

翻译自: https://www.script-tutorials.com/image-flow-multiple-albums/

安卓开发拍照或相册换图像