如何在单个链接上打开带有fancybox 的画廊？（不同的html）答案

【问题标题】：how open a gallery with fancybox on single link? (different html)如何在单个链接上打开带有fancybox 的画廊？（不同的html）
【发布时间】：2012-11-18 03:15:43
【问题描述】：

您好，我有一个包含指向不同专辑链接的 HTML，我想点击一个简单的链接可以查看图库中的第一张图片，然后进行导航。问题是每个专辑都来自其他 HTML .. 在 gallery.html 中只是专辑的链接。

示例：画廊.html

 <td><a href="albumprueba.php"><img   src="album_prueba1/001.jpg" alt="image19" width="91%" height="56" /></a></td>
            <td><a href="albumprueba2.html"><img    src="album_prueba2/40.jpg" alt="image20" width="99%" height="60"/></a></td>

画廊的PHP：

     <a  class="fancyboxi" data-fancybox-group="gallery" title="Laurea" 
href="album_prueba1/<?php echo $archivos[$imagen_a_empezar]?>">
<img  src="album_prueba1/<?php echo $archivos[$imagen_a_empezar]?>" alt=""   width="19%"/></a>

有什么想法吗？

【问题讨论】：

标签： javascript jquery html fancybox

【解决方案1】：

index.htm

<html>
<head>
    <title></title>
    <link href="jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="jquery.fancybox-1.3.4.js" type="text/javascript"></script>
</head>
<body>
<a href="#" id="manualCall1">Gallery 1</a><br/>
<a href="#" id="manualCall2">Gallery 2</a>
<script type="text/javascript">
    $(document).ready(function () {
        $("#manualCall1").click(function () {
            $.getJSON('gallery1.json', function (data) {
                $.fancybox(data, {
                    'index': $(this).data('index'),
                    'padding': 0,
                    'transitionIn': 'none',
                    'transitionOut': 'none',
                    'type': 'image',
                    'changeFade': 0
                });
            });
        });
        $("#manualCall2").click(function () {
            $.getJSON('gallery2.json', function (data) {
                $.fancybox(data, {
                    'index': $(this).data('index'),
                    'padding': 0,
                    'transitionIn': 'none',
                    'transitionOut': 'none',
                    'type': 'image',
                    'changeFade': 0
                });
            });
        });
    });
</script>
</body>
</html>

gallery1.json

[{
    "href" : "https://lh5.googleusercontent.com/-uK9RF21pLaw/T0-bfLydozI/AAAAAAAAG2Q/CHSPYlMM5hA/w339-h225-n-k/_DSC1774_DRI_PS_small.jpg", 
    "title" : "image title 1"
}, {
    "href" : "https://lh4.googleusercontent.com/-B9Fop2ZofLI/T5JZiYzoZKI/AAAAAAAAH5M/0X6lYTa8LAs/w402-h266-n-k/_DSC8800-HDR_corrected_PS_small.jpg",
    "title" : "image title 2"
}, {
    "href" : "https://lh6.googleusercontent.com/-MtVcdgn6ZA0/T6LSPnrxfbI/AAAAAAAAIP8/g_BubTeiVbY/w467-h310-n-k/_DSC3079_DRI_PS_transf_small.jpg",
    "title" : "image title 3"
}]

gallery2.json

[{
    "href" : "https://lh4.googleusercontent.com/-PmHloor5LiU/T7K0_5nq55I/AAAAAAAAIcI/qz8NYty16Yo/w400-h248-n-k/_DSC3336_DRI_PS_defish_small.jpg", 
    "title" : "image title 2 1"
}, {
    "href" : "https://lh3.googleusercontent.com/-Okzptj_C2cI/T76BCKM4asI/AAAAAAAAKSE/gvPy2sKdbmU/w386-h254-n-k/_DSC3533_DRI_PS_defish_small.jpg",
    "title" : "image title 2 2"
}, {
    "href" : "https://lh6.googleusercontent.com/-snm10rkSqDo/T94UWhaFGjI/AAAAAAAALAk/X7b5dVcSKb4/w412-h273-n-k/_DSC3440_DRI_PS_defish_small.jpg",
    "title" : "image title 2 3"
}]

【讨论】：

在示例中是当您在同一个 html 中拥有图像时，不是吗？
您可以通过Ajax获取不同html的内容并将其放置到您页面的同一个html中
嗯对不起，我是初学者，我不明白..：S
我在不明白的情况下继续.. :( ，我应该把所有的链接相册放在 DIV 里面？
不，这一行 $('#placeholder').html(data);更新 div 内部 html。这个 html 包含像这样的行。和 $.get 方法下载文件，其中包含 html