.jpg & .mpeg
I'm trying to make a .jpg only photoalbum show .jpg's and play .mpeg (win media player) movie clips.
I asked the creator for assistance, she said "replace the < img src = > tag with an < embed src = autostart=true > tag, and your movies will play!
The problem is, the above reply is for only playing .mpeg movies, and not showing .jpg images. I asked her if it was possible to have both (.mpeg and .jpg), she said yes - I'd have to add an IF statement.
I don't know javascript at all. Could someone please help me alter the code.
It comes in two parts, but she said this is the only part that needs tweaked:
/**********************************************************
* Suzy's Javascript Photo Album, version 8.0, March 17, 2004
*
* Changed this version: javascript is now in two seperate external
* files, and put "spaces" in category names.
*
* This javascript may not be used on other sites without prior permission.
*
* You may contact me at photokity@hotmail.com for assistance.
*
**********************************************************/
self.name = "main"; // If you are using frames, change "main" to the name of the frame that the photoalbum is in.
current = 0; // Sets the current picture being shown to the first one.
ActiveVar = 0; // Sets up the variable that counts the pictures.
var ActiveArray = new Array() // Sets up the active array.
for (loop=0; loop < MainVar; loop++) {
ActiveArray[ActiveVar++] = new Fix(MainArray[loop].DatVal, MainArray[loop].PicVal, MainArray[loop].TitVal, MainArray[loop].CatVal, MainArray[loop].TxtVal)
}
function DisplayCategories() { // Lists out the categories.
TotalCategories = SuzyCategory.length;
for (loop=0; loop < TotalCategories; loop++) {
document.write("<option value=" + SuzyCategory[loop] + ">" + ReplaceChars(SuzyCategory[loop]) + "</option>");
}
}
function FindPic() { // The search for a photo feature.
TotalFound = 0;
SearchString = document.SuzyForm.SearchWord.value;
SearchString = SearchString.toLowerCase();
WriteResults = window.open("","resultwindow","height=310, width=290, toolbar=0, status=0, menubar=0, resizable=1, scrollbars=1");
WriteResults.document.open();
WriteResults.document.write('<style type=text/css>body{background:url(parchment.jpg); font:8pt verdana}'
+ 'a{text-decoration:none}'
+ 'img{border:2px ridge #ffaaaa; height:50px; vertical-align:middle}'
+ '</style>'
+ 'You searched for: <i>' + SearchString + '</i>'
+ '<br>Category: <i>' + parent.document.SuzyForm.CategoryDropdown.options.value + '</i>'
+ '<p><b>Results:</b><br>');
for (loop=0; loop < ActiveVar ; loop++) {
Keyword = ActiveArray[loop].TxtVal;
Keyword = Keyword.toLowerCase();
URL = ActiveArray[loop].PicVal;
title = ActiveArray[loop].TitVal;
title = title.toLowerCase();
SearchResult = Keyword.indexOf(SearchString);
SearchResult2 = title.indexOf(SearchString);
if (SearchResult != "-1" || SearchResult2 != "-1") {
WriteResults.document.write('<p><a href=javascript:ShowSuzyPic(' + loop + '); target="main"><img src=' + ActiveArray[loop].PicVal + '></a> ' + title);
TotalFound++;
}
}
WriteResults.document.write('<p><b>Returned ' + TotalFound + ' results.</b><p><a href="javascript:window.close();">close window</a>');
WriteResults.document.close();
}
function LoadPiclist() { // Loads initial list of pictures on web page.
for (loop=0; loop < MainVar; loop++) {
document.write("<option value=" + ActiveArray[loop].PicVal + ">" + ActiveArray[loop].TitVal + "</option>");
}
}
function LoadNextPic() { // Loads next picture for faster operation.
NextImage = new Image();
NextPic = current + 1;
if (NextPic>=ActiveVar) NextPic = 0;
NextImage.src = ActiveArray[NextPic].PicVal;
}
function NextSuzyPic() { // Flips to the next photo.
TotalImages = document.SuzyForm.SuzyDropdown.options.length;
current++;
if (current>=ActiveVar) current = 0;
ShowSuzyPic(current);
}
LoadThis = 0;
function PreLoader() { // If checked, preloads all images into cache. Five second interval between pics.
if (SuzyForm.PreloadPics.checked && ++LoadThis < MainVar) {
ShowingImage = new Image();
ShowingImage.src = MainArray[LoadThis].PicVal;
window.status="Pre-Loading image... '" + MainArray[LoadThis].PicVal + "'";
RunLoader();
} else {
window.status=" ";
}
}
function PreviousSuzyPic() { // Flips to the previous photo.
current--;
if(current<0) current = ActiveVar - 1;
ShowSuzyPic(current);
}
function RandomSuzyPic() { // Shows a random photo.
randompic = Math.floor(Math.random()*ActiveVar);
ShowSuzyPic(randompic);
}
function ReplaceChars(entry) { // Replaces the _'s in cat names to make it pretty.
out = "_"; // replace this
add = " "; // with this
temp = "" + entry; // temporary holder
while (temp.indexOf(out)>-1) {
pos= temp.indexOf(out);
temp = "" + (temp.substring(0, pos) + add +
temp.substring((pos + out.length), temp.length));
}
return temp;
// document.subform.text.value = temp;
}
function RunLoader() { // Pre-loads all images every 5 seconds, if checkbox is selected.
timerLoad = setTimeout("PreLoader()",5000)
}
function RunSlideShow() { // Shuffles the photos in a slide show.
timerSlideShow = setTimeout("NextSuzyPic();",document.SuzyForm.Timer.value*1000)
}
function ShowSuzyCategory(picked) { // Shows the pictures in that category.
ActiveArray.length = 0;
PicList = "<SELECT size=13 style='width:200px; font:8pt verdana' name='SuzyDropdown' onChange='ShowSuzyPic(SuzyForm.SuzyDropdown.options.selectedIndex);'>";
ActiveVar = 0;
current = 0;
for (loop=0; loop < MainVar; loop++) {
if (MainArray[loop].CatVal.toLowerCase() == picked.toLowerCase() || picked == "all") {
ActiveArray[ActiveVar++] = new Fix(MainArray[loop].DatVal, MainArray[loop].PicVal, MainArray[loop].TitVal, MainArray[loop].CatVal, MainArray[loop].TxtVal)
PicList = PicList + "<option value=" + MainArray[loop].PicVal + ">" + MainArray[loop].TitVal + "</option>";
}
}
PicList = PicList + "</select>";
document.getElementById("PicSpot").innerHTML = PicList;
}
function ShowSuzyPic(newpic) { // Shows the photo and text on the page.
current = newpic;
SelectionBox = document.SuzyForm.SuzyDropdown;
SelectionBox.options[current].selected = true;
document.getElementById("SuzySpot").innerHTML = '<a href=javascript:SuzyPicRemote("' + ActiveArray[current].PicVal + '");><img name="PicShowing" src=' + ActiveArray[current].PicVal + ' height=200 border=0></a>';
document.getElementById("Journal").outerHTML = '<div id=journal><br><b>' + ActiveArray[current].TitVal + '</b><p>' + ActiveArray[current].DatVal + '<p style="text-align:justify; text-indent:25px">' + ActiveArray[current].TxtVal + '</div>';
if (document.SuzyForm.WhereView[1].checked) {
timerID = setTimeout("SuzyPicRemote(ActiveArray[current].PicVal)",1000)
}
if (document.SuzyForm.SelectedMode[0].checked) {
timerSlideShow = setTimeout("NextSuzyPic();",document.SuzyForm.Timer.value*1000)
LoadNextPic();
} else {
LoadNextPic();
}
}
function SuzyPicRemote(picName) { // Pops up the photo in a remote window.
ShowingImage = new Image();
ShowingImage.src = picName;
wid = ShowingImage.width + 50;
hei = ShowingImage.height + 60;
if (wid < 30 || hei < 30) {
wid=650;
hei=490;
}
if (screen.width < wid || screen.height < hei) {
wid = screen.width - 50;
hei = screen.height - 50;
}
OpenWindow = window.open("", "remoteWin", "resizable=1, scrollbars=1, toolbar=0, left=15, top=10, width=" + wid + ", height=" + hei);
OpenWindow.document.open();
OpenWindow.document.write('<html><head><title>' + ActiveArray[current].TitVal + '</title></head>'
+ '<body style="background:url(parchment.jpg); font:8pt verdana; margin:2px"><center>' + ActiveArray[current].DatVal + '<br>'
+ '<img src=' + picName + '><br>' + ActiveArray[current].TxtVal
+ '<br><a href="javascript:window.close();">close window</a></center></body></html>');
OpenWindow.document.close();
}
Here is a link of what the photoalbum looks like.
http://javascript.internet.com/miscellaneous/kitykity's--photo-album.html
I'm trying to have the photoalbum play .mpeg (win media player) in the window (where pictures display) OR show .jpg images, when a link is selected from the box.
CSS Codes
Reply With Quote
Bookmarks