 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
jusetan
Joined: 03 May 2008
Posts: 2
|
 Posted: Sat May 03, 2008 3:24 pm help modifying my random image script |
 |
|
|
Hey!
I've got a random image script setup to change the image on my main page. I would like to keep the random image loader setup, however I would rather have the user click on the image to load up images in order (rather than random- the random loader often loads up the same images, and the user never gets to see all the images).
The other option would be to add two arrows to change the images by clicking on the arrows. However I'd still want to have the random loader when the user opens the main page.
could someone help me to modify the script I am using?
www.framediscreet.com
Thanks!!
Justin
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=binary" />
<title>Frame Discreet - regular 8mm, super 16mm, super 8mm, film transfers to dvd toronto</title>
<meta content="transfer super 8 to dvd, transfer regular 8 to dvd, home movies to dvd, transfer super 8 regular 8 and 16mm film to dvd minidv hard drive, telecine transfers, super 8 negative stocks, vision 200t, vision 500t, film to video transfers, Transfer Super 8, Regular 8 and 16mm
film to DVD, MiniDV or Hard Drive. Located in Toronto. Telecine
transfers. film transfers, film to video, film to dvd, film to digital, super 8mm, 8mm home movies" name="keywords">
<meta content="8mm film transfers, Trusted by Archives and Filmmakers across Canada, Transfer Super 8, Regular 8 and 16mm film to DVD, MiniDV or Hard
Drive. Located in Toronto. Telecine transfers. Home Movies transfered to DVD" name="description">
<style type="text/css"><!--
body {
background-color: #3B3B3B;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #626262;
text-decoration: none;
}
div.topnav{
position: absolute;
width: 900px;
height: 55px;
left: 13px;
top: 15px;
visibility: visible;
border: medium solid #0B0000;
}
div.aboutlayer{
position:absolute;
width:900px;
height: 400px;
overflow: off;
background-color: #6D6D6D;
visibility: inherit;
padding: 10px;
left: 13px;
top: 110px;
border: medium solid #000000;
}
.style3 {
font-family: "Arial";
color: #FFFFFF;
font-size: small;
}
.style4 {
font-size: 12px;
color: #D6D6D6;
}
.style5 {
font-size: x-large;
font-weight: bold;
font-family: "Arial";
}
.style7 {font-size: 10px; color: #D6D6D6; font-family: "Arial"; }
.style9 {font-size: 14px; color: #A60000; font-weight: bolder; font-family: "Arial"; }
.style10 {font-size: 12px; color: #D6D6D6; font-family: "Arial"; }
.style12 {font-family: "Arial"; color: #FFFFFF; }
.style13 {color: #8A8A8A}
.style15 {font-size: 14px; color: #D6D6D6; font-family: "Arial"; }
.style16 {font-size: 45px; color: white; font-family: "Arial"; }
--></style>
<script language="JavaScript" type="text/javascript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//--></script>
<script language="JavaScript">
<!-- Original: Nicholas Lupien (smylexataol.com) -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
var rand1 = 0;
var useRand = 0;
images = new Array;
images[1] = new Image();
images[1].src = "images/Telecine/home.jpg";
images[2] = new Image();
images[2].src = "images/Telecine/home2.jpg";
images[3] = new Image();
images[3].src = "images/Telecine/home3.jpg";
images[4] = new Image();
images[4].src = "images/Telecine/home4.jpg";
images[5] = new Image();
images[5].src = "images/Telecine/home5.jpg";
images[6] = new Image();
images[6].src = "images/Telecine/home6.jpg";
images[7] = new Image();
images[7].src = "images/Telecine/home7.jpg";
images[8] = new Image();
images[8].src = "images/Telecine/home8.jpg";
images[9] = new Image();
images[9].src = "images/Telecine/home9.jpg";
images[10] = new Image();
images[10].src = "images/Telecine/home10.jpg";
images[11] = new Image();
images[11].src = "images/Telecine/home11.jpg";
images[12] = new Image();
images[12].src = "images/Telecine/home12.jpg";
images[13] = new Image();
images[13].src = "images/Telecine/home13.jpg";
images[14] = new Image();
images[14].src = "images/Telecine/home14.jpg";
images[15] = new Image();
images[15].src = "images/Telecine/home15.jpg";
images[16] = new Image();
images[16].src = "images/Telecine/home16.jpg";
images[17] = new Image();
images[17].src = "images/Telecine/home17.jpg";
images[18] = new Image();
images[18].src = "images/Telecine/home18.jpg";
images[19] = new Image();
images[19].src = "images/Telecine/home19.jpg";
images[20] = new Image();
images[20].src = "images/Telecine/home20.jpg";
images[21] = new Image();
images[21].src = "images/Telecine/home21.jpg";
images[22] = new Image();
images[22].src = "images/Telecine/home22.jpg";
images[23] = new Image();
images[23].src = "images/Telecine/home23.jpg";
images[24] = new Image();
images[24].src = "images/Telecine/home24.jpg";
images[25] = new Image();
images[25].src = "images/Telecine/home25.jpg";
images[26] = new Image();
images[26].src = "images/Telecine/home26.jpg";
images[27] = new Image();
images[27].src = "images/Telecine/home27.jpg";
function swapPic() {
var imgnum = images.length - 1;
do {
var randnum = Math.random();
rand1 = Math.round((imgnum - 1) * randnum) + 1;
} while (rand1 == useRand);
useRand = rand1;
document.randimg.src = images[useRand].src;
}
// End -->
</script>
</head>
<body onload="swapPic()"><span>
<div style5="" id="topNav"><img title="" alt="" src="images/Telecine/filmheader.gif" align="left"></div><br>
<p class="style10"></p>
<p class="style10"> </p>
<div style="position: absolute; left: 7px; top: 91px" id="menulayer" class="style3">
<table border="0" cellpadding="2" cellspacing="0" width="850">
<tbody>
<tr>
<td style="vertical-align: top"><br>
</td>
<td scope="col" align="left" valign="bottom" width="2"><strong><a href="super8mmtransfers.htm"> home </a></strong></td>
<td scope="col" align="left" width="2"><a href="super8mmabout.htm"><strong> about </strong></a></td>
<td scope="col" align="left" width="2"><a href="http://www.framediscreet.blogspot.com" target="_blank"><strong> news </strong></a></td>
<td scope="col" align="left" width="2"><a href="super8mmmethod.htm"><strong> method </strong></a></td>
<td scope="col" align="left" width="2"><strong><a href="super8mmadvice.htm"> advice </a></strong></td>
<td scope="col" align="left" width="2"><a href="super8mmsamples.htm"><strong> samples </strong></a></td>
<td scope="col" align="left" width="2"><a href="super8mmprices.htm"><strong> prices </strong></a></td>
<td scope="col" align="left" width="2"><a href="super8mmspecials.htm"><strong> specials </strong></a></td>
<td scope="col" align="left" width="450"><br>
</td></tr></tbody></table></div>
<div style="width: 900px; height: 400px" id="aboutLayer" class="aboutlayer"><a onclick="swapPic();"><img alt="" name="randimg" src="images/Telecine/home.jpg" align="left" border="1" hspace="5"></a><font face="Verdana" size="-2"><strong>
Frame Discreet</strong> offers up a fresh new approach to digitizing 8mm + 16mm film. Taking the road less traveled, we've boiled up a system that rivals the big dog's traditional telecine methods at a fraction of the cost.<br>
<br> Frame by frame scanning and advanced color grading is essential to our quality transfers. <br>
<br> Whether its indy films, commercials, music videos, archival films or one of our own crazy projects, the same amount of care goes into creating unforgettable images. <br>
<br>
Our unconventional approach is quickly building a reputation with filmmakers and archives all across Canada. <br>
<br>Check us out, you may be surprised with what's inside this lil' studio...<br>
</font><font face="Verdana" size="-1"><br>
<a onclick="swapPic();"><font face="Verdana" size="-2"> click image to see more recent samples</font></a></font>
<div style="position: absolute; width: 418px; z-index: 3; left: 219px; top: 427px; visibility: visible; height: 102px" class="style10" align="center"><font face="Verdana" size="-2"></font><font face="Verdana" size="-2">Justin Lovell . 3200A Yonge St . Toronto, Ontario . M4N 2L1<br>
.by appointment only.<br>
<br>p: 1.416.803.1101 e: infoatframediscreet.com<br>
<br><span><span class="style10">[Super 8MM Transfers] [</span></span><a href="http://www.justinlovell.com/Stuntman.htm">Stuntman</a>] [<a href="http://www.justinlovell.com/rageofsilence.htm">Rage of Silence</a>]<br>
<br><span>© Justin Lovell 2008</span><br>
</font></div><font face="Verdana" size="-2">
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-3281858-3";
urchinTracker();
</script></font></div></span>
</body>
</html> |
|
Straystudio
Joined: 14 Apr 2008
Posts: 238
Location: Nord Italy
|
| Posted: Mon May 12, 2008 10:03 pm |
|
|
|
The very first SCRIPT beeing there, has nothing to do with random image;
indeed, function MM_reloadPage(init) gets no command ever calling it to play; so, that script might be cut off.
Gallery is wholly handled by the SCRIPT following, where function swapPic() starting the process, gets triggered by two commands along the Document:
onLoad="swapPic()" with the BODY tag;
onClick="swapPic()" with <A> tag anchoring the <IMG NAME="randimg" SRC="" /> main field Element.
Since We'll expect diffents two as behaviours with them, now first thing to do is renaming the second one in the images DIV, since it will have to trigger something coded else (a function else); let's change it into swapPicOrd() while leaving all the others untouched; getting for the BODY part:
| Code: |
<body onload="swapPic()">
<div style="width: 900px; height: 400px" id="aboutLayer" class="aboutlayer"><a onclick="swapPicOrd();"><img
alt="" name="randimg" src="images/Telecine/home.jpg" align="left" border="1" hspace="3"></a>
</div>
</body>
</html>
|
Here, I have studied a further function for You, which won't <script></script> tags defining a new script; it does require to be placed in the same already existing SCRIPT instead, since both functions use same Array and Variable.
function swapPicOrd() {
var shown = useRand ++ +1
if (shown >= 27) {useRand = 0
}
document.randimg.src = images[shown].src;
}
Below I entered absolute URL with images, to testing purposes:
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=binary" />
<title>Frame Discreet - regular 8mm, super 16mm, super 8mm, film transfers to dvd toronto</title>
<style type="text/css">
<!--
body {
background-color: #3B3B3B;
}
div.aboutlayer{
position:absolute;
width:900px;
height: 400px;
overflow: off;
background-color: #6D6D6D;
visibility: inherit;
padding: 12px;
left: 13px;
top: 110px;
border: medium solid #000000;
}
-->
</style>
<script language="JavaScript">
<!--
var rand1 = 0;
var useRand = 0;
images = new Array;
images[1] = new Image();
images[1].src = "http://www.framediscreet.com/images/Telecine/home.jpg";
images[2] = new Image();
images[2].src = "http://www.framediscreet.com/images/Telecine/home2.jpg";
images[3] = new Image();
images[3].src = "http://www.framediscreet.com/images/Telecine/home3.jpg";
images[4] = new Image();
images[4].src = "http://www.framediscreet.com/images/Telecine/home4.jpg";
images[5] = new Image();
images[5].src = "http://www.framediscreet.com/images/Telecine/home5.jpg";
images[6] = new Image();
images[6].src = "http://www.framediscreet.com/images/Telecine/home6.jpg";
images[7] = new Image();
images[7].src = "http://www.framediscreet.com/images/Telecine/home7.jpg";
images[8] = new Image();
images[8].src = "http://www.framediscreet.com/images/Telecine/home8.jpg";
images[9] = new Image();
images[9].src = "http://www.framediscreet.com/images/Telecine/home9.jpg";
images[10] = new Image();
images[10].src = "http://www.framediscreet.com/images/Telecine/home10.jpg";
images[11] = new Image();
images[11].src = "http://www.framediscreet.com/images/Telecine/home11.jpg";
images[12] = new Image();
images[12].src = "http://www.framediscreet.com/images/Telecine/home12.jpg";
images[13] = new Image();
images[13].src = "http://www.framediscreet.com/images/Telecine/home13.jpg";
images[14] = new Image();
images[14].src = "http://www.framediscreet.com/images/Telecine/home14.jpg";
images[15] = new Image();
images[15].src = "http://www.framediscreet.com/images/Telecine/home15.jpg";
images[16] = new Image();
images[16].src = "http://www.framediscreet.com/images/Telecine/home16.jpg";
images[17] = new Image();
images[17].src = "http://www.framediscreet.com/images/Telecine/home17.jpg";
images[18] = new Image();
images[18].src = "http://www.framediscreet.com/images/Telecine/home18.jpg";
images[19] = new Image();
images[19].src = "http://www.framediscreet.com/images/Telecine/home19.jpg";
images[20] = new Image();
images[20].src = "http://www.framediscreet.com/images/Telecine/home20.jpg";
images[21] = new Image();
images[21].src = "http://www.framediscreet.com/images/Telecine/home21.jpg";
images[22] = new Image();
images[22].src = "http://www.framediscreet.com/images/Telecine/home22.jpg";
images[23] = new Image();
images[23].src = "http://www.framediscreet.com/images/Telecine/home23.jpg";
images[24] = new Image();
images[24].src = "http://www.framediscreet.com/images/Telecine/home24.jpg";
images[25] = new Image();
images[25].src = "http://www.framediscreet.com/images/Telecine/home25.jpg";
images[26] = new Image();
images[26].src = "http://www.framediscreet.com/images/Telecine/home26.jpg";
images[27] = new Image();
images[27].src = "http://www.framediscreet.com/images/Telecine/home27.jpg";
function swapPic() {
var imgnum = images.length - 1;
do {
var randnum = Math.random();
rand1 = Math.round((imgnum - 1) * randnum) + 1;
} while (rand1 == useRand);
useRand = rand1;
document.randimg.src = images[useRand].src;
}
function swapPicOrd() {
var shown = useRand ++ +1
if (shown >= 27) {useRand = 0
}
document.randimg.src = images[shown].src;
}
// -->
</script>
</head>
|
Basically, it already works as simplest form I have started from:
function swapPicOrd() {
document.randimg.src = images[useRand ++].src;
}
++ signs meaning increment-of-one-plus
yet, You so testing would meet a fault, since as soon as process arrives to the last pic, it simply stops working, as it not finding anything else forth-wards matching number 28 along the Array.
This is why I introduced if statement
function swapPicOrd() {
var shown = useRand ++ +1
if (shown >= 27) {useRand = 0
}
document.randimg.src = images[shown].src;
}
Be aware, You will have to adjust in the if statement, the number now beeing 27 whether pictures grow or diminish.
One minor fault was the starting click to be twice; useRand ++ +1 did the trick.
|
|
Straystudio
Joined: 14 Apr 2008
Posts: 238
Location: Nord Italy
|
| Posted: Tue May 13, 2008 5:07 am Browsing images buttons. |
|
|
|
| jusetan wrote: |
The other option would be to add two arrows to change the images by clicking on the arrows.
|
I would be just adding a button (or a link) to run back: anyone wishing to look again at an image beeing some positions back (maybe overtaken in error), will be no longer obliged to run all the round.
I.e., this inserted above the footer DIV with name and location (Justin Lovell . 3200A Yonge St . Toronto,):
| Code: |
<div style="position: absolute; width: ; z-index: ; left: -3px; top: 433px;">
<input type="button" value="back image" onclick="swapPicOrdBack();" style="background-color:#6D6D6D; color:#000000; font-weight: bold; border: medium solid #000000;" />
</div>
|
And a reversed pattern of my same function, still in the SCRIPT :
| Quote: |
function swapPicOrdBack() {
var shown = useRand -- -1
if (shown <= 0) {useRand = 28
}
document.randimg.src = images[shown].src;
}
|
|
|
jusetan
Joined: 03 May 2008
Posts: 2
|
| Posted: Tue May 13, 2008 7:14 am |
|
|
|
Fantastic!
Thanks, I have made the changes and it is much improved!
www.framediscreet.com
Just need to improve the way my 'samples' page interacts (don't really like my layout and the way the window opens up, would be nice to keep it all in one page, also having some trouble with the playback of clips, it is forcing the user to download the whole clip before it starts to play, so people usually give up before the clip starts to play).
Many thanks,
Justin |
|
Straystudio
Joined: 14 Apr 2008
Posts: 238
Location: Nord Italy
|
| Posted: Tue May 13, 2008 9:40 pm Customuzing multiple pop-ups |
|
|
|
| jusetan wrote: |
| 'samples' page interacts (don't really like my layout .. |
Basically, I would not be changing anything along the main layout, as it looks great with me; in thinking the arrows/button thing, indeed I was worried how to disturb it as less as possible.
As well as I beeing an half-photographer and film-age cameras-collector too, I appreciate very much Your jobs and the way You are traveling.
As for the samples page itself, instead yes the way the clips show wants to be improved.
I would keep the pop-up windows tool acting as a viewer; these kind of windows (pop-up called) are pulled out by JavaScript programming again.
A pop-up can be sized, it beeing customizable; I think this as good to be done, accordingly to the clip size (more sizes, I saw).
If left to do alone with no specific sizing, a pop-up can even open as a whole new Browser with every bar; depending on coding and on Browser records, a pop-up can still tend to open pretty large.
This is what is occurring now.
... depending on Browser setting: if You try doing a resizing on the (any) Browser window by dragging it with the cursor, then You re-enlarge it BY THE BUTTON, well the resizing has been recorded by the Browser and Your "free" pop-ups will open as large as it was.
This also recorded to future sessions.
So, how large the User gets the pop-up 'viewer' depends on User's last window-resizing done.
And this result can be different if User plays more Browser, as each one records own resizing had !!!
This is why someone running the Web can indeed beeing opening the same pop-up, yet one day with Netscape Navigator, one others with IExplorer, ever finding differences of size, never thinking which it has to do with.
Where it says features (it function is at the very bottom of the scripts all):
MM_reloadPage(true);
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
there can be entered settings, as well as they can be passed from the command to the script:
| Code: |
<a href="javascript:;" onclick="MM_openBrWindow('http://www.framediscreet.com/video/jessie_7218.mov','Image1')" class="style3"> Large</a>
|
Think there with the command, a couple else of ' ' after a comma, can find their room:
onclick="MM_openBrWindow('http://www.framediscreet.com/video/jessie_7218.mov', 'Image1', '')"
In within, such a string can be entered:
left=640, top=240, width=500, height=400
If You put them in the function directly in place of features, do not forget within ''
Currently, the player opens blurring everything; how better if shaping it as a smaller viewer integrating with the master-page layout somewhere?
left= and top= define for the somewhere, width= and height= are obvious;
to be said instead, they take value in pixel and pixel only, percentuage does not work.
Basically, such a JavaScript layout is designed to allow each Link to have its own sized pop-up opening.
They do occur more problems, though. (Pop-up Name)
- With all the pop-up named the same (Image1) as currently, the first pop-up You open, keeps the size to the next opening ones.
- Naming each one differently, Image1 Image2 Image3 ..., would be a way; yet, if anyone clicks on more Links too soon, gets more sounds playing together !!!
I'll be making a pattern Document to play studing with.
|
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
