2022-10-11 10:28:56 - 米境通跨境電商

 

    1.首先下載lightbox插件（以Lightboxv2.04為例）：http://www.huddletogether.com/projects/lightbox2/；

    2.解壓lightbox插件包，看到有js,css,images三個文件夾以及index.html文件，然后將三個文件夾里的文件依次放入你的模板文件的相應(yīng)文件夾下；

    3.然后打開lightbox.js，將以下兩句

    [php]

    fileLoadingImage:‘images/loading.gif’,

    fileBottomNavCloseImage:‘images/closelabel.gif’,

    [/php]

    修改成如下形式，以確保JS能夠找到loading.gif和closelabel.gif（hello為你的模板名稱）：

    [php]

    fileLoadingImage:‘skin/frontend/default/hello/images/loading.gif’,

    fileBottomNavCloseImage:‘skin/frontend/default/hello/images/closelabel.gif’,

    [/php]

    4.然后打開你的media.phtml，在末尾添加以下代碼：

    [php]

    getSkinUrl();?>css/lightbox.css"type="text/css"media="screen"/>

    getSkinUrl();?>js/prototype.js">

    getSkinUrl();?>js/scriptaculous.js?load=effects,builder">

    getSkinUrl();?>js/lightbox.js">

    [/php]

    并且在你的圖片相應(yīng)鏈接加上rel=”lightbox”，如有多張圖片則加上lightbox[roadtrip]，例如

    [php]

   

    htmlEscape($_image->getLabel())?>">"width="225"height="150"alt="htmlEscape($_image->getLabel())?>"/>

   

    [/php]

    5.這樣magento的lightbox圖片插件就安裝好了，效果如下圖所示。