jqzoom - 如何在 Jqzoom 上显示缩略图标题

Question

我想使用 jqzoom 画廊应用程序而不是 magiczoom。我有两个问题：

1. Jqzoom 在所有缩放中显示相同的标题。我想在放大的大图像顶部显示缩略图标题。我怎样才能做到这一点？
2. 在magiczoom 应用程序中，有一个小的放大镜图像和中等大小（要缩放）图像顶部的“缩放”文本。我如何在 jqzoom 上实现它？

Answer 1

如果您有多个元素要使用多个缩略图进行缩放，则必须将“ rel”属性命名为每个组，以便它可以正确显示您的图像：

<a href="images/bora/bora1_lrg.jpg" class="jqzoom" rel='gal1'  title="BORA">
    <img src="images/bora/bora1_md.jpg"  title="BORA"  style="border: 5px solid #666;">
</a>
<br/>
<a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './images/bora/bora1_md.jpg',largeimage: './images/bora/bora1_lrg.jpg'}"><img src='images/bora/bora1_th.jpg'></a>
<a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './images/bora/bora2_md.jpg',largeimage: './images/bora/bora2_lrg.jpg'}"><img src='images/bora/bora2_th.jpg'></a>
<a  href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './images/bora/bora3_md.jpg',largeimage: './images/bora/bora3_lrg.jpg'}"><img src='images/bora/bora3_th.jpg'></a>
<a  href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './images/bora/bora4_md.jpg',largeimage: './images/bora/bora4_lrg.jpg'}"><img src='images/bora/bora4_th.jpg'></a>
</div>
<div class="example_column2" align="center">
   <a href="images/bora/bora5_lrg.jpg" class="jqzoom" rel='gal2'  title="BORA">
     <img src="images/bora/bora5_md.jpg"  title="BORA"  style="border: 5px solid #666;">
   </a>
   <br/>
   <a href='javascript:void(0);' rel="{gallery: 'gal2', smallimage: './images/bora/bora5_md.jpg',largeimage: './images/bora/bora5_lrg.jpg'}"><img src='images/bora/bora5_th.jpg'></a>
   <a href='javascript:void(0);' rel="{gallery: 'gal2', smallimage: './images/bora/bora6_md.jpg',largeimage: './images/bora/bora6_lrg.jpg'}"><img src='images/bora/bora6_th.jpg'></a>
   <a  href='javascript:void(0);' rel="{gallery: 'gal2', smallimage: './images/bora/bora7_md.jpg',largeimage: './images/bora/bora3_lrg.jpg'}"><img src='images/bora/bora7_th.jpg'></a>
   <a  href='javascript:void(0);' rel="{gallery: 'gal2', smallimage: './images/bora/bora7_md.jpg',largeimage: './images/bora/bora4_lrg.jpg'}"><img src='images/bora/bora7_th.jpg'></a>
</div>