1

我正在建立一个画廊，但我遇到了一个我完全不知道如何解决的小问题。这是我构建项目的方式：

  • 单击缩略图会启动一个标准的内联花式框，其中包含一些信息
  • 在每个内联花式框内，我都有一个花式框图像库的手动触发器，如下所示：
<a id="galerie'.$projet->id.'" href="#" onclick="$(\'a#proj'.$projet->id.'\').eq(0).trigger(\'click\'); return false;"><img src="img/ico_img.png" alt="images"> Galerie d\'images</a>

一切正常（您可以在我的开发网站上查看），除了 2 个项目，它们是唯一在其图库中只有1 个图像的项目：它们的图像显示在我的视口顶部，并且比其他项目小得多（参见“Quartiers nords de Valenton”和“Complexe sportif de l'aviation”）。我不知道这些项目发生了什么，以及如果我显示一张图片，为什么我的fancybox 画廊会损坏......

这是我的代码：

echo '
<div class="centreur">
<div class="wrapper">
<span class="thumb"><a href="#info'.$projet->id.'" class="fancybox-info" title=""><img class="thumbnail" src="img/projets/'.$image0['id'].'-'.$image0['projet'].'.jpg" alt="'.$projet->titre.'"/></a></span>
<div class="caption">'.$projet->titre.'</div>
</div>
<div class="hidden">
<div id="info'.$projet->id.'" style="min-width:400px;max-width:400px;" class="descrframe">
<h2>'.$projet->titre.'</h2>'.$prix.'
<div>
<center><img class="firstslide" src="img/projets/'.$image0['id'].'-'.$image0['projet'].'.jpg" alt="'.$projet->titre.'"/></center>
</div>
<div class="linkstyle"><a id="galerie'.$projet->id.'" href="#" onclick="$(\'a#proj'.$projet->id.'\').eq(0).trigger(\'click\'); return false;"><img src="img/ico_img.png" alt="images"> Galerie d\'images</a></div>
<table class="transtable"><tbody>
'.$ville.$pays.$maitrise.$equipe.$mandataire.$cout.$superficie.$date.'
</tbody></table>
</div>';
$i = 0;
foreach($images as $image){
$galid = $i == 0 ? 'id="proj'.$projet->id.'"' : '';
echo '<a href="img/projets/'.$image->id.'-'.$image->projet.'.jpg" class="fancybox-thumb" rel="proj'.$projet->id.'" title="'.$image->credit.'" '.$galid.'></a>';
$i++;
}
echo '</div></div>';
}

这是我的fancybox配置：

$(".fancybox-thumb").fancybox({
    prevEffect  : 'elastic',
    nextEffect  : 'elastic',
    openEffect  : 'fade',
    closeEffect : 'fade',
    margin      : [120,50,500,50],
    padding     : [0,0,0,0],
    loop        : false,
    maxWidth    : 900,
    maxHeight   : 600,
    topRatio    : 0.5,
    openOpacity : true,
    closeOpacity: true,
    beforeShow: function(){
        $.fancybox.wrap.bind("contextmenu", function (e) {
                return false;
        });
        }
    helpers : {
        title : {
            type : 'outside'
        },
        overlay : {
            opacity : 0.9,
            css : {
                'background-image' : 'url(img/pattern.png)',
                'background-color' : 'rgba(0,0,0,0.8)'
            }
        },
        thumbs  : {
            width   : 50,
            height  : 50,
            position: 'bottom'
        }
    }
});

$(".fancybox-info").fancybox({
    prevEffect  : 'elastic',
    nextEffect  : 'elastic',        
    openEffect  : 'fade',
    closeEffect : 'fade',
    margin      : [120,50,50,50],
    padding     : [0,0,0,0],
    loop        : false,
    maxWidth    : 900,
    maxHeight   : 600,
    topRatio    : 0.5,
    openOpacity : true,
    closeOpacity: true,
    beforeShow: function(){
        $.fancybox.wrap.bind("contextmenu", function (e) {
                return false;
        });
        },
    helpers : {
        overlay : {
            opacity : 0.9,
            css : {
                'background-image' : 'url(img/pattern.png)',
                'background-color' : 'rgba(0,0,0,0.8)'
            }
        }
    }
});

如果这很重要，我会使用 fancybox v2.1.3 和 jquery v1.7.2。

任何帮助将不胜感激，因为我不知道在哪里可以解决这种奇怪的行为！提前致谢！克普切

PS：我是法国人，所以请原谅我糟糕的英语:)

4

0 回答 0