How to make fancybox images slide horizontally instead of vertically. : The Official Microsoft ASP.NET Forums

Reply

sg48asp

Member

322 Points

How to make fancybox images slide horizontally instead of vertically.

May 27, 2012 05:10 PM|LINK

Using fancybox 2, I want images to slide horizontally when I click next but they are sliding vertically. Would appreciate assistance. Thanks

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Photos.aspx.vb" Inherits="Photos" %>

<asp:Content ID="Content1" ContentPlaceHolderID="Head" Runat="Server">
    <script src="lib/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="lib/jquery.mousewheel-3.0.6.pack.js" type="text/javascript"></script>
    <link href="source/jquery.fancybox.css" rel="stylesheet" type="text/css" />
    <script src="source/jquery.fancybox.pack.js" type="text/javascript"></script>
    <script src="source/jquery.fancybox.js" type="text/javascript"></script>
    <style type="text/css">
        .uibtn:hover{ cursor:pointer;}
        
    </style>
 <script type="text/javascript">
     $(document).ready(function () {
          $("a[rel=example_group]").trigger('click');
          $("a[rel=example_group]").fancybox({
             'transitionIn' : 'none',
             'transitionOut': 'none',
             'titlePosition': 'over',
             'titleFormat': function (title, currentArray, currentIndex, currentOpts) {
                 return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                 

            
             }
         });

     });
	</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder_Main" Runat="Server">
<div>
 <asp:datalist id="dtl1" runat="server"
        RepeatDirection="Horizontal"
        RepeatColumns="5"
        RepeatLayout="Table" >
	        <ItemTemplate>
                <a rel="example_group" href='<%# "images/photos/"  & _
                Eval("Filename") & "_b." & Eval("Ext")  & "?" & datetime.now.ticks.tostring  %>'
                    title='<%#Eval("Title")%>'>
                <img alt=" "
                    src='<%# "images/photos/" & Eval("Filename") & "_s." & Eval("Ext") & "?" & datetime.now.ticks.tostring    %>' /></a>
            </ItemTemplate>
        </asp:datalist>
     
  </div>

  <div class="clear"></div>
 
</asp:Content>

Reply

Primillo

Star

8841 Points

1701 Posts

Re: How to make fancybox images slide horizontally instead of vertically.

May 27, 2012 06:53 PM|LINK

I have done it (Horizontal) with a Repeater in instead

http://jquerytools.org/demos/scrollable/index.html

Best Regards
Primillo
http://www.facebook.com/programandopuntonet

Reply

sg48asp

Member

322 Points

475 Posts

Re: How to make fancybox images slide horizontally instead of vertically.

May 27, 2012 08:24 PM|LINK

Hi,

It doesn't seem like your solution has to do with fancybox.

The code I am using with a datalist is basically the same that I used
on another project with an earlier
version of fancybox and there the images slid horizontally.