|
 |
|
|
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.
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
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??
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
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.
|
| Sign In·View Thread·PermaLink | 3.00/5 (1 vote) |
|
|
|
|
|
|
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.
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
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.
|
| Sign In·View Thread·PermaLink | 2.00/5 (2 votes) |
|
|
|
|
|
|
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.
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
Can someone please let me know how I can get the slideshow to work with Master Pages?
Alex
|
| Sign In·View Thread·PermaLink | 1.00/5 (1 vote) |
|
|
|
|
|
|
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.
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
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
|
| Sign In·View Thread·PermaLink | 1.00/5 (1 vote) |
|
|
|
|
|
|
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
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
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.
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
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
|
| Sign In·View Thread·PermaLink | 1.00/5 (1 vote) |
|
|
|
|
|
|
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
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
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
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
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
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
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
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
|
|
|
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, "");
|
| Sign In·View Thread·PermaLink | 1.00/5 (1 vote) |
|
|
|
|
|
|
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
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
|
|
|
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.
|
| Sign In·View Thread·PermaLink | 1.00/5 (1 vote) |
|
|
|
|
|
|
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.
|
| Sign In·View Thread·PermaLink | 3.00/5 (2 votes) |
|
|
|
|
|
|
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?
|
| Sign In·View Thread·PermaLink | 5.00/5 (1 vote) |
|
|
|
|
|
|
Hi wagstff,
I did modify the function imageLoaded(img) just like you said. It still not work on FireFox.
Please help me.
Thanks,
alkm120
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
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!
|
| Sign In·View Thread·PermaLink | 3.20/5 (4 votes) |
|
|
|
|
General 
News 
Question 
Answer 
Joke 
Rant 
Admin