• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1605
  • Last Modified:

Trying to integrate fancybox with sharepoint.

I am trying to integrate fancybox with sharepoint.
The whole idea is easy, I have a carrousel control, when the user clicks on each image, it must show the fancybox with a youtube video using the embedded code.

WHen I do it with static code, it works like a charm!


This is the code that works
  <a id="various1" href="#inline1" title="">Inline</a>
      <div style="display: none;">
		<div id="inline1" style="width:660;height:410px;overflow:auto;">
			<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/sB2BKdgSW4U" frameborder="0" allowfullscreen></iframe
		</div>

Open in new window


However, this is static and instead of a link, I want the fancybox to be shown on an image clic

But I need to use server side code, I mean server side controls, like the asp:Image, or ImageButton.

The code that renders the carrousel is this:

      <ol id="tabs-panes">
        	<li id="tab1">
          	<div class="images">
               <asp:ImageButton ID="ImageButton1" runat="server" width="680" height="300" />
            </div>
            <div class="info">
            	<blockquote>
              	<p><span>&lsquo;&lsquo;</span><asp:Literal ID="Info1" runat="server"/>&rsquo;&rsquo;</p>
              </blockquote>
              <cite><asp:Literal ID="SubTitle1" runat="server"/></cite><em><asp:Literal ID="SubTitleItalics1" runat="server"/></em>
            </div>
            <a href="#" class="video">Ga verder</a>
          </li>
          <li id="tab2">
          	<div class="images">
                <asp:ImageButton ID="ImageButton2" runat="server" width="680" height="300" />
            </div>
            <div class="info">
            	<blockquote>
              	<p><span>&lsquo;&lsquo;</span><asp:Literal ID="Info2" runat="server"/>&rsquo;&rsquo;</p>
              </blockquote>
              <cite><asp:Literal ID="SubTitle2" runat="server"/></cite><em><asp:Literal ID="SubTitleItalics2" runat="server"/></em>
            </div>
            <a href="#">Ga verder</a>
          </li>
          <li id="tab3">
          	<div class="images">
                <asp:ImageButton ID="ImageButton3" runat="server" width="680" height="300" />
            </div>
            <div class="info">
            	<blockquote>
              	<p><span>&lsquo;&lsquo;</span><asp:Literal ID="Info3" runat="server"/>&rsquo;&rsquo;</p>
              </blockquote>
              <cite><asp:Literal ID="SubTitle3" runat="server"/></cite><em><asp:Literal ID="SubTitleItalics3" runat="server"/></em>
            </div>
            <a href="#" class="video">Ga verder</a>
          </li>
          <li id="tab4">
          	<div class="images">
                <asp:ImageButton ID="ImageButton4" runat="server" width="680" height="300" />
            </div>
            <div class="info">
            	<blockquote>
              	<p><span>&lsquo;&lsquo;</span><asp:Literal ID="Info4" runat="server"/>&rsquo;&rsquo;</p>
              </blockquote>
              <cite><asp:Literal ID="SubTitle4" runat="server"/></cite><em><asp:Literal ID="SubTitleItalics4" runat="server"/></em>
            </div>
            <a href="#">Ga verder</a>
          </li>
          <li id="tab5">
          	<div class="images">
                <asp:ImageButton ID="ImageButton5" runat="server" width="680" height="300" />
            </div>
            <div class="info">
            	<blockquote>
              	<p><span>&lsquo;&lsquo;</span><asp:Literal ID="Info5" runat="server"/>&rsquo;&rsquo;</p>
              </blockquote>
              <cite><asp:Literal ID="SubTitle5" runat="server"/></cite><em><asp:Literal ID="SubTitleItalics5" runat="server"/></em>
            </div>
            <a href="#">Ga verder</a>
          </li>
          <li id="tab6">
          	<div class="images">
                <asp:ImageButton ID="ImageButton6" runat="server" width="680" height="300" />
            </div>
            <div class="info">
            	<blockquote>
              	<p><span>&lsquo;&lsquo;</span><asp:Literal ID="Info6" runat="server"/>&rsquo;&rsquo;</p>
              </blockquote>
                <cite><asp:Literal ID="SubTitle6" runat="server"/></cite><em><asp:Literal ID="SubTitleItalics6" runat="server"/></em>
            </div>
            <a href="#">Ga verder</a>
          </li>
        </ol>

Open in new window



And in the webpart I just change the imageurl to load from a database or sharepoint list.


0
LuisEstebanValencia
Asked:
LuisEstebanValencia
  • 2
1 Solution
 
LuisEstebanValenciaAuthor Commented:
this also worked

  <a id="various1" href="#inline1" title=""><img src="http://www.holamun2.com/files/images/mun2-images/news/best-video-moment/best-video-moment-shakira-loca.jpg" alt="image1"/></a>
      <div style="display: none;">
            <div id="inline1" style="width:660;height:410px;overflow:auto;">
                  <iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/sB2BKdgSW4U" frameborder="0" allowfullscreen></iframe>
            </div>
0
 
LuisEstebanValenciaAuthor Commented:
solved it myself
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now