Loading...
顯示具有 Blogger Addon 標籤的文章。 顯示所有文章
顯示具有 Blogger Addon 標籤的文章。 顯示所有文章

2012年2月4日 星期六

[Blogger][Addon] 再來試試另一套燈箱．Zoombox on Blogger

2/04/2012 吉米言 筆回應

image

嗯，去年底其實 Blogger 開始提供內建的燈箱效果，但好像有一些問題，有人在官方還沒提供設定開啟關閉的功能之前就寫了一篇：如何關閉燈箱效果的教學文章，後來 Blogger 後台也提供了設定關閉的選項：

在設定-->文章和留言裡，在燈箱中展示圖片，可以選擇是否啟用。

image

一般如果是使用 Picasa 做為圖床的話，用 Blogger 內建的燈箱也就可以了，只要你看習慣 Google Plus 的燈箱，那個效果是相同的，當這篇文章有多張圖片時，燈箱底下會有一排縮圖可以點選。

但如果不是用 Picasa 做為圖床的話，像我是用 Flickr，實際測試的結果，用來貼在文章裡的小圖必需至少是大尺寸，中型尺寸燈箱就跑不出來，後來我就關掉內建的燈箱效果，還是繼續使用 Colorbox。

image

最近在找燈箱效果的時候，有找到一套 Zoombox，也是使用 jQuery 的燈箱，這套跟 Blogger 內建的燈箱效果一樣，多圖群組時可以在底下顯示一排縮圖可以讓你點選。

寫一下怎麼裝：

一、首先你也是得先下載 Zoombox，解壓放置到你的網路空間上。

請至官網下載：http://www.grafikart.fr/zoombox，目前最新版本是 2.0.16。

二、在 <head></head> 之間，先 include jQuery 和 zoombox 的 js 與 css

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script type="text/javascript" src="http://your.url/zoombox/zoombox.js"></script>

<link href="http://your.url/zoombox/zoombox.css" rel="stylesheet" type="text/css" media="screen" />

三、再來寫一段 jQuery 小語法

<script type="text/javascript">
jQuery(function($){
$('a.zoombox').zoombox();
});
</script>

四、你想要表現有群組燈箱效果的圖，就加上相同的 class=”zgallery1”，同一頁文章的圖片想要分不同群組就換數字，如 zgallery2、zgallery3：

<a href="Firstlink" class="zoombox zgallery1">Link</a>
<a href="SecondLink" class="zoombox zgallery1">Link</a>
<a href="ThirdLink" class="zoombox zgallery1">Link</a>
<a href="Fourthlink" class="zoombox zgallery1">Link</a>

五、進階設定

請參考：http://www.grafikart.fr/zoombox/api

五、實際效果

現在裝在器材控那邊，燈箱效果範例如這篇：[連動測距相機] Petri ES Auto．1974，點圖放大。

image

點進去看 »

文章分類：,

2011年6月3日 星期五

[Blogger Addon] 如何建立自動選取單一文章分類的文章輪播區，以 nivoSlider 為例

6/03/2011 吉米言 筆回應

image

之前所寫的 [Blogger][側邊欄工具] 簡易安裝的分類文章縮圖 Widget，利用該篇文章的同一支 script 改成 nivoslider 的格式之後，就可以建立一個自動選取單一文章分類的文章輪播區。

先介紹一下 nivoSlider 的基本語法》

建議要輪播的圖片最好都使用相同的圖片大小，如果要查更詳細語法請前往 http://nivo.dev7studios.com/#usage。

<!-- in <head> section -->
<link rel="stylesheet" href="http://your.url/nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://your.url/jquery.nivo.slider.pack.js" type="text/javascript"></script>

<!-- in the <body> section -->
<div id="slider">
<img src="images/slide1.jpg" alt="" />
<a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
<img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
<img src="images/slide4.jpg" alt="" />
</div>

<div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div>

簡單說明一下，如果你只要放圖片就不用加 <a ….></a>，只有單行的摘要文字就在 <img> 裡面加 title=”…” 即可，如果你所要顯示的摘要文字想要有 HTML 格式的話，那就是 title=”#captionid”，然後在底下加一個 <div id='”captionid”></div>，把內容包在裡面。

再來你要加一下 CSS：一般是加在 </head> 之前

#slider {
position:relative;
width:630px; /* Change this to your images width */
height:350px; /* Change this to your images height */
background:url(images/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}

最後把 nivoSlider 叫出來，一般是加在 </head> 之前

jQuery(document).ready(function($) {
    $('#slider').nivoSlider();
});

自動選取某一分類的作法》

如果你按照上面的方式，nivoslider 有跑出來的話，那就 OK，只不過爾後你要換輪播不同的內容時必須要再去編輯版型的 HTML，所以我寫了一支 script，自動抓取「精選輪播」這個分類的最新 10 篇文章。

參數的話，imgwidth 和 imgheight 就配合你的 CSS，numposts 就是要抓該分類幾篇文章，catname 可以改成你想用來輪播的分類，showWords 是要抓文章的前幾個字，其他的就不解釋了，跟之前寫的 [Blogger][側邊欄工具] 簡易安裝的分類文章縮圖 Widget 那支程式大致上都相同。

<!-- Featured Content Slider Started -->
<script type='text/javascript'>
imgwidth = 630;
imgheight = 350;
showTitle = true;
showWords = 110;
showPostDate = true;
numposts = 10;
home_page = &quot;http://jimmyyen.blogspot.com/&quot;;
catname = &quot;精選輪播&quot;;
</script>
<div class='featuredposts'>
<script src='http://your.url/featuredposts.js' type='text/javascript'/>
</div>
<!-- Featured Content Slider End -->

那支 script 可以在這裡下載：featuredposts.js 參考，然後放到你的空間，粗黑字的地方請置換成你的 script 所在的網址。

有問題歡迎討論。

點進去看 »

文章分類：

2011年5月6日 星期五

[Blogger Addon] 利用 jQuery 來製作 Tab 選單 (參考自男丁格爾)

5/06/2011 吉米言 筆回應

image

參考自男丁格爾大大的文章：http://abgne.tw/jquery/apply-jquery/jquery-web-tabs.html

男丁格爾大大的教學寫得十分詳盡，也可以至男丁格爾大大的文章去看看囉。

我是把這個東西放在一個在 Blog 文章底下另外加上的 section，必須進入文章 (Pagetype = item) 才會顯示 (利用 <b:if> )，然後讓裡頭的 widget 利用 jQuery，使得整個版面不會一直拉長，並且提供 TAB 頁籤來做切換。

點進去看 »

文章分類：,