下载煎蛋无聊图--简单Web浏览-CSDN博客

本文链接：https://blog.csdn.net/xkorey/article/details/84262990

下载下来的煎蛋无聊图方便和别人一块浏览。于是就做了一个简单的web应用。供局域网内一块浏览图片。
在网上找了一个jquery的图片浏览插件：
[url]http://blueimp.github.com/Bootstrap-Image-Gallery/[/url]
下载地址为：
[url]https://github.com/blueimp/jQuery-Image-Gallery/downloads[/url]

说下图片浏览实现方法：
将下载下来的图片放入img文件夹下无聊图放入funny文件夹下，妹子图放入girl文件夹下。
通过ajax访问后台来获取文件夹中的文件名，返回给页面。页面通过动态创建img标签来访问
文件夹中的图片

浏览页面，30张图片一页：
[img]http://dl.iteye.com/upload/picture/pic/115771/1cc2169d-3fbd-3691-b334-057e40b49932.jpg[/img]

浏览图片：
[img]http://dl.iteye.com/upload/picture/pic/115773/0a18adea-cb01-36b5-8d5d-82ca4c5dfd4f.png[/img]

web图片浏览项目目录如图：
[img]http://dl.iteye.com/upload/picture/pic/115769/78cbf74f-0c12-3186-8bb6-6e361a58a30d.png[/img]

js和css打包，就不贴代码了。

index.html 代码。




<!DOCTYPE HTML>

<html lang="en">
<head>
<meta charset="utf-8">
<title>Funny Day</title>
<meta name="description" content="jQuery Image Gallery is an extension to the Dialog component of jQuery UI, to ease navigation between a set of gallery images. It features mouse and keyboard navigation, transition effects, fullscreen mode and slideshow functionality.">
<meta name="viewport" content="width=device-width">
<!-- jQuery UI styles -->
<link rel="stylesheet" href="css/jquery-ui.css" id="theme">
<!-- jQuery Image Gallery styles -->
<link rel="stylesheet" href="css/jquery.image-gallery.min.css">
<!-- Generic page styles -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<ul class="nav">
    <li><a href="https://github.com/blueimp/jQuery-Image-Gallery/downloads">Downloads</a></li>
    <li><a href="https://github.com/blueimp/jQuery-Image-Gallery">Source Code</a></li>
    <li><a href="https://github.com/blueimp/jQuery-Image-Gallery">Documentation</a></li>
    <li><a href="https://github.com/blueimp/jQuery-Image-Gallery/issues">Issues</a></li>
    <li><a href="https://blueimp.net">© Sebastian Tschan</a></li>
</ul>
<br>
<h1 id="bg">搞笑图</h1>
<blockquote id="page">

</blockquote>
<br>
<div>
    <span id="buttonset">
        <input type="checkbox" id="option-fullscreen"><label for="option-fullscreen">Fullscreen</label>
        <input type="checkbox" id="option-slideshow"><label for="option-slideshow">Slideshow</label>
         <input enabled type="checkbox" checked id="option-搞笑图" onclick="loadFunny(0)"><label for="option-搞笑图">搞笑图</label>
        <input type="checkbox"  id="option-美女图" onclick="loadFunny(1)"><label for="option-美女图">美女图</label>
    </span>
    <select id="effect">
        <option>blind</option>
        <option>clip</option>
        <option>drop</option>
        <option>explode</option>
        <option selected>fade</option>
        <option>fold</option>
        <option>puff</option>
        <option>random</option>
        <option>slide</option>
        <option>scale</option>
    </select>
    <select id="theme-switcher">
        <option value="base">Base</option>
        <option value="black-tie">Black Tie</option>
        <option value="blitzer">Blitzer</option>
        <option value="cupertino">Cupertino</option>
        <option value="dark-hive">Dark Hive</option>
        <option value="dot-luv">Dot Luv</option>
        <option value="eggplant">Eggplant</option>
        <option value="excite-bike">Excite Bike</option>
        <option value="flick">Flick</option>
        <option value="hot-sneaks">Hot sneaks</option>
        <option value="humanity">Humanity</option>
        <option value="le-frog">Le Frog</option>
        <option value="mint-choc">Mint Choc</option>
        <option value="overcast">Overcast</option>
        <option value="pepper-grinder">Pepper Grinder</option>
        <option value="redmond">Redmond</option>
        <option value="smoothness">Smoothness</option>
        <option value="south-street" selected>South Street</option>
        <option value="start">Start</option>
        <option value="sunny">Sunny</option>
        <option value="swanky-purse">Swanky Purse</option>
        <option value="trontastic">Trontastic</option>
        <option value="ui-darkness">UI Darkness</option>
        <option value="ui-lightness">UI Lightness</option>
        <option value="vader">Vader</option>
    </select>
