Javascript 在Pretto中显示多个图像
我正在建立一个网站,其中一个页面上有一个展示图片的部分。我觉得Pretto看起来不错,于是决定用它 现在我有一个方形的引导框,有2列md-4行(总共6行)。每个图像都有一个悬停状态,悬停时会发生变化,显示一个要单击的图标,然后从该图标打开 我不知道如何在给定的文档中添加多个图像,但是他们的文档中有这样的例子,我只是没有实现它们的任何运气 这是我的密码 htmlJavascript 在Pretto中显示多个图像,javascript,html,twitter-bootstrap,prettyphoto,Javascript,Html,Twitter Bootstrap,Prettyphoto,我正在建立一个网站,其中一个页面上有一个展示图片的部分。我觉得Pretto看起来不错,于是决定用它 现在我有一个方形的引导框,有2列md-4行(总共6行)。每个图像都有一个悬停状态,悬停时会发生变化,显示一个要单击的图标,然后从该图标打开 我不知道如何在给定的文档中添加多个图像,但是他们的文档中有这样的例子,我只是没有实现它们的任何运气 这是我的密码 html <div class="row centered"> <div class="col-md-4
<div class="row centered">
<div class="col-md-4 portfolio-item web-design">
<div class="he-wrap tpl6">
<img src="images/portfolio-2/crate-of-california.jpg" height="450px" width="600px" class="img-responsive" alt="">
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<h3 class="a1" data-animate="fadeInDown">Crate of California</h3>
<a data-rel="prettyPhoto[gallery1]" href="images/portfolio-2/crate-of-california.jpg" width="600" height="486" class="dmbutton a2" data-animate="fadeInUp"><i class="fa fa-search"></i></a>
</div><!-- he bg -->
</div><!-- he view -->
</div><!-- he wrap -->
</div>
<div class="col-md-4 portfolio-item web-design">
<div class="he-wrap tpl6">
<img src="images/portfolio-2/kenneth-cole.jpg" height="450px" width="600px" class="img-responsive" alt="">
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<h3 class="a1" data-animate="fadeInDown">Kenneth Cole</h3>
<a rel="prettyPhoto[gallery2]" href="images/portfolio-2/kenneth-cole.jpg" class="dmbutton a2" data-animate="fadeInUp"><i class="fa fa-search"></i></a>
<a href="images/portfolio-images/kennethcole2.png" class="lightbox-image lightbox-hide" rel="prettyPhoto[gallery2]" title="Another Title 2"></a>
<a href="images/portfolio-images/kennethcole3.png" class="lightbox-image lightbox-hide" rel="prettyPhoto[gallery2]" title="Another Title 2"></a>
<a href="images/portfolio-images/kennethcole4.png" class="lightbox-image lightbox-hide" rel="prettyPhoto[gallery2]" title="Another Title 2"></a>
</div><!-- he bg -->
</div><!-- he view -->
</div><!-- he wrap -->
</div>
.....
<!-- beneath your main content, before your closing body tag
the social tools (twitter and facebook sharing) are in there by default, so this takes it off -->
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({social_tools:''});
});
</script>
</body>
如果需要的话,我可以发布css,但大部分内容与问题无关
有人知道我如何使用Pretto为每张图像显示多个图像(图库)吗?任何帮助都将不胜感激 所以我能够弄明白这一点,网站上的文档一点也不好,我花了几个小时才弄明白,所以希望有人能从中得到一些帮助 基本上,我试图为2x3行中的6幅图像中的每一幅显示一个图像库。代码最终被删除 html
<div class="row centered">
<div class="col-md-4 portfolio-item web-design">
<div class="he-wrap tpl6">
<img src="images/portfolio-2/crate-of-california.jpg" height="450px" width="600px" class="img-responsive" alt="">
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<h3 class="a1" data-animate="fadeInDown">Crate of California</h3>
<a data-rel="prettyPhoto[gallery1]" href="images/portfolio-2/crate-of-california.jpg" width="600" height="486" class="dmbutton a2" data-animate="fadeInUp"><i class="fa fa-search"></i></a>
</div><!-- he bg -->
</div><!-- he view -->
</div><!-- he wrap -->
</div>
<div class="col-md-4 portfolio-item web-design">
<div class="he-wrap tpl6">
<img src="images/portfolio-2/kenneth-cole.jpg" height="450px" width="600px" class="img-responsive" alt="">
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<h3 class="a1" data-animate="fadeInDown">Kenneth Cole</h3>
<a rel="prettyPhoto[gallery2]" href="images/portfolio-2/kenneth-cole.jpg" class="dmbutton a2" data-animate="fadeInUp"><i class="fa fa-search"></i></a>
<a href="images/portfolio-images/kennethcole2.png" class="lightbox-image lightbox-hide" rel="prettyPhoto[gallery2]" title="Another Title 2"></a>
<a href="images/portfolio-images/kennethcole3.png" class="lightbox-image lightbox-hide" rel="prettyPhoto[gallery2]" title="Another Title 2"></a>
<a href="images/portfolio-images/kennethcole4.png" class="lightbox-image lightbox-hide" rel="prettyPhoto[gallery2]" title="Another Title 2"></a>
</div><!-- he bg -->
</div><!-- he view -->
</div><!-- he wrap -->
</div>
.....
<!-- beneath your main content, before your closing body tag
the social tools (twitter and facebook sharing) are in there by default, so this takes it off -->
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({social_tools:''});
});
</script>
</body>
凯尼斯·柯尔
.....
$(文档).ready(函数(){
$([rel^='prettypto']);
});
基本上,你只需要确保你的“触发器”是rel=prettypto
,并且每个div可以有多个。一旦你看到多个图像,prettypto就会有助手和按钮