Solved

Trying to integrate fancybox with sharepoint.

Posted on 2011-03-11
2
1,540 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
ID: 35109246
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
ID: 35172692
solved it myself
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
I thought I'd write this up for anyone who has a request to create an anonymous whistle-blower-type submission form created using SharePoint 2010 (this would probably work the same for 2013). It's not 100% fool-proof but it's as close as you can get…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

821 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