Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » Image Slide and Flyout

Image Slide and Flyout Options
Previous Topic · Next Topic
Mackin
Posted: Tuesday, October 19, 2010 3:50:16 PM
Rank: Advanced Member
Groups: Member

Joined: 6/1/2007
Posts: 31
Is there a way to make your image slide control pull up what is normally in the BigItemTemplate into a flyout instead?
Back to top
 
eo_support
Posted: Tuesday, October 19, 2010 5:32:54 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

Yes. You can do that. All you need to do is to place a Flyout control into the slide's SmallItemTemplate. Note you would not actually use BitItemTemplate.

You can take the Slide -> Templated Slide sample code and replace it with this:

Code: HTML/ASPX 
<SmallItemTemplate>
    <img runat="server" id="tn" src='<%#Eval("thumbnail")%>' />
    <eo:Flyout runat="server" ID="Flyout1" For="tn" 
        ExpandDirection="BottomRight">
        <ContentTemplate>
            <div style="border: solid 1px #404040; 
                    padding: 5px; width: 400px; color: Black;">
                <img src='<%#Eval("image")%>' />
            </div>
        </ContentTemplate>
    </eo:Flyout>            
</SmallItemTemplate>


You can customize it further but the keys are:

1. Put a Flyout control into SmallItemTemplate;
2. Set the Flyout control's For to another control inside SmallItemTemplate. This is the control that triggers the flyout. The above code uses the thumbnail image as the trigger control. You can change it to anything else;
3. The Flyout control's ContentTemplate contains contents to be displayed in the flyout. The above code displays the big image. You can change it to anything else;

Hope this helps.

Thanks!
Back to top
 
Mackin
Posted: Wednesday, January 19, 2011 8:58:12 AM
Rank: Advanced Member
Groups: Member

Joined: 6/1/2007
Posts: 31
Sorry for coming back to this so late but they have just decided what they want to do and now this does not work.

I have attached a url to a picture of the display Picture

Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="eResources_Test" %>
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc0" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link id="myStyleSheet" href="../StyleSheets/eResources.css" rel="stylesheet" type="text/css" runat="server" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<CompositeScript>
<Scripts>
<asp:ScriptReference Name="MicrosoftAjax.js" />
<asp:ScriptReference Name="MicrosoftAjaxWebForms.js" />
</Scripts>
</CompositeScript>
<Services>
<asp:ServiceReference Path="~/WebServices/MackinWebServices.asmx" />
</Services>
</asp:ScriptManager>
<eo:Slide ID="eo_sld_eResources"
runat="server"
VisibleSmallItemCount="6"
SmallItemHeight="170"
SmallItemWidth="125">
<SmallItemTemplate>
<img runat="server" id="tn" src='<%# ConfigurationManager.AppSettings["PicsDirectory"] + Eval("BookImage") %>' />
<eo:Flyout ID="eo_fly_BookInfo" runat="server" For="tn">
<ContentTemplate>
<div style="border: solid 1px #404040; padding: 5px; width: 400px; color: Black;">
<img src='<%# ConfigurationManager.AppSettings["PicsDirectory"] + Eval("BookImage") %>' />
</div>
</ContentTemplate>
</eo:Flyout>
</SmallItemTemplate>
</eo:Slide>
</form>
</body>
</html>

As you can see this is almost word for word of the code you provided however when the flyout is display like what is shown in the url I have the flyout displaying for the 4th item over. You can just see the top of the item. The rest is hidden behind the slider control.

Dave
Back to top
 
eo_support
Posted: Wednesday, January 19, 2011 9:40:43 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

Your code looks very much the same as ours. The only thing I can think of is your CSS styles. So you may want to try commenting that out and see if it works.

If that still does not work, we will need you to create a test project and send it to us. The test project should run independently and contains code only needed to reproduce the problem. Once we have that, we will try to run it here and see what we can find.

Thanks!
Back to top
 


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.