I am trying to load from a SQL Server database the gallery images of the Galleria slideshow control http://galleria.io/. I have placed my Galleria control in an ASPX page.
I am trying the ListView solution recommended in an old post: Using Galleria jQuery plugin with an asp.net ListView
but it's not working. Does anyone know if it is indeed possible to load images to the Galleria control from a database? If so, what data type does the image field need to have? I tried both varbinary (the actual image) and also nvarchar (just the path of the image), none of those work. The page just hungs.
Here is my ASPX code:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Aircraftpedia_GalleriaDB.aspx.cs"
Inherits="Library_Aircraftpedia_GalleriaDB" %>
<!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>
<script type="text/javascript" src="../_js/slider_jQueryUI/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../_js/galleria/galleria-1.2.7.min.js"></script>
</head>
<body>
<asp:SqlDataSource ID="dsSelectAllAircraftpedia" runat="server" ConnectionString="<%$ ConnectionStrings:MYDB%>"
SelectCommand="cda_Aircraftpedia_SelectAll" SelectCommandType="StoredProcedure"
ProviderName="<%$ ConnectionStrings:MYDB.ProviderName %>"></asp:SqlDataSource>
<asp:ListView runat="server" ID="lvw">
<LayoutTemplate>
<div id="gallery">
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
</div>
</LayoutTemplate>
<ItemTemplate>
<img id="photoAlbumPhotos" src='<%# Eval("AcImage") %>' alt="Image Not Found" class="photoAlbumPhotos" />
</ItemTemplate>
</asp:ListView>
<script type="text/javascript">
$(document).ready(function () {
Galleria.loadTheme('../_js/galleria/themes/classic/galleria.classic.min.js');
$("#gallery").galleria({
width: 700,
height: 500
});
});
</script>
</body>
</html>
And my C# code:
protected void Page_Load(object sender, EventArgs e)
{
this.lvw.DataSource = this.dsSelectAllAircraftpedia;
this.lvw.DataBind();
}
Please let me know if you have any ideas on how to make this code work or if you have another solution to recommend.
Thank you.
I'm the author, so this is certainly biased, but I think you should check out the http://imageresizing.net/ project. It offers a SQL integration plugin that should let you serve SQL blobs very efficiently with disk caching, and only takes a few minutes to set up.
As a bonus, it will let you easily resize all the images to fit a certain set of constraints, which can be very handy.
Related
I can seem to get client-side binding to work (after 2 days) using Telerik controls. AM I not providing the right kind of fake value/pair data? Not finding the control ID properly?
What needs to be done to properly bind data to Telerik RadListView from the client side?
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Admin.WebForm1" %>
<%# Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">
<title></title>
<script type="text/javascript">
//
</script>
<script src="scripts/jquery-2.1.1.min.js"></script> </head> <body>
<form id="form1" runat="server">
<div>
<telerik:RadScriptManager ID="rsm1" runat="server"></telerik:RadScriptManager>
<telerik:RadListView
ItemPlaceholderID="itemPlaceHolder"
ID="listviewHere" runat="server" ClientIDMode="Static">
<ClientSettings>
<DataBinding>
<LayoutTemplate>
<ul id="itemPlaceHolder">
</ul>
</LayoutTemplate>
<AlternatingItemTemplate>
</AlternatingItemTemplate>
<EmptyDataTemplate>
nothing
</EmptyDataTemplate>
<ItemTemplate>
<li>#= id # ----sdfdsfsdsdf</li>
</ItemTemplate>
</DataBinding>
</ClientSettings>
</telerik:RadListView>
</div>
</form>
<script type="text/javascript">
//$("#grid1").hide();
//$("#listviewHere").show();
$(document).ready(function () {
var data = [{ id: 1, name: "name1", value: 12.4 }, { id: 2, name: "name2", value: 12.4 }];
var listView = $find("#listviewHere");
//var listView = listviewHere().get_masterTableView();
//listView.get_masterTableView();
listView.set_dataSource(data);
listView.dataBind();
});
</script>
</body> </html>
You are not finding the listview client object properly - you should use:
var listView = $find('<%= listviewHere.ClientID %>');
Check the Client-side Databinding demos on their site:
http://demos.telerik.com/aspnet-ajax/listview/examples/client/appendingdata/defaultcs.aspx
I am trying to add a full html page into ckeditor for some editing via js.
Specifically, I execute the command
oEditor.insertHtml("<html><head><title>Hello</title></head><body><div>hello</div></body></html>");
But the result I get is the following:
<p>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
</p>
<p>
<title></title>
</p>
<div>
hello</div>
The mode I use is:
config.fullPage = true
I tried also with fullPage = false, but not success.
Is there any way to insert to ckeditor a full html page?
Thanks a lot in advance!!
The insert* methods append the data to the editor contents, but if you want to replace the whole content then you must use setData.
I have a Jquery Mobile app and a page within it needs to display the equivelent of a MessageBox dialog to present a message to the user. I get the dialog to display fine but when the dialog box closes the page that called it reloads. I just want the dialog to go away and not do anything to the main page that called it. This is a problem as this main page may have options already selected by the user and this refresh clears the options.
Here is my test code to display the dialog:
Open dialog
The html for the dialog is located in a seperate page:
<!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">
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Search</h1>
</div>
<div data-role="content">
<p>You must select a Location.</p>
<p><a id="close" onclick="$('.ui-dialog').dialog('close');" data-rel="dialog" data-role="button">OK</a></p>
</div>
</div>
</body>
</html>
If it matters at all, I am using the VS2010 MVC Razor 3 mobile template which uses the _layout.cshtml file and has in it $.mobile.ajaxEnabled = false; by default.
try to add return false; to your onclick
<a id="close" onclick="$('.ui-dialog').dialog('close'); return false;" data-rel="dialog" data-role="button">OK</a>
else the default link action won't be prevented
i had binding some data to gridview in a page loadevent.....
And the gridview is in update panel..
i had included a Button in Each row of gridview using template field..
Every thing is working fine, But when i click on Button i am assigning a Row content's to a labels which is outside the update panel...
But this is not happening......
The Code Snippet inside the Button is working fine!!!!!
Because it was working good before the use of Update Panel........ Since the Whole page was Posting to a server to avoid this i used Update Panel..
But it is arrising another problem..
Can any Suggest how can i get out this kind of problem!!!!!!!!!!!
Thank in Advance!!!!
When you generates a postback inside an UpdatePanel, by default, only the content within the panel is updated. That's the magic of the UpdatePanel :)
You'll need to include the labels you want to modify inside the same update panel the grid is or wrap them on a separated UpdatePanel and update it if the grid panel get updated.
Here you have a sample about how to trigger the update of a second update panel.
<%# Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected DateTime LastUpdate
{
get
{
return (DateTime)(ViewState["LastUpdate"] ?? DateTime.Now);
}
set
{
ViewState["LastUpdate"] = value;
}
}
protected void Button1_Click(object sender, EventArgs e)
{
if (LastUpdate.AddSeconds(5.0) < DateTime.Now)
{
UpdatePanel1.Update();
LastUpdate = DateTime.Now;
}
}
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager1.RegisterAsyncPostBackControl(Button1);
if (!IsPostBack)
{
LastUpdate = DateTime.Now;
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>UpdatePanelUpdateMode Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1"
runat="server" />
<asp:Panel ID="Panel1"
GroupingText="UpdatePanel1"
runat="server">
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<p>
The content in this UpdatePanel only refreshes if five or more
seconds have passed since the last refresh and the button in
UpdatePanel2 was clicked. The time is checked
server-side and the UpdatePanel.Update() method is called. Last
updated: <strong>
<%= LastUpdate.ToString() %>
</strong>
</p>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<asp:Panel ID="Panel2"
GroupingText="UpdatePanel2"
runat="server">
<asp:UpdatePanel ID="UpdatePanel2"
runat="server">
<ContentTemplate>
<p>
This UpdatePanel always refreshes if the button is clicked.
Last updated: <strong>
<%= DateTime.Now.ToString() %>
</strong>
</p>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<asp:Button ID="Button1" Text="Button1" runat="server" OnClick="Button1_Click" />
</div>
</form>
</body>
</html>
So i've got a problem like many others : Facebook Like Box is not diplaying in IE8 (IE7 OK).
I found many posts about that, tried all solutions but did not succed...
IE8 message : FB.FBXML Null or not an object
NB : there's a function which handle resizing of FB Like Box.
Here's my HTML5 code :
<!doctype html>
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="fr" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"><![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="fr"> <!--<![endif]-->
<head>
...
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
</head>
<body>
...
<article>
<div class="row" id="content">
<div class="twelvecol last">
<div id="fb-root"></div>
<div class="fb-like-box" data-href="http://www.facebook.com/divstudio" data-width="1140" data-show-faces="true" data-stream="true" data-header="false"></div>
</div>
</div>
</article>
...
<script>
$(document).ready(function(){
var contentwidth = $('#content').width();
$('.fb-like-box').attr('data-width', contentwidth - '40');
FB.FBXML.parse(document.getElementsByClassName('.fb-like-box'));
});
</script>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</body>
</html>
Any ideas ?
website : http://www.divstudio.fr/emergenza/jazz/actu.html
thx a lot
You should add these lines to the tag.
xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml"
If there are already any attributes in the tag, leave them as it is. So that the starting html tag becomes like this.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" lang="<?php print $language->language ?>" xml:lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
Clear the cache if caching is enabled. It should work in IE-8
I had the same problem, and adding the appropriate xmlns attributes did not help. As it turns out, what was causing my problem is related to another problem: Facebook like box not showing up when user is not logged into Facebook. Igy and wasim kazi had the answers that led me to the solution. Here's how to solve the problem:
Log onto the Facebook account that manages the page you want reflected in the like box.
On the left nav bar, click on "Pages".
Click on the page title to bring up the admin panel for that page.
Click on Edit Page -> Edit Settings
You'll see a box labeled "Country Restrictions". If there are ANY countries listed in this box, your like box will be blank if the user isn't logged onto Facebook AND it will be blank in Internet Explorer (7, 8, 9). This makes sense: the only way Facebook would be able to enforce geographic restrictions with any certainty would be by making sure the user is logged in. Why this affects IE (whether the user is logged in or not) is a mystery, but that was the cause of the problem in my case.
I had the same issue with the facebook module for drupal 6.
I solved my problem by changing the markup type from XFBML to HTML5
I then added the HTML5 script in the <head> section:
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
I hope this fixes your problem as well.