</div>
<br>
<br>
<!-- The container element for the gallery images -->
<div id="gallery"></div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<!-- The Load Image plugin, providing image loading and resizing functionality -->
<script src="js/load-image.min.js"></script>
<!-- The jQuery Image Gallery plugin -->
<script src="js/jquery.image-gallery.min.js"></script>
<!-- The main application script -->
<script src="js/main.js"></script>
<script>
var dat,imr;
var pn=0;var fk="funny/";
function next(p){
	var gallery = $('#gallery'),url="img/"+fk;
	gallery.html("");
	for(var __l=(Number(p)*30);__l<Number((Number(p)+1)*30);__l++){

	var photo = dat.split(",")[__l];
	if(!photo) break;
	$('<a rel="gallery"/>')
    .append($('<img width=200px height=200px>').prop('src',url+photo))
    .prop('href', url+photo)
//    .css('height', '100px')
    .appendTo(gallery);
	}
}
function loadFunny(f){
	if(pn==f){
		return;
	}else{
		pn=f;
		dat="";
		switch(f){
		case 0:
			fk="funny/";
			break;
		case 1:
			fk="girl/";	
			break;
		}
		$.ajax({
	        url: 'funny.jsp?file='+fk,
	        async:false
	    }).done(function (data) {
	    	dat=data;
	    });
	}
	var sg = "";
	for(var __i=0;__i<Math.round(dat.split(",").length/30);__i++){
		sg+="<a href=# onclick=next("+__i+")>["+__i+"]</a>";
	}
	$('#bg').html(fk=="funny/"?"搞笑图":"美女图");
	$('#page').html("");
	$('#page').append(sg);
	next(0);
}
</script>
</body>
</html>

funny.jsp ajax响应后台。就是简单的文件夹文件遍历。


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.io.File" %>
<%@ page import="java.util.ArrayList" %>
<%
	String prfix = request.getParameter("file")==null ? "funny":request.getParameter("file");
    File f = new File(request.getServletContext().getRealPath("/img")+"\\"+prfix);
    String result="";
    for(File img:f.listFiles()){
          result+=img.getName()+",";
    }
    result+="1.gif";
    response.getWriter().write(result);
%>

main.js 页面load，ajax请求


/*
 * jQuery Image Gallery Plugin JS Example 2.2
 * https://github.com/blueimp/jQuery-Image-Gallery
 *
 * Copyright 2011, Sebastian Tschan
 * https://blueimp.net
 *
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/MIT
 */

/*jslint unparam: true, regexp: true */
/*global $, document, window */

$(function () {
    'use strict';

    // Initialize the Image Gallery widget:
    $('#gallery').imagegallery();

    // Initialize the theme switcher:
    $('#theme-switcher').change(function () {
        var theme = $('#theme');
        theme.prop(
            'href',
            theme.prop('href').replace(
                /[\w\-]+\/jquery-ui.css/,
                $(this).val() + '/jquery-ui.css'
            )
        );
    });

    // Create a buttonset out of the checkbox options:
    $('#buttonset').buttonset();

    // Listen to options changes:
    $('#buttonset input, #effect').change(function () {
        $('#gallery').imagegallery('option', {
            show: $('#effect').val(),
            hide: $('#effect').val(),
            fullscreen: $('#option-fullscreen').is(':checked'),
            slideshow: $('#option-slideshow').is(':checked') && 5000
        });
    });

    // Enable real fullscreen mode:
    $('#option-fullscreen').click(function () {
        var checkbox = $(this),
            root = document.documentElement;
        if (checkbox.is(':checked')) {
            if (root.webkitRequestFullScreen) {
                root.webkitRequestFullScreen(
                    window.Element.ALLOW_KEYBOARD_INPUT
                );
            } else if (root.mozRequestFullScreen) {
                root.mozRequestFullScreen();
            }
        } else {
            (document.webkitCancelFullScreen ||
                document.mozCancelFullScreen ||
                $.noop).apply(document);
        }
    });

    // Load images via flickr for demonstration purposes:
    $.ajax({
        url: 'funny.jsp?file=funny',
        data: {
            format: 'json',
            method: '',
            api_key: '',
            page:0	
        }
    }).done(function (data) {
    	dat=data;
    	var sg = "";
    	for(var __i=0;__i<Math.round(dat.split(",").length/30);__i++){
    		sg+="<a href=# onclick=next("+__i+")>["+__i+"]</a>";
    	}
    	$('#page').append(sg);
        var gallery = $('#gallery'),
            url="img/funny/";

        $.each(data.split(","), function (index, photo) {
        	if(index<30 && photo)
            $('<a rel="gallery"/>')
                .append($('<img width=200px height=200px>').prop('src',url+photo))
                .prop('href', url+photo)
//                .css('height', '100px')
                .appendTo(gallery);
        });
    });

});