jQuery彈出視窗瀏覽圖片

阿新 • • 發佈：2019-01-18

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>彈出燈箱視窗瀏覽圖片-柯樂義</title>
 6 <link rel="stylesheet" href="http://keleyi.com/keleyi/phtml/jqtexiao/3/css/keleyi.css">
 7 <script type="text/javascript" 
 src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
 8 <script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqtexiao/3/js/keleyi.min.js"></script>
 9 <style>img{border:0px}</style>
10 </head>
11 
12 <body>
13 <h2>彈出視窗瀏覽圖片</h2 
>
14 <div><a href="http://keleyi.com/a/bjac/ppdss7ux.htm">原文</a> 
15 請點選下列圖片
16 </div>
17 <div class="dengxaing-keleyi-com"> 
18 
19 <a title="2013-8-21" href="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-8-21_w.jpg">
20 <img width="133" height="75" 
 src="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-8-21_s.jpg"></a> 
21 
22 <a title="2013-9-13" href="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-13_w.jpg"> 
23 <img width="133" height="75" src="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-13_s.jpg"></a>
24 
25 <a title="2013-9-15" href="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-15_w.jpg">
26 <img width="133" height="75" src="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-15_s.jpg"></a> 
27 
28 <a title="2013-9-16" href="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-16_w.jpg">
29 <img width="133" height="75" src="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-16_s.jpg"></a> 
30 
31 <a title="2013-9-17" href="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-17_w.jpg">
32 <img width="133" height="75" src="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-17_s.jpg"></a> 
33 
34 <a title="2013-9-23" href="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-23_w.jpg">
35 <img width="133" height="75" src="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-23_s.jpg"></a> 
36 
37 <a title="2013-10-2" href="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-10-2_w.jpg">
38 <img width="133" height="75" src="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-10-2_s.jpg"></a>
39 </div>
40 
41 <script type="text/jscript">
42 $(document).ready(function() {
43 
44 $('.dengxaing-ke' + 'leyi-com').magnificPopup({
45 delegate: 'a',
46 type: 'image',
47 tLoading: 'Loading image #%curr%...',
48 mainClass: 'mfp-img-mobile',
49 gallery: {
50 enabled: true,
51 navigateByImgClick: true,
52 preload: [0,1] // Will preload 0 - before current, and 1 after the current image
53 },
54 image: {
55 tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
56 titleSrc: function(item) {
57 return item.el.attr('title') + '<small>by Keleyi</small>';
58 }
59 }
60 });
61 
62 
63 });
64 
65 </script>
66 </body>
67 </html>

jQuery彈出視窗瀏覽圖片

1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>

jQuery 彈出視窗2秒後自動關閉

修改資料後需要給使用者一個提示，下面是html程式碼： <!DOCTYPE HTML> <html> <head> <title>可設定內容彈

jQuery彈出美女大圖片

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport"

jQuery彈出視窗外掛LeanModal的使用方法

步驟 1：將 JQuery，jquery.leanModal.min.js 新增到您的頁面： <script src="Javascript/jquery-1.4.1.min.js" ty

JQuery 彈出視窗，(div顯示與隱藏)，隱藏層半透明

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="te

jQuery ColorBox彈出視窗外掛

一、Colorbox外掛介紹 ColorBox是一個基於jQuery 1.3 的輕量級，在壓縮後只有10K的大小，自定義燈箱外掛，功能非常強大，支援圖片，圖片組，ajax，inline和iframed內容，燈箱樣式完全由使用者控制，可自定義CSS樣式，不需要改寫Color

jquery 彈出框自適應視窗垂直水平居中

<html> <head> <title>彈出框自適應</title> <script src="jquery-1.10.2.min

多種彈出視窗，彈出層，包括ajax，圖片等載入

<p>It's easy to override the styling of Featherlight. All you need to do is specify an additional class in the data-featherlight-variant

jQuery實現自定義樣式的彈出視窗和確認框

(function () { $.MsgBox = { Alert: function (title, msg) { GenerateHtml("alert", title, msg); btn

jQuery實現簡單彈出視窗

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

【JQuery】控制元件-實現自定義樣式的彈出視窗和確認框

Html程式碼： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="h

用jQuery實現彈出視窗彈出div層

通過今天的jquery例項學習，我們要達到這樣的效果：點選頁面的連結，彈出一個div層，同時頁面的其他部分變灰並且不能點選；無論是改變瀏覽器視窗大小還是下拉滾動條，這個彈出層都能始終保持居中；點選頁面的關閉按鈕，彈出層

如何讓彈出視窗自適應圖片的大小

解決思路：主要思路是用window.open()方法開啟一個視窗，然後再根據圖片的大小resizeTo()視窗大小，必要時再用moveTo()方法調整視窗位置。現在問題在於如何獲取圖片的大小。具體步驟：方法一。我們知道，DHTML裡有個Image()物件，只要設定圖片源

JQuery 彈出層，始終顯示在屏幕正中間

filter scrolltop rep 指定 mode spa -c target mod 1.讓層始終顯示在屏幕正中間：樣式代碼： Html代碼 .model{ position: absolute; z-ind

jQuery彈出層layer插件的使用

layui scroll 彈出層 eight flow one max func 簡單引入插件layer 觸發彈出層的按鈕/鏈接 <a href="javascript:showPop();"> <img src="" /> </a

jquery彈出框

pos AD hid doctype play pan start nbsp position <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

jquery-彈出層

ges cti 關閉按鈕 pointer otto int flow lock 內容 html： <html><head> <meta charset="utf-8"> <title>jquery彈出層</title&g

SweetAlert讓訊息彈出視窗更加具有個性化！

SweetAlert SweetAlert是指可對JavaScript標準功能的alert()及confirm()的彈出視窗進行個性化定製的庫。 SweetAlert的要點官網上有很多示例，看了這些基本上就OK了。但是，在kintone上使用時，【彈出訊息後更新頁面】這個處理只參照示例來寫的

Skyline Terra Explorer6.6彈出視窗實現複製功能

前段時間繼續下來的基於Skyline的B/S專案，是基於Terra Explorer6.6實現的。專案中涉及到基於三維模型查詢裝置編碼等操作，從使用者友好角度來講，查詢到的裝置編碼應該要支援複製，方便使用者基於編碼的二次查詢和操作。 1. Terra Explorer彈出視窗限制通常來說，在瀏覽器中複製

關於彈出視窗的設定

<dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server" CloseOnEscape="True" Modal

jQuery彈出視窗瀏覽圖片

相關推薦