Sponsor Flip Wall 圖片資訊翻轉中

Sponsor Flip Wall 顯示資料於圖片列表之中，點擊後會翻轉至背面顯示更多的資訊基於 jQuery 框架開發。可用來展示很多的贊助廠商，對於活動網頁是個很方便的套件。範例中使用 PHP 程式語言建立圖片和文字內容的陣列，再以迴圈方式輸出到網頁上顯示。

使用方法：
第一步 載入 Sponsor Flip Wall 需要使用到的 JavaScript 檔
<!-- 使用 Google AJAX API 取得 jQuery 框架 1.8.2 min 版本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- 使用 Google AJAX API 取得 jQuery UI 1.7.2 min 版本 -->
<script src="ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<!-- 載入 Sponsor Flip Wall 的主程式碼-->
<script type="text/javascript" src="jquery.flip.min.js"></script>


第二步 使用 PHP 建立圖片與內容資訊陣列
$sponsors = array(
array('facebook','The biggest social network in the world.','http://www.facebook.com/'),
array('adobe','The leading software developer targeted at web designers and developers.','http://www.adobe.com/'),
array('microsoft','One of the top software companies of the world.','http://www.microsoft.com/'),
array('sony','A global multibillion electronics and entertainment company ','http://www.sony.com/'),
array('dell','One of the biggest computer developers and assemblers.','http://www.dell.com/'),
array('ebay','The biggest online auction and shopping websites.','http://www.ebay.com/'),
array('digg','One of the most popular web 2.0 social networks.','http://www.digg.com/'),
array('google','The company that redefined web search.','http://www.google.com/'),
array('ea','The biggest computer game manufacturer.','http://www.ea.com/'),
array('mysql','The most popular open source database engine.','http://www.mysql.com/'),
array('hp','One of the biggest computer manufacturers.','http://www.hp.com/'),
array('yahoo','The most popular network of social media portals and services.','http://www.yahoo.com/'),
array('cisco','The biggest networking and communications technology manufacturer.','http://www.cisco.com/'),
array('vimeo','A popular video-centric social networking site.','http://www.vimeo.com/'),
array('canon','Imaging and optical technology manufacturer.','http://www.canon.com/')
);
shuffle($sponsors);

第三步 建立 HTML 與 PHP 迴圈輸出
<div id="main">
<div class="sponsorListHolder">
        <?php
foreach($sponsors as $company)
{
echo'
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
<img src="img/sponsors/'.$company[0].'.png" alt="More about '.$company[0].'" />
</div>

<div class="sponsorData">
<div class="sponsorDescription">
'.$company[1].'
</div>
<div class="sponsorURL">
<a href="'.$company[2].'">'.$company[2].'</a>
</div>
</div>
</div>
';
}
?>
    <div class="clear"></div>
    </div>
</div>

第四步 設計 CSS 樣式表
*{
margin:0;
padding:0;
}
body{
font-size:0.825em;
color:#666;
background-color:#fff;
font-family:Arial, Helvetica, sans-serif;
}
.sponsorListHolder{
margin-bottom:30px;
}
.sponsor{
width:180px;
height:180px;
float:left;
margin:4px;
position:relative;
cursor:pointer;
}
.sponsorFlip{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
border:1px solid #ddd;
background:url("img/background.jpg") no-repeat center center #f9f9f9;
}
.sponsorFlip:hover{
border:1px solid #999;
-moz-box-shadow:0 0 30px #999 inset;
-webkit-box-shadow:0 0 30px #999 inset;
box-shadow:0 0 30px #999 inset;
}
.sponsorFlip img{
position:absolute;
top:50%;
left:50%;
margin:-70px 0 0 -70px;
}
.sponsorData{
display:none;
}
.sponsorDescription{
font-size:11px;
padding:50px 10px 20px 20px;
font-style:italic;
}
.sponsorURL{
font-size:10px;
font-weight:bold;
padding-left:20px;
}
.clear{
clear:both;
}
#main{
position:relative;
margin:0 auto;
width:960px;
}
h1{
padding:30px 0;
text-align:center;
text-shadow:0 1px 1px white;
margin-bottom:30px;
background:url("img/page_bg.gif") repeat-x bottom #f8f8f8;
}
h1,h2{
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
}
h2{
font-size:14px;
font-weight:normal;
text-align:center;

position:absolute;
right:40px;
top:40px;
}
.note{
font-size:12px;
font-style:italic;
padding-bottom:20px;
text-align:center;
}
a, a:visited {
color:#0196e3;
text-decoration:none;
outline:none;
}
a:hover{
text-decoration:underline;
}
a img{
border:none;
}

第五步 使用 JavaScript 讓 Sponsor Flip Wall 初始化
$(function(){
$('.sponsorFlip').bind("click",function(){
var elem = $(this);
if(elem.data('flipped'))
{
elem.revertFlip();
elem.data('flipped',false)
}
else
{
elem.flip({
direction:'lr',
speed: 350,
onBefore: function(){
elem.html(elem.siblings('.sponsorData').html());
}
});
elem.data('flipped',true);
}
});
});

作者網站：http://tutorialzine.com
檔案大小：37 KB (包含範例)
檔案下載：http://demo.tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/demo.zip
備份下載：下載