带有asp.net Repeater Control的Fancybox [英] Fancybox with asp.net Repeater Control

问题描述

问候!!



我正在尝试在我正在使用Fancybox V2.1.4的网页上实现照片库。

以下是我的代码：

 <   script     type   =  text / javascript >  
 $（ document ）。ready（ function （）{
 $（ < span class =code-string> .fancybox）。fancybox（{
 openEffect：' 淡出'，
 closeEffect：' 淡入淡出'，
 closeBtn： t rue ，
助手：{
 title：{type：'  inside'}，
 overlay：{css：{'  background'：'  rgba（255,255,255,0.5）'}} 
} 
}）; 
}）; 
 <   /   script  >  
 
 <   a     title   =  Lorem ipsum dolor sit amet，consectetur adipiscing elit。    class   =  fancybox    rel   =  group    href   =  ../ images / 1_b.jpg >  &l t;   img     src   =  ../ images / 1_s.jpg    alt   =  < span class =code-attribute>   /  >  <   / a  >  
 <   a     title   =  Lorem ipsum dolor sit amet，consectetur adipiscing elit    class   =  fancybox    rel   =  group    href   =  ../ images / 2_b.jpg >  <   img     src   =  ../ images / 2_s.jpg    alt   =     /  >  <   / a  >  

我的问题是，对于上面给出的Jquery和html，Fancybox工作正常。但是当与转发器控件一起使用时，它不会' t。



任何人都可以提出任何建议吗？ ..我可以提供更多输入....

解决方案

（ document ）。ready（ function （）{

（ .fancybox）。fancybox（{
openEffect：' fade'，
closeEffect：' fade'，
closeBtn： true ，
helpers：{
title：{type：' inside'}，
overlay：{css：{' background'：' rgba（255,255,255,0.5）'}}
}
}）;
}）;
< / script >

< a title = Lorem ipsum dolor sit amet，consectetur adipiscing elit。 class = fancybox rel = group href = ../ images / 1_b.jpg > &l t; img src = ../ images / 1_s.jpg alt = < span class =code-attribute> / > < / a >
< a title = Lorem ipsum dolor sit amet，consectetur adipiscing elit class = fancybox rel = group href = ../ images / 2_b.jpg > < img src = ../ images / 2_s.jpg alt = / > < / a >

我的问题是，对于上面给出的Jquery和html，Fancybox工作正常。但是当与转发器控件一起使用时，它不会' t。



任何人都可以提出任何建议吗？ ..我可以提供更多的输入....

这可能是一个旧帖子，但我在这里寻找答案，并且必须自己从头开始。所以这就是我所做的，没有让你厌烦数据源和我的自定义CSS，我强调了转发器HTML中的有趣位：



HTML - ASP。 NET：

 <   asp：repeater     id   =  RpterItems    runat   =  server    datasourceid   =  SQLDSRepeaterData    xmlns：asp   = ＃unknown >  
 <   itemtemplate  >  
 <   div     class   =  DivContent >  
 <   h2  >  <   asp：label     id   =  lblPopUpTitle     runat   = < span class =code-keyword> server   < span class =code-attribute> text   =   <％ #Eval（ 标题）％> >  <   / asp：label  >  <   / h2  >  
 <   asp：label     id   =  lblDate    runat   =  server    text   =  <％ #Eval （  EnteredDate）％>    font-underline   =  True  >  <   / asp：label  >  <   br     /  >  <   br     /  >  
 
 <   asp：label     id   =  lblPopUpDesc    runat   =  server    text   =  < ;％ #Eval（ 描述）％> < span class =code-keyword>>  <   / asp：label  < span class =code-keyword>>  
 
 <   br     /  >  <   br     /  >  
  <   a     id   =  imgPopOut    href   =  <％＃ Eval（  ImageLocations）％> >  <   img     alt   =  <％ #Eval（  Title ）％>    class   =   NewsAndMediaImage    src  < span class =code-keyword> =  <％ #Eval（  ImageLocations_S）％>   < span class =code-keyword> /  >  <   / a  >   <   br     /  >  <   br     /  >  
 <   / div  >  
 <   br     /  >  
 <   / itemtemplate  >  
 <   / asp：repeater  >  

JavaScript：

< script type =  文本/ JavaScript的> 

Greetings !!

I'm trying to implement a photo gallery in the web page for which i'm using Fancybox V2.1.4.
following is my code:

 <script type="text/javascript">
        $(document).ready(function () {
            $(".fancybox").fancybox({
                     openEffect: 'fade',
                     closeEffect: 'fade',
                     closeBtn: true ,
                     helpers: {
                         title: { type: 'inside'},
                         overlay: { css: { 'background': 'rgba(255,255,255,0.5)'} }
                     }
                 });
           });
 </script>

<a title="Lorem ipsum dolor sit amet, consectetur adipiscing elit." class="fancybox" rel="group" href="../images/1_b.jpg"><img src="../images/1_s.jpg" alt="" /></a>
 <a title="Lorem ipsum dolor sit amet, consectetur adipiscing elit" class="fancybox" rel="group" href="../images/2_b.jpg"><img src="../images/2_s.jpg" alt="" /></a>

My problem is that for the above given Jquery and the html, Fancybox works fine.However when used with a repeater control it doesn't.

Can anyone sugggest anything ? .. I can provide more inputs....

解决方案

(document).ready(function () {

(".fancybox").fancybox({ openEffect: 'fade', closeEffect: 'fade', closeBtn: true , helpers: { title: { type: 'inside'}, overlay: { css: { 'background': 'rgba(255,255,255,0.5)'} } } }); }); </script> <a title="Lorem ipsum dolor sit amet, consectetur adipiscing elit." class="fancybox" rel="group" href="../images/1_b.jpg"><img src="../images/1_s.jpg" alt="" /></a> <a title="Lorem ipsum dolor sit amet, consectetur adipiscing elit" class="fancybox" rel="group" href="../images/2_b.jpg"><img src="../images/2_s.jpg" alt="" /></a>

My problem is that for the above given Jquery and the html, Fancybox works fine.However when used with a repeater control it doesn't.

Can anyone sugggest anything ? .. I can provide more inputs....

This may be an old post but I looked here for the answer to this and have had to do it from scratch myself. So here is what I have done, without boring you with the data sources and my custom css, ive underlined the interesting bit in the repeater HTML:

HTML - ASP.NET:

<asp:repeater id="RpterItems" runat="server" datasourceid="SQLDSRepeaterData" xmlns:asp="#unknown">
         <itemtemplate>
             <div class="DivContent">
           <h2><asp:label id="lblPopUpTitle" runat="server" text="<%#Eval("Title") %>"></asp:label></h2>
         <asp:label id="lblDate" runat="server" text="<%#Eval("EnteredDate") %>" font-underline="True"></asp:label><br /><br />

         <asp:label id="lblPopUpDesc" runat="server" text="<%#Eval("Description") %>"></asp:label>

        <br /><br />
           <a id="imgPopOut" href="<%# Eval("ImageLocations") %>"><img alt="<%# Eval("Title") %>" class="NewsAndMediaImage" src="<%# Eval("ImageLocations_S") %>" /></a>                <br /><br />
          </div>
        <br />
         </itemtemplate>
            </asp:repeater>

JavaScript:

<script type="text/javascript">

这篇关于带有asp.net Repeater Control的Fancybox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！