|
I liked the functions on your demo site. Is there anyway I can get a copy of the code you used there that allows you to click on the image and get more info.
|
|
|
|
|
The photo info is attached in JPG files in Exif format. You can search the net for the Exif resources. In my demo project I implement my own Exif decoder based on the resources I found on the internet. I'll post the Exif stuff when I find the time. Thank you for your interesting in my article.
|
|
|
|
|
Can someone please let me know how I can get the slideshow to work with Master Pages?
Alex
|
|
|
|
|
This issue was reported before. The problem is that the Master Page will change the HTTP image element's IDs. You have to modify those IDs used in the javascript to match the HTTP image element's IDs.
|
|
|
|
|
I also found it doesn't work in firefox, although it works perfectly in IE.
After reading your code I can now understand why it doesn't work in Firefox, as you make use of transitions that firefox does not support.
Thanks for your code though as I can use it as an idea.
-- modified at 6:27 Friday 23rd February, 2007
|
|
|
|
|
Hello
Am using slide show coding, net.2005 C# and master page, this is does not support mozilla browser. Am getting all image is database and using public static dataset. It’s working in all IE browser but dose not support mozilla browser plz help me
This mail id: gurusewack@gmail.com
guru@inbox.com
This is client side coding
var c_interval = 10000;
window.setTimeout("getNextImage()", c_interval);
function getNextImage()
{
CallServer(document.getElementById("ctl00_ContentPlaceHolder1_photo").src, "");
}
function ReceiveServerData(rValue)
{
var wds = rValue.split(";");
document.getElementById("ctl00_ContentPlaceHolder1_photo").style.filter = wds[1];
var img = new Image();
img.onload = function(){ imageLoaded(this); }
img.onerror = function(){ imageError(this); }
img.onabort = function(){ imageError(this); }
img.src = wds[0];
}
function imageError(img)
{
window.setTimeout("getNextImage()", 1000);
}
function imageLoaded(img)
{
var photo = document.getElementById("ctl00_ContentPlaceHolder1_photo");
photo.filters[0].apply();
photo.filters[0].play();
photo.src = img.src;
window.setTimeout("getNextImage()", c_interval);
}
This server side coding
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.IO;
public static DataSet dslist = new DataSet();
string m_lastFileName = "none";
ImageManagement objImageMang = new ImageManagement();
protected void Page_Load(object sender, EventArgs e)
{
Session["module"] = "Home";
if (!IsPostBack)
{
dslist = objImageMang.Display();
}
if (IsPostBack)
return;
photo.Src = GetNextImageUrl();
if (photo.Src == "")
{
photo.Src = Server.MapPath("HomeImage/DefaultHomeImage.jpg");
}
string cbReference = Page.ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context");
string callbackScript = "function CallServer(arg, context)" + "{ " + cbReference + "} ;";
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CallServer", callbackScript, true);
}
private string GetNextImageUrl()
{
DataView dv = new DataView();
try
{
dv = dslist.Tables[0].DefaultView;
}
catch
{
}
string[] files = new string[dv.Count];
if (dv != null)
{
int i = 0;
if (dv.Count > 0)
{
for (i = 0; i < dv.Count; i++)
{
files[i] = Server.MapPath(dv[i]["ImagePath"]);
}
}
}
if (files.Length == 0)
return string.Empty;
while (true)
{
int n = (int)((files.Length - 1) * (new Random()).NextDouble());
if (files[n].IndexOf(m_lastFileName) < 0)
{
return files[n].Replace(AppDomain.CurrentDomain.BaseDirectory, string.Empty);
}
}
}
public string GetCallbackResult()
{
return GetNextImageUrl() + ";" + GetNextTransition();
}
public void RaiseCallbackEvent(string eventArgument)
{
m_lastFileName = Path.GetFileName(eventArgument);
}
private string GetNextTransition()
{
int n = (int)((new Random().NextDouble()) * 5);
switch (n)
{
case 0:
case 1:
n = (int)((new Random().NextDouble()) * 22);
return "revealTrans(duration=2,transition=" + n.ToString() + ")";
case 2:
case 3:
if (Request.Browser.Browser == "IE")
{
n = (int)((new Random().NextDouble()) * 8);
switch (n)
{
case 0:
return "progid:DXImageTransform.Microsoft.RandomDissolve()";
case 1:
return "progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=20, Duration=2, Enabled=false)";
case 2:
return "progid:DXImageTransform.Microsoft.RadialWipe(wipeStyle='clock')";
case 3:
return "progid:DXImageTransform.Microsoft.Wheel(spokes=4)";
case 4:
return "progid:DXImageTransform.Microsoft.Stretch(stretchStyle='spin')";
default:
return "progid:DXImageTransform.Microsoft.Stretch(stretchStyle='push')";
}
}
else
return "blendTrans(duration=2)";
default:
return "blendTrans(duration=2)";
}
}
Guru
|
|
|
|
|
To get this to work in firefox you will have to change the transitions things.
document.getElementById("ctl00_ContentPlaceHolder1_photo").style.filter = wds[1];
this line here needs to checked.
|
|
|
|
|
Hello Lang,
Thanks for the useful article. It works well and is fairly compact.
However, just one little problem. I cannot get it to work with master pages. It just displays the first photo and then freezes.
I have a fully coded example that I would be happy to send you if you could supply an email address. Thanks.
Donald Shaw
|
|
|
|
|
Hi Donald,
Happy New Year!
Thank you for reading my article. My email address is langdeng@hotmail.com. You are welcome to send me the source. I will take a look when I get a chance.
Lang Deng
|
|
|
|
|
Does anyone know why I get banding at the bottom of some images? It doesn't happen with all images but some images have a gray banding at the bottom as if the image didn't completely download.
Any help would be appreciated.
Yoojin Kim
|
|
|
|
|
you said:
"The function getNextImage() will call another function CallServer(...). The CallServer() then sends a request to server with an an argument of last image's url. When the web server receives the request, it will call the method RaiseCallbackEvent(...) and then GetCallbackResult() in Default.aspx.cs in the server . And the method GetCallbackResult() then calls GetNextImageUrl(). When GetCallbackResult() is done, it returns a string back to the client browser and calls the function ReceiveServerData(...). These all happen in the background and the browser will nerver refresh itself. "
where can i say which GetCallbackResult() is being used, when i want to refresh 3 photos at the same time? My methods are called GetCallbackResult(), GetCallbackResultRps(), GetCallbackResultKst().
thx
Lennie
|
|
|
|
|
Hi lennied,
Thanks for reading my article. The function names called in the background are hard coded in the Page_Load() event, see followings,
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
return;
photo.Src = GetNextImageUrl();
//Register Ajax client script to client's browsers. This has to be hard coded.
string cbReference = Page.ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context");
string callbackScript = "function CallServer(arg, context)" + "{ " + cbReference + "} ;";
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CallServer", callbackScript, true);
}
When the page is rendered, it will generate the javascript function CallServer() in the browser. But the function ReceiveServerData() is needed to be created manually as an event handler.
public void RaiseCallbackEvent(string eventArgument) and
public string GetCallbackResult()
are methods definded in the interface System.Web.UI.ICallbackEventHandler. So you have to put you code in those methods. It would not call your GetCallbackResultRps() and GetCallbackResultKst(), unless you call them RaiseCallbackEvent() or GetCallbackResult().
You can refresh as many images as you want in theory. In the method GetCallbackResult(), you can reture a string contains the 3 image urls, i.e. “images/pic1.jpg;images/pic2.jpg;images/pic3.jpg”. You can defind your own formats. This string will be sent to the event handler ReceiveServerData(rValue) automatically by your server. In this case the param rValue will be “images/pic1.jpg;images/pic2.jpg;images/pic3.jpg”. So you parse the string and assign the 3 image urls to the SRC property of your elements. And you elements will load the images from the server in background.
The reason that the last image url is sent back to server is to let the server know and avoid to send the same image url for the next display.
Hope this will help you understand the workflow of the AJAX implemented in the interface of System.Web.UI.ICallbackEventHandler.
Lang
|
|
|
|
|
...
thx alot!! it works!!
i couldn't say how lucky i am, that i solve this problem with your help.
Lennie
|
|
|
|
|
function getNextImage()
{
//Send the request to server with the current image url as the argument
CallServer(document.getElementById("photo").src, "");
}
when this function is called, i get an error, that there is no object available when the site is refreshing and wants to upload the next image, but the first image is shown without problems.
Have you any ideas?
thx in advance
-- modified at 10:22 Tuesday 5th December, 2006
i fount out that the problem only occurs, when i'm using masterpages.
if i run your project stand alone, i got no error messages from the browser.
-- modified at 5:39 Wednesday 6th December, 2006
i solved the problem, because my control wasn't named like
CallServer(document.getElementById("photo").src, ""); but
CallServer(document.getElementById("ctl00_ContentPlaceHolder2_photo").src, "");
|
|
|
|
|
Hi,
I have exactly the same problem with master pages.
I tried replacing all instances of "photo" with "ctl00_ContentPlaceHolder1_photo" in my Javascript and sure enough this fixed the problem.
It seems kind of kludgy, but I guess if you want to use master pages, it is the only way.
-- modified at 19:41 Monday 1st January, 2007
|
|
|
|
|
At least in version 2.0
--Ben
|
|
|
|
|
I have not tested the project in FireFox. Some objects used in javascript may be different from FireFox. I will debug the javascript to check it out if I have time. Thank you.
|
|
|
|
|
Hello Ben,
The only thing that Firefox chokes on is the transition effect between slides. Just modify the imageLoaded routine in the Javascript like so:
function imageLoaded(img)
{
var photo = document.getElementById("photo"); //Find the image control object
if(navigator.appName == "Microsoft Internet Explorer")
{
photo.filters[0].apply(); //Apply the transition effect
photo.filters[0].play(); //Play the effect and display the new image
}
photo.src = img.src; //Assign the image to the image control
window.setTimeout("getNextImage()", c_interval);//Initiate the next request
var i = img.src.lastIndexOf("/") + 1;
var phototitle = img.src.substring(i) + " " + sequence;
document.getElementById("phototitle").innerHTML = phototitle; // set the caption
}
and your firefox users can enjoy the slideshow, albeit without fancy transitions.
|
|
|
|
|
I tried this but it still does not show any image in Firefox. It does not work in Opera 9 either. Any way to fix this?
|
|
|
|
|
Hi wagstff,
I did modify the function imageLoaded(img) just like you said. It still not work on FireFox.
Please help me.
Thanks,
alkm120
|
|
|
|
|
I had this issue as well and after a few hours of pounding my head I found a solution.
The problem exists in the GetNetImageUrl function
Specifically the following line:
return files[n].Replace(AppDomain.CurrentDomain.BaseDirectory, string.Empty);
You see files contains a complete path to the files in your image directory. This listing is using windows pathing. Ex: C:\whatever\images\whatever.jpg
We are finding everything up to the images directory with this line and removing it from the string leaving images\whatever.jpg and passing it to the browser. Now anyone that is paying attention here will notice that \ isn't a valid directory signifier on the web. / is! IE is happily translating your mistake for you Firefox isn't that forgiving nor is any other browser I'm aware of...
Change it to:
return "images/" + files[n].Replace(AppDomain.CurrentDomain.BaseDirectory + "images\\", string.Empty);
that will return a proper image path and allow firefox to find the images so they can load. However, you still have to disable the transitions for firefox to cooperate.
So to make this work with Firefox you need to:
C# Changes:
1.) Look in GetNextImageUrl() and change
return files[n].Replace(AppDomain.CurrentDomain.BaseDirectory, string.Empty);
to
return "images/" + files[n].Replace(AppDomain.CurrentDomain.BaseDirectory + "images\\", string.Empty);
2.) Look in GetCallBackResult() and change
return GetNextImageUrl() +";" + GetNextTransition();
to
return GetNextImageUrl();
JavaScript Changes:
1.) Replace ReveiveServerData(rValue) with this new function
function ReceiveServerData(rValue)
{
var img = new Image();
img.onload = function(){ imageLoaded(this); }
img.onerror = function(){ imageError(this); }
img.onabort = function(){ imageError(this); }
img.src = rValue;
}
2.) Look in imageLoaded and comment out or remove the two lines that deal with filters.
After that it runs a simple slide show on both browsers for me! The transitions are nice but I needed something more universal.
I hope this helps someone not lose any more hair. Many thanks to Lang Deng for the original!
|
|
|
|
|
It run well on both browser but not support any effect. Can u fix this?
QuynhTD
|
|
|
|
|
Sadly not to my knowledge. The effects are performed by direct x filters that only work in IE. I was going to try to make some animated gif files that I could put over the picture but the effect wasn't nearly as nice. The only thing I can think of would be to build this in Flash but I'm no flash guy.
|
|
|
|
|
I can not seem to get it to work when the files located inside a directory rather than in the root of my web directory. It looks for the images folder in the web root directory for some reason. if i modify the "images" line and add my directory like "/slideshow/images" then it finds the file names but the path has two "/slideshow" in it so the image still doesn't show up.
www.seedandgarden.com
|
|
|
|
|
Thank you for your interest in my article. Actually the image files can be in anywhere under the root or a virtual directory of your web site, as long as they can be read by browsers, i.e. http://your_web_url/your_virtual_dir/your_image.jpg. What you need to do is to return these image URLs in the function GetNextImageUrl(). In my examples, it search files in the folder “images” under the directory of the application or the directory you deploy your web page.
string[] files = Directory.GetFiles(AppDomain.CurrentDomain.BaseDirectory + "images", "*.jpg");
Then it makes up the URL for one of these files randomly.
files[n].Replace(AppDomain.CurrentDomain.BaseDirectory, string.Empty
The returned string of the function GetNextImageUrl() will look like “images\your_image.jpg”. This is a relative path to your virtual directory of your Slideshow page. You don’t need to put any strings, such as http:// in front of it, since the client’s browsers will automatically make up the absolute URL to load your image, i.e. http://your_web_site/your_slideshow_directory/images/your_image.jpg. Of course you can return an absolute URL in GetNextImageUrl(). So the image file can be anywhere in your web site. A relative path can be only under your application (or Slideshow) virtual directory.
One thing you need to know is running a website project in VS2005 is a bit different from the deployment. In a project, it always uses the root directory with a port other than 80. In the web site deployment, you need to create a web folder or virtual directory, i.e. “Slideshow”. Then you can just copy your project into that folder. So users can access to your web with the URL as http://your_web_site/Slideshow/default.aspx.
Hope these help you understand my example.
|
|
|
|