Solved

Trying to integrate fancybox with sharepoint.

Posted on 2011-03-11
2
1,516 Views
Last Modified: 2012-06-21
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
Comment
Question by:LuisEstebanValencia
  • 2
2 Comments
 

Accepted Solution

by:
LuisEstebanValencia earned 0 total points
Comment Utility
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
 

Author Closing Comment

by:LuisEstebanValencia
Comment Utility
solved it myself
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now