Question

我对我的项目有疑问，目前我正在使用tn gallery滑块。在该滑块中，当我点击该链接时，我有一个链接，这些滑块图像必须显示在精美的框弹出窗口中。任何人都可以帮忙编码吗？我是jquery和javascript的新手。

$(document).ready(function() {
    //Thumbnailer.config.shaderOpacity = 1;
    var tn1 = $('.mygallery').tn3({
        skinDir:"img",
        imageClick:"fullscreen",
        image:{
        maxZoom:1.5,
        crop:true,
        clickEvent:"dblclick",
        transitions:[{
        type:"blinds"
        },{
        type:"grid"
        },{
        type:"grid",
        duration:460,
        easing:"easeInQuad",
        gridX:1,
        gridY:8,
        // flat, diagonal, circle, random
        sort:"random",
        sortReverse:false,
        diagonalStart:"bl",
        // fade, scale
        method:"scale",
        partDuration:360,
        partEasing:"easeOutSine",
        partDirection:"left"
        }]
        }
    });
$("a[rel=example_group]").fancybox(
     {
            'transitionIn'  : 'none',
            'transitionOut' : 'none',
            'titlePosition' : 'over',
            'titleFormat'   : function(title, currentArray, currentIndex, currentOpts) {
                return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
      }
        });
   });

HTML code：

     <div class="mygallery">
    <div class="tn3 album">     
 <ol>
    <li>
        <h4>Hohensalzburg Castle</h4>
        <div class="tn3 description">Salzburg, Austria</div>
        <a href="img/620x378/1.jpg">
            <img src="img/35x35/1.jpg"/>
        </a>
    </li>
    <li>
        <h4>Isolated sandy cove</h4>
        <div class="tn3 description">Zakynthos island, Greece</div>
        <a href="img/620x378/2.jpg">
        <img src="img/35x35/2.jpg" />
        </a>
    </li>
    <li>
        <h4>A view from the Old Town</h4>
        <div class="tn3 description">Herceg Novi, Montenegro</div>
        <a href="img/620x378/3.jpg">
        <img src="img/35x35/3.jpg" />
        </a>
    </li>
    <li>
        <h4>Walls of the Old Town</h4>
        <div class="tn3 description">Kotor, Montenegro</div>
        <a href="img/620x378/4.jpg">
        <img src="img/35x35/4.jpg" />
        </a>
    </li>
    <li>
        <h4>Boat in the port</h4>
        <div class="tn3 description">Sousse, Tunis</div>
        <a href="img/620x378/5.jpg">
        <img src="img/35x35/5.jpg"/>
        </a>
    </li>
    <li>
        <h4>Wall of the Jain temple</h4>
        <div class="tn3 description">Jaisalmer, India</div>
        <a href="img/620x378/6.jpg">
        <img src="img/35x35/6.jpg" />
        </a>
    </li>
    <li>
        <h4>City park</h4>
        <div class="tn3 description">Negotin, Serbia</div>
        <a href="img/620x378/7.jpg">
        <img src="img/35x35/7.jpg" />
        </a>
    </li>
    <li>
        <h4>Taj Mahal mausoleum</h4>
        <div class="tn3 description">Agra, India</div>
        <a href="img/620x378/8.jpg">
        <img src="img/35x35/8.jpg" />
        </a>
    </li>
    <li>
        <h4>Zante Port</h4>
        <div class="tn3 description">Zakynthos, Greece</div>
        <a href="img/620x378/9.jpg">
        <img src="img/35x35/9.jpg"/>
        </a>
    </li>
    <li>
        <h4>Rustovo Monastery</h4>
        <div class="tn3 description">Budva, Montenegro</div>
        <a href="img/620x378/10.jpg">
        <img src="img/35x35/10.jpg" />
        </a>
    </li>
    <li>
        <h4>The Mezquita, Cathedral and former Great Mosque</h4>
        <div class="tn3 description">Cordoba, Spain</div>
        <a href="img/620x378/11.jpg">
        <img src="img/35x35/11.jpg" />
        </a>
    </li>
    <li>
        <h4>Wine Cellars</h4>
        <div class="tn3 description">Rajac, Serbia</div>
        <a href="img/620x378/12.jpg">
        <img src="img/35x35/12.jpg"/>
        </a>
    </li>
    <li>
        <h4>Zante Port</h4>
        <div class="tn3 description">Zakynthos, Greece</div>
        <a href="img/620x378/9.jpg">
        <img src="img/35x35/9.jpg"/>
        </a>
    </li>
    <li>
        <h4>Rustovo Monastery</h4>
        <div class="tn3 description">Budva, Montenegro</div>
        <a href="img/620x378/10.jpg">
        <img src="img/35x35/10.jpg" />
        </a>
    </li>
    <li>
        <h4>The Mezquita, Cathedral and former Great Mosque</h4>
        <div class="tn3 description">Cordoba, Spain</div>
        <a href="img/620x378/11.jpg">
        <img src="img/35x35/11.jpg"/>
        </a>
    </li>
    <li>
        <h4>Wine Cellars</h4>
        <div class="tn3 description">Rajac, Serbia</div>
        <a href="img/620x378/12.jpg">
        <img src="img/35x35/12.jpg"/>
        </a>
    </li>
  </ol>
  </div>
  </div>

