[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Trying to integrate fancybox with sharepoint.

Posted on 2011-03-11
2
Medium Priority
?
1,577 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

These days socially coordinated efforts have turned into a critical requirement for enterprises.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

650 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