教育jquery實現圖片放大插件



43 171 58



特效描述:教育jquery實現 圖片放大插件,教育jquery實現圖片放大插件

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/screen.css" media="screen"/>
<link rel="stylesheet" href="css/lightbox.css" media="screen"/>

2. 引入JS

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>

3. HTML代碼

<div class="wrapper">
	<section id="intro" class="section intro-section">
		<header>
			<h1 class="logo">Lightbox<em class="version">2.6</em></h1>
		</header>
		<p class="author">
			by Lokesh Dhakar<br />
	  </p>
		<p class="lead">
	  Lightbox是很小javascript庫用來展示圖片相冊的插件。</p>
  </section>
	<section id="examples" class="section examples-section">
		<header>
			<h2 class="section-header">Examples</h2>
		</header>
		<h3>Single images</h3>
		<div class="image-row">
			<a class="example-image-link" href="img/demopage/image-1.jpg" data-lightbox="example-1"><img class="example-image" src="img/demopage/thumb-1.jpg" alt="thumb-1" width="150" height="150"/></a>
			<a class="example-image-link" href="img/demopage/image-2.jpg" data-lightbox="example-2" title="Optional caption."><img class="example-image" src="img/demopage/thumb-2.jpg" alt="thumb-1" width="150" height="150"/></a>
		</div>
		<h3 style="clear: both;">An image set</h3>
		<div class="image-row">
			<div class="image-set">
				<a class="example-image-link" href="img/demopage/image-3.jpg" data-lightbox="example-set" title="Click on the right side of the image to move forward."><img class="example-image" src="img/demopage/thumb-3.jpg" alt="Plants: image 1 0f 4 thumb" width="150" height="150"/></a>
				<a class="example-image-link" href="img/demopage/image-4.jpg" data-lightbox="example-set" title="Or press the right arrow on your keyboard."><img class="example-image" src="img/demopage/thumb-4.jpg" alt="Plants: image 2 0f 4 thumb" width="150" height="150"/></a>
				<a class="example-image-link" href="img/demopage/image-5.jpg" data-lightbox="example-set" title="The script preloads the next image in the set as you're viewing."><img class="example-image" src="img/demopage/thumb-5.jpg" alt="Plants: image 3 0f 4 thumb" width="150" height="150"/></a>
				<a class="example-image-link" href="img/demopage/image-6.jpg" data-lightbox="example-set" title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="img/demopage/thumb-6.jpg" alt="Plants: image 4 0f 4 thumb" width="150" height="150"/></a>
			</div>
		</div>
	</section>
	<section id="how-to-use" class="section how-to-use-section">
		<header>
			<h2 class="section-header">How to use</h2>
			<h2 class="section-subheader">Step-by-step instructions</h2>
		</header>
		<h3>Part 1 - Get setup</h3>
		<ol>
			<li>Download and unzip the latest version of Lightbox from above.</li>
			<li>Look inside the <code>js</code> folder to find <code>jquery-1.10.2.min.js</code> and <code>lightbox-2.6.min.js</code> and load both of these files from your html page. Load jQuery first:
<pre><code>&lt;script src=&quot;js/jquery-1.10.2.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/lightbox-2.6.min.js&quot;&gt;&lt;/script&gt;
</code></pre></li>
			<li>Look inside the <code>css</code> folder to find <code>lightbox.css</code> and load it from your html page:
<pre><code>&lt;link href=&quot;css/lightbox.css&quot; rel=&quot;stylesheet&quot; /&gt;
</code></pre>
			</li>
			<li>Look inside the <code>img</code> folder to find <code>close.png</code>, <code>loading.gif</code>, <code>prev.png</code>, and <code>next.png</code>. These files are used in <code>lightbox.css</code>. By default, <code>lightbox.css</code> will look for these images in a folder called <code>img</code>.</li>
		</ol>
		<h3>Part 2 - Turn it on</h3>
	<ul>
			<li>Add a <code>data-lightbox</code> attribute to any image link to activate Lightbox. For the value of the attribute, use a unique name for each image. For example:
<pre><code>&lt;a href=&quot;img/image-1.jpg&quot; data-lightbox=&quot;image-1&quot; title=&quot;My caption&quot;&gt;image #1&lt;/a&gt;
</code></pre>
			 <div class="sub-point"><em>Optional:</em> Set the <code>title</code> attribute if you want to show a caption.</div> </li>
			<li>If you have a group of related images that you would like to combine into a set, use the same <code>data-lightbox</code> attribute value for all of the images. For example:
<pre><code>&lt;a href=&quot;img/image-2.jpg&quot; data-lightbox=&quot;roadtrip&quot;&gt;image #2&lt;/a&gt;
&lt;a href=&quot;img/image-3.jpg&quot; data-lightbox=&quot;roadtrip&quot;&gt;image #3&lt;/a&gt;
&lt;a href=&quot;img/image-4.jpg&quot; data-lightbox=&quot;roadtrip&quot;&gt;image #4&lt;/a&gt;
</code></pre></li>
<li class="last-list-item"><div class="sub-point">For you long time Lightbox users, don't fret, you can still enable Lightbox by using <code>rel="lightbox"</code>. The new <code>data-lightbox</code> approach is preferred though as it is valid html.</div></li>
	</li>
		</ul>
	</section>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 圖片翻轉 圖片旋轉 圖片疊加 圖片層疊 圖片延遲加載 圖片延遲 圖片加載 圖片放大鏡 頭像上傳 圖片上傳 圖片拖動 圖片拖拽 圖片淡出淡進 圖片淡出 圖片淡進 二維碼 圖片全屏 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫 圖片廣告 帶縮略圖的幻燈片 地圖 中國地圖 世界地圖 圖片放大縮小 圖片縮放 圖片大小 圖片放大 圖片縮小 圖片變大 圖片變小 純圖片輪播 圖片輪播 旋轉木馬 圖片旋轉木馬 文字旋轉木馬 旋轉木馬插件 圖片收縮展開 圖片收縮 圖片展開 圖片切換 圖片選項卡 圖標選項卡 圖片滑動 圖片滑塊 圖片滾動 圖片滾動條 圖標導航 圖標菜單 彈出層拖動 自動滾動圖片輪播 背景切換 大圖切換 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 手風琴 水平手風琴 垂直手風琴 圖片手風琴 文字手風琴 手風琴插件 放大縮小 變大變小 放大 縮小 變大 變小 縮放 縮放切換 圖表 圖片 圖片插件 頭像截圖 圖片放大縮小 圖片縮放 圖片大小 圖片放大 圖片縮小 圖片變大 圖片變小 圖片相冊 相冊圖片 lightbox
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子