自動縮圖-用滑鼠滾輪放大縮小圖片

[cloudsnow30]

參考自竹貓原始文章 :
‧ http://phpbb-tw.net/phpbb/viewtopic.php?p=205869#205869
開發作者 :
‧~倉木麻衣~

去年曾仿動網論壇的作法套到phpbb上, 不過後來論壇遭蠕蟲攻擊, php資料全毀
剛晃到黑風凱特的站上, 無意間發現可用滑鼠滾輪縮放圖片, 所以就把它的code回來小try了一下
目前的缺點
1.連簽名檔裡的圖也會跟著一起縮放
2.在Firefox底下無作用
而且如同HUGO講的, 在捲動頁面時很容易不小心變成縮放圖片

~倉木麻衣~ 寫到:
其實呀, 原本的作法是只要是用[ img][/ img]括住的, 都會自動加上縮放功能
這個只要仔細看一下修改時的bbcode.tpl內容就知道了, 所以才會造成連同簽名檔都會被縮放的問題
剛重新針對簽名檔作了測試調整, 現在不會再對簽名檔裡的圖案做縮放了
以下是全新安裝的內容
有裝過的人只要留意一下bbcode.tpl的修改部份, 並略過overall_header.tpl的修改即可

#
#--------[ OPEN ]----------------
#

代碼: 選擇全部

viewtopic.php 

#
#--------[ FIND ]----------------
#

代碼: 選擇全部

    $user_sig = ( $board_config['allow_bbcode'] ) ? bbencode_second_pass($user_sig, $user_sig_bbcode_uid) : preg_replace('/\:[0-9a-z\:]+\]/si', ']', $user_sig); 

#
#--------[ REPLACE WITH ]----------------
#

代碼: 選擇全部

  $sig_img=true; 
         $user_sig = ( $board_config['allow_bbcode'] ) ? bbencode_second_pass($user_sig, $user_sig_bbcode_uid) : preg_replace('/\:[0-9a-z\:]+\]/si', ']', $user_sig); 
         unset($sig_img); 

#
#--------[ OPEN ]----------------
#

代碼: 選擇全部

includes/bbcode.php 

#
#--------[ FIND ]----------------
#

代碼: 選擇全部

   $bbcode_tpl['img'] = str_replace('{URL}', '\\1', $bbcode_tpl['img']);

#
#--------[ AFTER, ADD ]----------------
#

代碼: 選擇全部

 $bbcode_tpl['sig_img'] = str_replace('{URL}', '\\1', $bbcode_tpl['sig_img']); 

#
#--------[ FIND ]----------------
#

代碼: 選擇全部

global $lang, $bbcode_tpl;

#
#--------[ REPLACE WITH ]----------------
#

代碼: 選擇全部

global $lang, $bbcode_tpl, $sig_img; 

#
#--------[ FIND ]----------------
#

代碼: 選擇全部

$replacements[] = $bbcode_tpl['img']; 

#
#--------[ REPLACE, WITH ]----------------
#

代碼: 選擇全部

 $replacements[] = ($sig_img) ? $bbcode_tpl['sig_img'] : $bbcode_tpl['img']; 

#
#--------[ OPEN ]----------------
#

代碼: 選擇全部

templates/yourTemplate/bbcode.tpl 

#
#--------[ FIND ]----------------
#

代碼: 選擇全部

<!-- BEGIN img --><img src="{URL}" border="0" /><!-- END img --> 

#
#--------[ REPLACE WITH ]----------------
#

代碼: 選擇全部

<!-- BEGIN img --><img src="{URL}" border="0" onmousewheel="return imgzoom(this);" /><!-- END img --> 

<!-- BEGIN sig_img --><img src="{URL}" border="0" /><!-- END sig_img --> 

#
#--------[ OPEN ]----------------
#

代碼: 選擇全部

templates/yourTemplate/overall_header.tpl 

#
#--------[ FIND ]----------------
#

代碼: 選擇全部

</head> 

#
#--------[ BEFORE, ADD ]----------------
#

代碼: 選擇全部

<script language="Javascript" type="text/javascript"> 
function imgzoom(o){var zoom=parseInt(o.style.zoom, 10)||100;zoom+=event.wheelDelta/12;if (zoom>0) o.style.zoom=zoom+'%';return false;} 
</script> 

#
#--------[ SAVE/CLOSE ALL FILES ]----------------
#
# EoM

代碼: 選擇全部

sh85216s 寫到:  
是不是可修改成開啟時預設是小圖而不是全圖呢?

可以試著將這行

代碼: 選擇全部

<!-- BEGIN img --><img src="{URL}" border="0" onmousewheel="return imgzoom(this);" /><!-- END img --> 

改成 :

代碼: 選擇全部

<!-- BEGIN img --><img src="{URL}" border="0" onload="this.width=screen.width*0.5" onmousewheel="return imgzoom(this);" /><!-- END img -->  

您可以自行將其中的「0.5」調成想要的數值, 或是直接改成這樣的格式
(註:程式碼來自Discuz論壇程式)

代碼: 選擇全部

<!-- BEGIN img --><img src="{URL}" border="0" onload="if(this.width>screen.width*0.6) {this.resized=true; this.width=screen.width*0.6;this.alt='按左鍵於新視窗查看全圖, 滾輪縮放大小';}" onmouseover="if(this.resized)  this.style.cursor='hand';" onclick="if(this.resized) {window.open(this.src);}" onmousewheel="return imgzoom(this);" /><!-- END img --> 

[cloudsnow30]

追加-附加檔案縮圖

附加檔案縮圖

開啟 templates/subSilver/viewtopic_attach_body.tpl
尋找

代碼: 選擇全部

<img src="{postrow.attach.cat_images.IMG_SRC}" alt="{postrow.attach.cat_images.DOWNLOAD_NAME}" border="0" /> 

替換為

代碼: 選擇全部

<a href="{postrow.attach.cat_images.IMG_SRC}" alt="{postrow.attach.cat_images.DOWNLOAD_NAME}" target="_blank" title="開新視窗觀看原圖"><img src="{postrow.attach.cat_images.IMG_SRC}" border="0" onload="javascript:if(this.width>screen.width-450) this.width=screen.width-450" /></a>