Answer 1

以下是您的HTML应该与您的fancybox代码相似的内容。由于我无法看到您的网站，我不知道您是否正确加载了javascript和css文件，或者您正在使用这些文件的哪些版本等。

<div class="mygallery">
<div class="tn3 album">     
<ol>
<li>
    <h4>Hohensalzburg Castle</h4>
    <div class="tn3 description">Salzburg, Austria</div>
    <a href="img/620x378/1.jpg">
        <img src="img/35x35/1.jpg"/>
    </a>
</li>
<li>
    <h4>Isolated sandy cove</h4>
    <div class="tn3 description">Zakynthos island, Greece</div>
    <a rel="example_group" href="img/620x378/2.jpg">
    <img src="img/35x35/2.jpg" />
    </a>
</li>
<li>
    <h4>A view from the Old Town</h4>
    <div class="tn3 description">Herceg Novi, Montenegro</div>
    <a href="img/620x378/3.jpg">
    <img src="img/35x35/3.jpg" />
    </a>
</li>
<li>
    <h4>Walls of the Old Town</h4>
    <div class="tn3 description">Kotor, Montenegro</div>
    <a rel="example_group" href="img/620x378/4.jpg">
    <img src="img/35x35/4.jpg" />
    </a>
</li>
<li>
    <h4>Boat in the port</h4>
    <div class="tn3 description">Sousse, Tunis</div>
    <a href="img/620x378/5.jpg">
    <img src="img/35x35/5.jpg"/>
    </a>
 </li>
 <li>
    <h4>Wall of the Jain temple</h4>
    <div class="tn3 description">Jaisalmer, India</div>
    <a href="img/620x378/6.jpg">
    <img src="img/35x35/6.jpg" />
    </a>
 </li>
 <li>
    <h4>City park</h4>
    <div class="tn3 description">Negotin, Serbia</div>
    <a href="img/620x378/7.jpg">
    <img src="img/35x35/7.jpg" />
    </a>
</li>
<li>
    <h4>Taj Mahal mausoleum</h4>
    <div class="tn3 description">Agra, India</div>
    <a rel="example_group" href="img/620x378/8.jpg">
    <img src="img/35x35/8.jpg" />
    </a>
</li>
<li>
    <h4>Zante Port</h4>
    <div class="tn3 description">Zakynthos, Greece</div>
    <a href="img/620x378/9.jpg">
    <img src="img/35x35/9.jpg"/>
    </a>
</li>
<li>
    <h4>Rustovo Monastery</h4>
    <div class="tn3 description">Budva, Montenegro</div>
    <a href="img/620x378/10.jpg">
    <img src="img/35x35/10.jpg" />
    </a>
</li>
<li>
    <h4>The Mezquita, Cathedral and former Great Mosque</h4>
    <div class="tn3 description">Cordoba, Spain</div>
    <a rel="example_group" href="img/620x378/11.jpg">
    <img src="img/35x35/11.jpg" />
    </a>
 </li>
 <li>
    <h4>Wine Cellars</h4>
    <div class="tn3 description">Rajac, Serbia</div>
    <a href="img/620x378/12.jpg">
    <img src="img/35x35/12.jpg"/>
    </a>
</li>
<li>
    <h4>Zante Port</h4>
    <div class="tn3 description">Zakynthos, Greece</div>
    <a href="img/620x378/9.jpg">
    <img src="img/35x35/9.jpg"/>
    </a>
</li>
<li>
    <h4>Rustovo Monastery</h4>
    <div class="tn3 description">Budva, Montenegro</div>
    <a rel="example_group" href="img/620x378/10.jpg">
    <img src="img/35x35/10.jpg" />
    </a>
</li>
<li>
    <h4>The Mezquita, Cathedral and former Great Mosque</h4>
    <div class="tn3 description">Cordoba, Spain</div>
    <a href="img/620x378/11.jpg">
    <img src="img/35x35/11.jpg"/>
    </a>
 </li>
 <li>
    <h4>Wine Cellars</h4>
    <div class="tn3 description">Rajac, Serbia</div>
    <a rel="example_group" href="img/620x378/12.jpg">
    <img src="img/35x35/12.jpg"/>
    </a>
</li>
</ol>
</div>
</div>

如何在fancybox弹出窗口上获取滑块图像，如何处理？

1 个答案: