 |
|
|
|
|
|
I would like to thank you for such a precise code and a consice apporach for doing image transitions.
It's really really helpfull.
Thanks a lot.
God bless you 
|
|
|
|
|
|
|
Thanks a lot for this article, but what if i need to make the slide show advance in order not randomly,
Thanks so much for your help.
|
|
|
|
|
|
|
When I run the downloaded code in VWD Express I do not see any of the thumbnail images below as seen in the demo. Also no buttons below??
|
|
|
|
|
|
|
The source code included is used to demo the AJAX features only. The live demo site has a few more functions added in, i.e. thumbnails, music, EXIF info and a simple photo album when the photos are clicked. Since those functions are beyond of AJAX, I didn't put them in. If more people is interested in those features, I'll consider to post another article when I get the time. Thanks.
|
|
|
|
|
|
|
Thanks for the quick reply. Great work. The demo is exactly what I have been looking for in a slideshow. I will look for a future posting. In the mean time my search goes on for something as good.
|
|
|
|
|
|
|
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
<script type="text/javascript">
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);
}
</script>
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 <IMG> elements. And you <IMG> 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?
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Rant 
Admin