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

 

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

    2.解压lightbox插件包，看到有js,css,images三个文件夹以及index.html文件，然后将三个文件夹里的文件依次放入你的模板文件的相应文件夹下；

    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]

    并且在你的图片相应链接加上rel=”lightbox”，如有多张图片则加上lightbox[roadtrip]，例如

    [php]

   

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

   

    [/php]

    5.这样magento的lightbox图片插件就安装好了，效果如下图所示。