Question

我正在建立一个画廊，我有一个小问题，我绝对不知道如何解决。以下是我构建项目的方法：

点击缩略图会启动带有一些信息的标准内联花式框
在每个内联fancybox中，我有一个fancybox图库的手动触发器，如下所示：

<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>

一切正常（您可以查看我的development website），除了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。

任何帮助都会受到高度赞赏，因为我不知道在哪里可以解决这个奇怪的行为！提前致谢！ kpuche

PS：我是法国人，请原谅我可怜的英语：）

来自另一个fancybox的Fancybox画廊 - 显示问题

0 个答案: