View Full Version : .jpg & .mpeg

06-03-2006, 10:24 AM
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.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);
WriteResults.document.write('<p><b>Returned ' + TotalFound + ' results.</b><p><a href="javascript:window.close();">close window</a>');

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;
if (current>=ActiveVar) current = 0;

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 + "'";
} else {
window.status=" ";

function PreviousSuzyPic() { // Flips to the previous photo.
if(current<0) current = ActiveVar - 1;

function RandomSuzyPic() { // Shows a random photo.
randompic = Math.floor(Math.random()*ActiveVar);

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)
} else {
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) {
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.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>');

Here is a link of what the photoalbum looks like.

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.

06-03-2006, 11:08 AM
It's as simple as changing this:
WriteResults.document.write('<p><a href=javascript:ShowSuzyPic(' + loop + '); target="main"><img src=' + ActiveArray[loop].PicVal + '></a> ' + title);To this:
WriteResults.document.write('<p><a href="javascript:ShowSuzyPic(' + loop + ');" target="main">' + (ActiveArray[loop].PicVal.toLowerCase.indexOf(".mpeg") == -1 ? '<img src="' + ActiveArray[loop].PicVal + '">' : '<embed src="' + ActiveArray[loop].PicVal + '" autostart="true">') + '</a> ' + title);

Oh, and MPEG is not a Windows Media Player format.

06-03-2006, 08:35 PM
Thanks Twey. I made the change, but no go.
I even tried her suggestion to just change out the tag, same thing.

MPEG not a Windows Media Player format; I changed it to MPG in your
change but still nothing. The file type I'm using for the movie is correct.

A blank image holder appears in the display when the link is clicked. If I click
the blank image holder in the display, the seperate window pops up
with a broken Quicktime icon. It isn't associating properly?

Any more assistance would be greatly appreciated, though I know this
type of attempted change may be a dog.

06-03-2006, 11:33 PM
Careful.... .mpg and .mpeg are both valid extensions.

06-03-2006, 11:42 PM
The file must have an extension of .mpeg.
MPEG not a Windows Media Player format; I changed it to MPG in your
change but still nothing. The file type I'm using for the movie is correct.I know it is, I was merely remarking that MPEG is a universal format, and not owned by any company.

06-04-2006, 12:15 AM
The defaut plugin is also quicktime, not windows media player, on most computers.

It's a good format, though, because it IS universal. Though not the best for quality or anything. Tradeoff, but probably worth it.

06-04-2006, 03:53 AM
Sorry for any confusion.

I did as you mentioned.

I changed this:
WriteResults.document.write('<p><a href=javascript:ShowSuzyPic(' + loop + '); target="main"><img src=' + ActiveArray[loop].PicVal + '></a> ' + title);

To this:
WriteResults.document.write('<p><a href="javascript:ShowSuzyPic(' + loop + ');" target="main">' + (ActiveArray[loop].PicVal.toLowerCase.indexOf(".mpeg") == -1 ? '<img src="' + ActiveArray[loop].PicVal + '">' : '<embed src="' + ActiveArray[loop].PicVal + '" autostart="true">') + '</a> ' + title);

The files I'm trying to play are .mpg
I made a mistake earlier by saying .mpeg

I thought changing .mpeg to .mpg in your code might work.
Either way, it presents the same results when the link is clicked - a blank image holder. All files are in correct corresponding directories.

06-04-2006, 06:50 AM
By the way, I wasn't correcting you as much as just pointing out that both are valid extensions, like .jpg and .jpeg (and, actually, .jpe), and some files might accidentally have .mpg/.mpeg, so you might want to code it to allow for both.
I wasn't saying you were wrong or anything :)

06-04-2006, 08:46 AM
Proffessor djr33, the more insight the better :) .

As for quality, it'd be okay. The .mpg's are from an older (one of the first) Sony digital Mavica camera, the qualitly is pretty good. Their size is a little smaller that the (approx. 270x200) viewing area I'm trying to play them in. If I could get help in figuring out its problem, it'd be awsome. :D

06-04-2006, 08:54 AM
Forgot to mention, the .jpg's are displaying when a .jpg link is selected.
So the code is working for them, just not when a .mpg is specified.

06-04-2006, 09:03 AM
Call me Daniel... the professor thing is just based on post count... I just post a lot :)

Yeah, I'm sure the quality will be fine.
compression (format and method.... like quicktime and the "sorenson3" compressor, or avi and the "divx" compressor) determines filesize and quality.
they're related... if one goes up, one goes up as well.
The "lower quality" compressors really are just ones that mean you'll have a slightly larger file to get the same quality as a "higher quality" compressor... it's all about the ratio.

Yeah.... I'm not really sure.

My big hobby is video editing, not web design, though I do that too.
I don't really know javascript (html/php for me as of now), though i'm learning, so don't think i'll be much help.
If you have any video questions, feel free to ask, though.... saw this thread and figured I'd just add a couple notes about the format :)

Wait a bit, and I'm sure Twey can figure it out.

EDIT: Just saw the new post. Ok... hmm.
That might be the javascript, but at least it's differentiating. I would guess that it might now be related to the outputted html tag itself, not the javascript to display the tag.
Maybe you could try to replace it with something else, like a link tag, just to see if it works with that.
Or, better yet, try your code on another page, not using javascript. If that DOES work, then the javascript needs to be checked to be sure its outputting the same thing.

06-04-2006, 11:10 AM
Hey Daniel,

Like this? :cool: 04-17-200 Ocean/Beach (http://home.earthlink.net/~test_site/)

If at all possible, Media Player playback preferred.
The size is actually larger than what is shown in the above link.
I made it smaller for demonstration purposes.

06-04-2006, 11:25 AM
Well, I made one stupid mistake. Should be:
WriteResults.document.write('<p><a href="javascript:ShowSuzyPic(' + loop + ');" target="main">' + (ActiveArray[loop].PicVal.toLowerCase().indexOf(".mpeg") == -1 ? '<img src="' + ActiveArray[loop].PicVal + '">' : '<embed src="' + ActiveArray[loop].PicVal + '" autostart="true">') + '</a> ' + title);And yes, if your file extensions are .mpg you should change .mpeg to .mpg in the code.
If you're still having problems, we'll need to see your page.

06-04-2006, 09:22 PM
Yeah, seems like it works on your test page...

Try Twey's new code... should fix it.

06-04-2006, 11:14 PM
Twey, I made the changes.
I posted here. (http://home.earthlink.net/~test_site/)

Same thing is occurring. Image holder shows when the .mpeg
link is selected. If I click on the image holder, popup shows and
then an error is produced.

Also, the popups aren't working for the .jpg's now.
When the image is clicked, popup opens but no image displays.
The search feature is working. If you search for unnamed, it
produces the results and if clicked, shows in the album.

(side note: album page and search window should be the only opened
windows. If you have another window opened, it may error
and not display the picture within the album, or it may open a blank
window. This error has always occurred though. Not a big deal, the search
feature usually works okay most of the time.)

Maybe the array discriptions (?) needs tweaked - adding .mpeg
to the second (other) js file?

06-04-2006, 11:25 PM
hm... I dunno.

the broken qt thing appears in the popup.

Twey, are you sure you changed the thing displayed, not just the popup, for an mpg?

the worst part of JS is that you can't see the source as it does stuff... so I have no idea what it's writing on your page.

06-05-2006, 01:10 AM
Maybe the plug-in needs to be specified somewhere?
I notice when the popup opens, QT shows normal for a sec, then breaks.

06-05-2006, 02:06 AM
It doesn't "show normal" as in it's working, but rather, it loads.
That may imply that the url for the mpg isn't being given correctly. The QT will break if either: 1. Error in opening the file or 2. file doesn't exist.
It may not be finding the file... the url might be wrong.

06-05-2006, 02:15 AM
The url is okay.
[guess] Something JS is doing, or not doing, is preventing it
from aquiring or loading the file.
A dog for sure.
After the popup opened, I viewed the source.

<html><head><title>.MPEG Movie Clip</title></head><body style="background:url(search_bg.jpg); font:8pt verdana; margin:2px"><center>06/04/2006<br><embed src = autostart=true2kvac/april/01.MPEG><br></p>4-17-2000 Ocean/Beach<br><a href="javascript:window.close();">close window</a></center></body></html>

Notice there isn't a space between the value true and the directory.
Maybe that has something to do with the popup not working?
But what about the initial view in the photoalbum?

interesting for sure.

06-05-2006, 02:22 AM
javascript just makes code... doesn't stop it from loading.
I think the javascript is making the wrong URL... not that the one you put in is wrong.

<embed src = autostart=true2kvac/april/01.MPEG>
Ah! That's it.

<embed src=2kvac/april/01.MPEG autostart=true>

the src needs to be the url, not after true. Ha.

Not sure how to fix in the JS, though.

06-05-2006, 02:33 AM
lol, I just now noticed the same thing.
I was like, where's the src? :)
I took the popup source code, fixed the code.
Linked it to be a standalone page here. (http://home.earthlink.net/~test_site/popup.htm)

Now I'm wondering, if the code for the popup can be
fixed, what in the JS file is scrambling it. If that can be
found, maybe it would play in the photoalbum shell.

I also noticed, the size produced is small, and there isn't
any play/stop buttons. Which leads to me think maybe
somewhere in the JS file, attributes for the plug-in may
need to be specified. (?)