Permlink Replies: 46 - Pages: 4 [ Previous | 1 2 3 4 | Next ] - Last Post: 9 Jul 20, 10:55 Last Post By: RobM
jimberry

Posts: 559
Registered: 30-Aug-2004
Re: Random Slide Show and Album Image Count
Posted: 17 Jul 08, 02:02   in response to: RobM in response to: RobM
  Click to reply to this thread Reply
RobM wrote:
.......... I hate using frames.
Using an "iframe" or "object" for Option 2 would get around most of the objections to "frames" (and, in this case, would be simpler, I believe).

Assuming your slideshow is in "slideshow/index.html", replace your code

<img src="2628169720_d9a84dfbdd.jpg" height="132" width="207" alt="" />
with
<object id="content" data="slideshow/index.html" height="132" width="207" name="content" type="text/html"> Data not included</object>


Edited by: jimberry on 17-Jul-2008 10:18
deuteronpsi

Posts: 2
Registered: 16-Jul-2008
Re: Random Slide Show and Album Image Count
Posted: 17 Jul 08, 04:35   in response to: RobM in response to: RobM
  Click to reply to this thread Reply
Thanks for the replies. i was able to get it working to the point that it loads the first image (although the image is WAY too big for the square that I want it to load in).

After 3 seconds when the pic is supposed to cycle to the next one, it displays page cannot be displayed and doesn't seem to reload again.

So, I am stuck and don't know where to go from here. I am not at all a webdesigner as you can see so I apologize if I am taking your time with trivial questions but I sincerely appreciate it.

Also, is there an easy way to reduce the image size to fit?

Thanks again.
jimberry

Posts: 559
Registered: 30-Aug-2004
Re: Random Slide Show and Album Image Count
Posted: 17 Jul 08, 06:07   in response to: deuteronpsi in response to: deuteronpsi
  Click to reply to this thread Reply
Changing the image size
You can use the Settings>Images>Image bounds to set the dimensions of the images to the same as the <object> dimensions.

Script not working
I am not sure how the random slide-show script is supposed to work, but this is what appears to be happening -
#1 - Your home page http://www.lra-soccer.com/ is loaded. This contains an <object> element which is set to load gallery/lra_random_image.html which is successfully loaded into the <object> element

#2 - The script then tries to load gallery/random_slide_show.html into the <object> element (to replace the gallery/lra_random_image.html page) and this is not found. If I try to load http://www.lra-soccer.com/gallery/random_slide_show.html itis not found.

Is the script supposed to be exchanging html pages or just the images?
jimberry

Posts: 559
Registered: 30-Aug-2004
Re: Random Slide Show and Album Image Count
Posted: 17 Jul 08, 06:09   in response to: jimberry in response to: jimberry
  Click to reply to this thread Reply
The page which is originally loaded successfully is called gallery/lra_random_image.html
The page that the script tries unsuccessfully to reload is called gallery/random_slide_show.html

I suspect that you might need to change the line near the end of the script
window.location = "random_slide_show.html";
to
window.location = "lra_random_image.html ";
RobM

Posts: 3,821
Registered: 4-Aug-2006
Re: Random Slide Show and Album Image Count
Posted: 17 Jul 08, 21:01   in response to: jimberry in response to: jimberry
  Click to reply to this thread Reply
The original intention for the script was to reload the page random_slide_show.html (that is reload itself after a short delay), the script picks a random image from the list using:
<body onload="setTimeout('getNext()',6000)">
Where the function getNext is defined in the randomimage.js file (made using the tool):
function getNext() {;
window.location = "random_slide_show.html";
};

If you are using a different file name or iFrames etc. then yes, changing the function definition would be required.
hitokage

Posts: 1
Registered: 22-Jul-2008
Re: Random Slide Show and Album Image Count
Posted: 27 Jan 10, 19:19   in response to: RobM in response to: RobM
  Click to reply to this thread Reply
RobM,

Can you explain how to install this for someone who hasn't used any .bsh files before? I downloaded all the files you have as I followed this link from your slideshow thread ( http://jalbum.net/forum/thread.jspa?threadID=33692&tstart=0 ) but I can't seem to figure out how to get this to actually work at all. If you could give me some helpful advice, I'd be grateful. I have the file, how do I make it so I can have just a very simple iframe (as simple as possible) on my site with the randomly changing images?

Thank you so much!
RobM

Posts: 3,821
Registered: 4-Aug-2006
Re: Random Slide Show and Album Image Count
Posted: 28 Jan 10, 01:22   in response to: hitokage in response to: hitokage
  Click to reply to this thread Reply
Attachment slide_show.html (603 bytes)
Attachment slide_show_image.html (301 bytes)
Hi. You need to install the the file named "Slide Show.bsh" in to the 'tools' directory of the JAlbum program directory. On a Mac you control click the application icon and choose 'Show Package Contents', then navigate to Resources/java/tools. I assume Windows has the folder structure in the same directory as the application.

Open Jalbum and set your 'Image' and 'Output' directories as you would to build your album. Then choose 'Tools', 'External Tools' and 'Slide Show' from the 'Tools' menu.
The slide_show.js file will be created in the output directory's 'res' directory (res/javascripts/slide_show.js).

Try using the Use the attached files, place them both in your output directory (at the same level as the 'res' directory.) slide_show.html is the page that contains the iFrame, and slide-show_image.html is the file loaded into the iFrame.

The code for the pages is:
slide_show.html
<htm>
	<head>
		<title>Slide Show</title>
		<link rel="stylesheet" type="text/css" href="res/common.css" />
		<link rel="stylesheet" type="text/css" href="res/styles.css" />
		<script type="text/javascript">
			<!--
				var iframeEl = document.getElementById('ifrm');
				var counter = 0;
			//-->
		</script>
	</head>
	<body>
		<!-- whatever you want as a header/banner -->
		<!-- your site navigation -->
		<iframe name="ifrm" id="ifrm" scrolling="yes" src="slide_show_image.html" >
			Sorry, your browser doesn't support iframes.
		</iframe>
		<!-- whatever you want as a footer -->
	</body>
</html>

Note: the line var iframeEl = document.getElementById('ifrm');
is not currently used but might be at some time in the future, so you can delete this line for now.

slide_show_image.html
<html>
	<head>
		<script src="res/javascripts/slideshow.js" type="text/javascript"></script>
	</head>
	<body>
		<script type="text/javascript">
			<!--
			setTimeout('getNext()',displayTime)
			document.write(slideshowContent);
			document.close();
			//-->
		</script>
	</body>
</html>

If you are only showing one image at a time you should not even need the code for the common.css (the css code has to be added to the common.css file (or created) for skin you are using.)
iframe#ifrm {
    width:${maxImageWidth}px; height:${maxImageHeight}px;
    border:none;
    }

If you are showing more than one image and you don't want scroll bars to show then may need to change the width/height (by a multiple of the number of images.) This can't be done from within the tool - unless a new css file is created and referenced by it (not something I have thought of doing yet.)

An example of the slide_show.js file that is generated by the tool is shown below:
var imagePath = new Array()
 
var thumbnailPage = new Array()
 
imagePath[0]="national_trust/slides/cornwall_0.jpg";
 
thumbnailPage[0]="national_trust/index.html";
 
imagePath[1]="national_trust/slides/cornwall_1.jpg";
 
thumbnailPage[1]="national_trust/index.html";
 
imagePath[2]="national_trust/slides/cornwall_2.jpg";
 
thumbnailPage[2]="national_trust/index.html";
 
imagePath[3]="national_trust/slides/cornwall_3.jpg";
 
thumbnailPage[3]="national_trust/index.html";
 
imagePath[4]="national_trust/slides/cornwall_4.jpg";
 
thumbnailPage[4]="national_trust/index.html";
 
imagePath[5]="national_trust/slides/cornwall_5.jpg";
 
thumbnailPage[5]="national_trust/index.html";
 
imagePath[6]="places/eden_centre/slides/cornwall_10.jpg";
 
thumbnailPage[6]="places/eden_centre/index.html";
 
imagePath[7]="places/eden_centre/slides/cornwall_11.jpg";
 
thumbnailPage[7]="places/eden_centre/index.html";
 
imagePath[8]="places/eden_centre/slides/cornwall_12.jpg";
 
thumbnailPage[8]="places/eden_centre/index.html";
 
imagePath[9]="places/eden_centre/slides/cornwall_4.jpg";
 
thumbnailPage[9]="places/eden_centre/index.html";
 
imagePath[10]="places/eden_centre/slides/cornwall_5.jpg";
 
thumbnailPage[10]="places/eden_centre/index.html";
 
imagePath[11]="places/eden_centre/slides/cornwall_6.jpg";
 
thumbnailPage[11]="places/eden_centre/index.html";
 
imagePath[12]="places/eden_centre/slides/cornwall_7.jpg";
 
thumbnailPage[12]="places/eden_centre/index.html";
 
imagePath[13]="places/eden_centre/slides/cornwall_8.jpg";
 
thumbnailPage[13]="places/eden_centre/index.html";
 
imagePath[14]="places/eden_centre/slides/cornwall_9.jpg";
 
thumbnailPage[14]="places/eden_centre/index.html";
 
imagePath[15]="places/wales/lake_bala/slides/lake_bala.jpg";
 
thumbnailPage[15]="places/wales/lake_bala/index.html";
 
imagePath[16]="places/wales/snowdon/slides/snowdon.jpg";
 
thumbnailPage[16]="places/wales/snowdon/index.html";
 
imagePath[17]="places/wales/swallow_falls/slides/dscf0278.jpg";
 
thumbnailPage[17]="places/wales/swallow_falls/index.html";
 
imagePath[18]="places/wales/swallow_falls/slides/dscf0284.jpg";
 
thumbnailPage[18]="places/wales/swallow_falls/index.html";
 
imagePath[19]="places/wales/swallow_falls/slides/dscf0287.jpg";
 
thumbnailPage[19]="places/wales/swallow_falls/index.html";
 
imagePath[20]="places/wales/swallow_falls/slides/dscf0289.jpg";
 
thumbnailPage[20]="places/wales/swallow_falls/index.html";
 
imagePath[21]="roche_rock/slides/cornwall_4a.jpg";
 
thumbnailPage[21]="roche_rock/index.html";
 
var displayTime = 5*1000;
 
 ImageCount = 22;
 
var numberOfImages = 1;
 
var slideshowContent = "Click on an image to see more like it<br/> ";		// string to build the html code for the images
 
for (var item=0; item <=numberOfImages-1; item++) {	// change <=0 to 1 less than the number of images required
 
	slideToShow = parseInt(parent.counter++);
 
	//reset counter at the end of the slideshow
 
	if (slideToShow == ImageCount-1) parent.counter="0";
 
	// generate the code to the image.
 
	slideshowContent += '<a href= "' + thumbnailPage[slideToShow] + '" target="top"><img src="' + imagePath[slideToShow] + '" /></a><br /> ';
 
slideshowContent += 'Image: ' + imagePath[slideToShow] + '<br />';
 
}
 
// this is the function to change the displayed image(s) by reloading the page
 
function getNext() {
 
	window.location = "slide_show_image.html";
 
};

ImageCount, gives the total number of images processed (or in you output album) plus 1 (as the array starts at 0).

If you are still having problems let me know, if not post a link to your slide show!
teknight

Posts: 5
Registered: 21-Apr-2010
Re: Random Slide Show and Album Image Count
Posted: 22 Apr 10, 05:50   in response to: RobM in response to: RobM
  Click to reply to this thread Reply
I know nothing about javascript, and I'm really having issues understanding your set of instructions from the Read me.txt file you attach with your .bsh. Especially where you say to modify the javascript code: "...in the same order and in the appropriate place on the page: A. A link to the generated javascript file (randomImage.js). <script src="res/javascripts/randomImage.js" type="text/javascript">
</script>
B. Add to the html body tag "onload="setTimeout('getNext()',6000)";" e.g. Note: You can adjust the slide show speed by changing 6000 (6 seconds) to another value if you want a faster/slower show. C. Optional, To generate the text to show the number of images in the slide show (or the album, if run at the root level). <script type="text/javascript">
<!--
document.write(ImageCount);
document.close();
//-->
</script>
D. The code below to run the random slide show javascript. <script type="text/javascript">
<!--
document.write(slideshowContent);
document.close();
//-->
</script>
" where do all these modifications go, exactly? Thank you for your help and patience.
RobM

Posts: 3,821
Registered: 4-Aug-2006
Re: Random Slide Show and Album Image Count
Posted: 22 Apr 10, 22:29   in response to: teknight in response to: teknight
  Click to reply to this thread Reply
Hi. This tool has now been replaced with two alternative options, both presented as Jalbum skins. The new options were done to try to make it easier to use, with less work required by the end user. I would suggest that you try one or both of these options, but if you still want to try this I'll add more information after I've shown you the alternatives. 1, Minimal Slide Show Skin Download and install this skin, leave the skin specific settings at the default to start with. Make an album with this and look at its Home Page, this is the 'slide show' all built and ready to go. It will show one slide image, played in order, every five seconds. 2. Slide Show Maker Skin Download and install this skin. Use Jalbum to make/update your album using your preferred skin. Now change the skin to 'Slide Show Maker', as soon as it is selected you will get a dialogue box with a range of options. For now just click 'OK' and it will build the 'slide show' for you. Go to your output's root directory and open the file 'slide_show.html', this page displays the slide show. All you need to do now is add a link from your 'Home Page' (index.html) to the 'slid_show.html' file. In both of the above the 'slide show' options are the same, the first by selecting the skin specific settings and the latter by changing settings in the dialogue box. You can set the time delay, number of images, use thumbnails or slide images etc. If you still want the image count (number of images in all sub-albums) then you will still need to add some code to the appropriate html page. For example, using the 'Minimal Slide Show' skin's 'slide_show.html' page. Open this page in a text editor and look for
<ul class="noindent">
<li><span class="locationNavBar">Menu</span></li>
<li style="list-style: none">
Now add the following after that line
 <script type="text/javascript">
        <!--
                document.write("[" + ImageCount + "]");
                document.close();
        //-->
</script>
 
If you want to add the same information to other pages you will also need to add a line before the code above
<script src="res/slideshow/slideshow.js" type="text/javascript">
</script>
Remember that the path to the 'res' directory will need to be correct (easier if modifying the skin you use). If neither of the above are easier then the following will hopefully help with the old (Random Slide Show) tool you are using. Make a simple test album using the 'Minimal' skin, it will give you a root index page (index.html) similar to this code
     </li>
</ul>
<center>
<table>
<tr>
<td width="140" valign="bottom"><a href="places/index.html"><img class="image" src="places/niagara_falls_6.jpg" width="140" height="93" border="0" alt="places"><br>
</a></td>
<td width="140" valign="bottom"><a href="nature/index.html"><img class="image" src="nature//dscf0851.jpg" width="140" height="104" border="0" alt="nature"><br>
</a></td>
<td width="140" valign="bottom"><a href="people/index.html"><img class="image" src="people/2nd_generation/thumbs/18.jpg" width="60" height="105" border="0" alt="people"><br>
</a></td>
</tr>
</table>
<p><a href="http://jalbum.net" target="_blank"><small>Jalbum 8.7</small></a></p>
</center>
Now duplicate this file and rename the copy to 'random_slide_show.html' and open it in a text editor. Just before the tag add this line
<script src="res/javascripts/randomImage.js" type="text/javascript">
</script>
Replace the tag with Replace all of the code between the and with the following code
<script type="text/javascript">
        <!--
                document.write(ImageCount);
                </script>
document.write(slideshowContent); document.close(); //-->  
Open the original 'index.html' page and add the following just after the tag
<p><a href="random_slide_show.html"><small>Play Slide Show</small></a></p>
Finally, run the 'Random Slide Show Tool' and then open the index page and click on the link 'Play Slide Show'. If you are still having problems let me know. Oh, by the way both of the new methods have demo pages that you can look at and see how those pages are actually made up. If you get it working let me know too! (Sorry if this is a bit long of a winded reply)
teknight

Posts: 5
Registered: 21-Apr-2010
Re: Random Slide Show and Album Image Count
Posted: 23 Apr 10, 00:22   in response to: RobM in response to: RobM
  Click to reply to this thread Reply
Let me start by apologizing: I wasn't clear as to what I wanted. I'm trying to create a website for a photographer. I would like to have something similar to the compact skin exist on the index page, an example of which you can find below. I would like to get the pictures on this index page to rotate randomly.
http://129.1.26.15/users/mis405spr10/rsuciu/omfoto/Copy%20of%20index/index2.cfm. The code for the page looks like this:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="res/common.css" rel="stylesheet" type="text/css" />
<link href="res/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="res/jquery.min.js"></script>
<!---Code below handles pictures--->
<script type="text/javascript">
//<![CDATA[
var parentIndexPage='';
var resPath='res';
var relPath='';
var maxImageHeight=540;
var captionsOn=false;
var thumbsOn=false;
var folders=new Array(
 
);
var images=new Array(
	{file:'slides/beach-toes-648.jpg',video:false,thumb:'thumbs/beach-toes-648.jpg',rel:0,width:'648',height:'486',title:'',comment:'',link:'',date:'4/22/10 2:54 PM',size:'91 kB'},
	{file:'slides/bee-flower-648.jpg',video:false,thumb:'thumbs/bee-flower-648.jpg',rel:1,width:'648',height:'486',title:'',comment:'',link:'',date:'4/22/10 2:54 PM',size:'68 kB'},
	{file:'slides/girl-music-648.jpg',video:false,thumb:'thumbs/girl-music-648.jpg',rel:2,width:'648',height:'486',title:'',comment:'',link:'',date:'4/22/10 2:54 PM',size:'54 kB'}
);
var text={atLastPage:'At last page',atLastPageQuestion:'Where to go next?',startOver:'Start over',up:'Up one level',stop:'Stop',upgradeBrowser:'Upgrade your browser!',upgradeBrowserExplain:'You are using and outdated version of Internet Explorer, which cannot properly display this album.',contin:'Continue',download:'Download',original:'Original',showExif:'Display photograpic (Exif/Iptc) data',photoData:'Photo data'};
//]]></script>
<script type="text/javascript" src="res/skin.js"></script>
</head>
 
<body>
<cfinclude template="indexheader.cfm">
<!---images go below--->
<div id="images">
<ul><li> </li><li> </li><li> </li></ul>
</div>
<div id="prev"><a href="javascript:void(0)" title="Previous picture" class="showhint"> </a></div>
<div id="next"><a href="javascript:void(0)" title="Next picture" class="showhint"> </a></div>
</body>
</html>

To get the code above, I modified a standard index.html created by jalbum, obviously by removing the elements I wasn't looking for. Everything else that jalbum created (the .res folder, etc) is still there. Now, what would I have to do to this code, to this page, to get the pictures to randomly rotate?

I wouldn't be asking for so much detail, but I really do not know javascript.

Thank you for your time and patience,
Remus
RobM

Posts: 3,821
Registered: 4-Aug-2006
Re: Random Slide Show and Album Image Count
Posted: 23 Apr 10, 02:12   in response to: teknight in response to: teknight
  Click to reply to this thread Reply
In the existing output 'res' directory create an empty directory called 'javascripts'. Edit the 'Random Slide Show Tool' file (Random Slide Show.bsh) by searching for
random_slide_show
and replacing it with
index
. There is only one instance, so it will be right. Run the slide show tool. Edit the 'root' index.html file by adding another link in the header tags (add the second line, after the existing code displayed to show where to add it)
<script type="text/javascript" src="res/jquery.min.js">
</script>
<script src="res/javascripts/library.js" type="text/javascript">
</script>
Change the body tag to
<body  onload="setTimeout('getNext()',6000)">

Replace the code between the
<div id="images"></div>
tags with
 <script type="text/javascript">
        <!--
        document.write(slideshowContent);
        document.close();
        //-->
</script>
Open the modified index.html page and see if it works. You might be better of though trying a skin that has built-in slide shows, and possibly modifying the page to make it look more how you want it to. Either way, give the above a go and let me know if it works or not - if not I'll try to help get it to work if you can give me information on what happens when you try the above. Good luck.

Edited by: RobM on 23-Apr-2010 01:13
teknight

Posts: 5
Registered: 21-Apr-2010
Re: Random Slide Show and Album Image Count
Posted: 23 Apr 10, 02:52   in response to: RobM in response to: RobM
  Click to reply to this thread Reply
Hi, I've just tried this, using the turtle skin. I hadn't realized it had a slideshow option. In order: 1. I created the javascripts directory within res 2. I edited the bsh file by replacing random_slide_slow with index. 3. I ran the slideshow tool. It created randomImage.js in the javascripts directory this is what i did with the contents of the index.html:
  
<!-- saved from url=(0014)about:internet -->
  
<!--[if lte IE 6]><link href="res/ie6fix.css" rel="stylesheet" type="text/css" /><![endif]-->
 
<script type="text/javascript" src="res/jquery.min.js"></script>
<script type="text/javascript" src="res/javascripts/randomImage.js"></script>
<script type="text/javascript">
//<![CDATA[
var level=0;
var uplink='../';
var resPath='res';
var relPath='';
var slideshowDelay=4000;
var newDays=0;
var captionsOn=false;
var thumbsOn=false;
var fitImages=false;
var images=new Array(
        {file:'slides/Forest Flowers.jpg',video:false,thumb:'thumbs/Forest Flowers.jpg',title:'',comment:'',link:'',date:'4/26/05 4:50 PM',mod:'13454',size:'125 kB',width:'800',height:'600'},
        {file:'slides/Frangipani Flowers.jpg',video:false,thumb:'thumbs/Frangipani Flowers.jpg',title:'',comment:'',link:'',date:'',mod:'13454',size:'105 kB',width:'800',height:'600'},
        {file:'slides/Garden.jpg',video:false,thumb:'thumbs/Garden.jpg',title:'',comment:'',link:'',date:'',mod:'13454',size:'504 kB',width:'800',height:'600'},
        {file:'slides/Green Sea Turtle.jpg',video:false,thumb:'thumbs/Green Sea Turtle.jpg',title:'',comment:'',link:'',date:'5/10/05 10:45 AM',mod:'13454',size:'369 kB',width:'800',height:'600'},
        {file:'slides/Humpback Whale.jpg',video:false,thumb:'thumbs/Humpback Whale.jpg',title:'',comment:'',link:'',date:'11/30/05 1:20 PM',mod:'13454',size:'256 kB',width:'800',height:'600'},
        {file:'slides/Oryx Antelope.jpg',video:false,thumb:'thumbs/Oryx Antelope.jpg',title:'',comment:'',link:'',date:'4/22/05 5:20 PM',mod:'13454',size:'290 kB',width:'800',height:'600'},
        {file:'slides/Toco Toucan.jpg',video:false,thumb:'thumbs/Toco Toucan.jpg',title:'',comment:'',link:'',date:'6/24/05 12:22 PM',mod:'13454',size:'112 kB',width:'800',height:'600'},
        {file:'slides/Tree.jpg',video:false,thumb:'thumbs/Tree.jpg',title:'',comment:'',link:'',date:'9/3/05 6:40 PM',mod:'13454',size:'751 kB',width:'800',height:'600'},
        {file:'slides/Walle 1.jpg',video:false,thumb:'thumbs/Walle 1.jpg',title:'',comment:'',link:'',date:'5/3/08 9:53 PM',mod:'14003',size:'18 kB',width:'428',height:'276'},
        {file:'slides/Waterfall.jpg',video:false,thumb:'thumbs/Waterfall.jpg',title:'',comment:'',link:'',date:'5/27/05 8:15 AM',mod:'13454',size:'280 kB',width:'800',height:'600'},
        {file:'slides/Winter Leaves.jpg',video:false,thumb:'thumbs/Winter Leaves.jpg',title:'',comment:'',link:'',date:'1/17/05 6:43 AM',mod:'13454',size:'206 kB',width:'800',height:'600'}
);
 
var audio='';
 
var mapType='Map';
var mapZoom=18;
var text={atLastPage:'At last page',atLastPageQuestion:'Where to go next?',startOver:'Start over',up:'Up one level',stop:'Stop',upgradeBrowser:'Upgrade your browser!',upgradeBrowserExplain:'You are using and outdated version of Internet Explorer, which cannot properly display this album.',contin:'Continue',download:'Download',original:'Original',showExif:'Display photograpic (Exif/Iptc) data',photoData:'Photo data',showLocation:'Show the location on map',map:'Map',noGPS:'No GPS data found',buyThis:'Buy this item',notForSale:'Not for sale.'};
//]]>
</script>
<script type="text/javascript" src="res/jquery.min.js"></script>
<script src="res/javascripts/library.js" type="text/javascript"></script>
<div id="splash">
<div id="header">
<div id="title">
<div id="parent">
        <a href="../" title="Up one level" class="showhint"> </a>
</div>
<h1>trial and error</h1>
</div>
<div id="startbtn"> </div>
<div id="starttext">Start slideshow</div>
</div>
<div id="galleries">
<div id="gallerycnt">
<div id="grid">
<ul class="thmb">
<li>
            <a href=""> </a>
</li>
<li>
            <a href=""> </a>
</li>
<li>
            <a href=""> </a>
</li>
<li>
            <a href=""> </a>
</li>
<li>
            <a href=""> </a>
</li>
<li>
            <a href=""> </a>
</li>
<li>
            <a href=""> </a>
</li>
<li>
            <a href=""> </a>
</li>
<li>
            <a href=""> </a>
</li>
<li>
            <a href=""> </a>
</li>
<li>
            <a href=""> </a>
</li>
</ul>
</div>
</div>
</div>
<div id="footer">11 images  &middot;  Album by 
  <a href="http://jalbum.net" title="Jalbum, freeware album generator, v8.7.2" class="showhint">Jalbum</a> &amp; 
  <a href="http://lazaworx.com" title="Skin: Turtle Black, v1.0" class="showhint">Turtle</a>  &middot;  
  <a href="javascript:void(0)" class="showhelp">Help</a></div>
</div>
<div id="images">
<script type="text/javascript">
        <!--
        document.write(slideshowContent);
        document.close();
        //-->
  </script>
</div>
<div id="controls">
<ul class="showhint">
<li id="prev" title="Previous picture"> </li>
<li id="up" title="Back to splash page"> </li>
<li id="noresize" title="1:1 size"> </li>
<li id="resize" title="Fit to screen"> </li>
<li id="info" title="Show caption / info"> </li>
<li id="noinfo" title="Hide caption / info"> </li>
<li id="index" title="Show thumbnails"> </li>
<li id="noindex" title="Hide thumbnails"> </li>
<li id="play" title="Start autoplay"> </li>
<li id="pause" title="Stop autoplay"> </li>
<li id="next" title="Next picture"> </li>
</ul>
</div>
<div id="help">
<div class="window" id="helpsplash">
<div class="close">
      <a href="javascript:void(0)" title="Close window" class="showhint"> </a>
</div>
<h2>Splash page</h2>
<ol>
<li>
<b>Up</b> one level 
<em>Up arrow</em></li>
<li>Start 
<b>slideshow</b> 
<em>Numpad *</em> 
<em>Space</em></li>
<li>Subalbums and thumbnails (if exists)</li>
</ol>
<p>Press 
<b>F1</b> at any time to get help!</p>
</div>
<div class="window" id="helpimage">
<div class="close">
      <a href="javascript:void(0)" title="Close window" class="showhint"> </a>
</div>
<h2>Image page</h2>
<ol>
<li>Thumbnail navigation window</li>
<li>
<b>Previous</b> picture 
<em>Left arrow</em></li>
<li>$text.help.backtoSplash</li>
<li>Toggle 
<b>fit to screen</b> or 
<b>1:1</b> size 
<em>Numpad +</em></li>
<li>Show/hide 
<b>captions</b> and other info 
<em>Numpad -</em></li>
<li>Show/hide 
<b>thumbnails</b> 
<em>Numpad -</em></li>
<li>Start/stop 
<b>slideshow</b> 
<em>Numpad *</em> 
<em>Space</em></li>
<li>
<b>Next</b> picture 
<em>Right arrow</em></li>
<li>
<b>Double click the image</b> to switch between 
<b>fit to window</b> or 
<b>1:1</b> magnification. You can also 
<b>drag and move</b> if larger than the screen.</li>
<li>
<b>Information window</b>: caption, photo data, map, shopping cart, etc.</li>
</ol>
</div>
</div>
<div id="jalbumwidgetcontainer"></div>
<script type="text/javascript" charset="utf-8">
<!--//--><![CDATA[//><!--
_jaSkin = "Turtle";
_jaStyle = "Black.css";
_jaVersion = "8.7.2";
_jaLanguage = "en";
_jaPageType = "index";
_jaRootPath = ".";
_jaUserName = "teknight";
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://jalbum.net/widgetapi/load.js";
document.getElementById("jalbumwidgetcontainer").appendChild(script);
//--><!]]>
</script>
Unless I've messed something up, the end result looks like the original index file, except that where there are supposed to be the thumbnail images, all I get are bars showing that the thumbnails are loading.... Again, thank you for your patience, R
RobM

Posts: 3,821
Registered: 4-Aug-2006
Re: Random Slide Show and Album Image Count
Posted: 23 Apr 10, 23:34   in response to: teknight in response to: teknight
  Click to reply to this thread Reply
Attachment Picture 1.jpg (190.0 KB)
I assume that you still have the
<html><head>...</head>
blocks at the start of the document. What you seem to have missed out is the
<body onload="setTimeout('getNext()',6000)">
as I can't see any body tags in your code. It should go just after the
</head>
tag. As you have used the 'Turtle' skin, the code is different to the previous examples and so a further change is needed. You added the slideshow content code as below
<a href="#" class="showhelp">Help</a>  
<div id="images">
<script type="text/javascript">
<!--
       document.write(slideshowContent);
       document.close();
       //-->
  </script>
</div>
<div id="controls">
Instead try adding it in the following position instead (note the id="images" has been removed from the opening div tag)
<h1>trial and error</h1></div>
<div>
<script type="text/javascript">
<!--
       document.write(slideshowContent);
       document.close();
       //-->
</script> 
So it goes just after the end div tag after the h1 tags for your title 'trial and error'. Add the closing end div tag just before the
<div id="jalbumwidgetcontainer"></div>
I've done the above on a test site, using the default settings for the 'Turtle' skin, see attached screen shot (you'd need to adjust some of the css code to pretty it up!) The actual index page code I used is below:
   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="$language" xml:lang="$language">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- saved from url=(0014)about:internet -->
<head>
<title>test</title>
<link href="res/common.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]><link href="res/ie6fix.css" rel="stylesheet" type="text/css" /><![endif]-->
<link href="res/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="res/jquery.min.js"></script>
<script type="text/javascript" src="res/javascripts/randomImage.js"></script>
<script type="text/javascript">//<![CDATA[
var level=0;
var uplink='../';
var resPath='res';
var relPath='';
var slideshowDelay=4000;
var newDays=0;
var captionsOn=false;
var thumbsOn=false;
var fitImages=false;
var images=new Array(
 
);
 
var audio='';
 
var mapType='Map';
var mapZoom=18;
var text={atLastPage:'At last page',atLastPageQuestion:'Where to go next?',startOver:'Start over',up:'Up one level',stop:'Stop',upgradeBrowser:'Upgrade your browser!',upgradeBrowserExplain:'You are using and outdated version of Internet Explorer, which cannot properly display this album.',contin:'Continue',download:'Download',original:'Original',showExif:'Display photograpic (Exif/Iptc) data',photoData:'Photo data',showLocation:'Show the location on map',map:'Map',noGPS:'No GPS data found',buyThis:'Buy this item',notForSale:'Not for sale.'};
//]]></script>
<script type="text/javascript" src="res/swfobject.js"></script>
<script type="text/javascript" src="res/skin.js"></script>
 
<link rel="alternate" href="album.rss" type="application/rss+xml"/>
</head>
<body onload="setTimeout('getNext()',6000)">
<div id="splash">
<div id="header">
<div id="title">
<div id="parent"><a href="../" title="Up one level" class="showhint"> </a></div>
 
<h1>test</h1>
 
</div>
<div>
<script type="text/javascript">
<!--
       document.write(slideshowContent);
       document.close();
       //-->
</script>
 
</div>
<div id="galleries"><div id="gallerycnt">
			<table border="0" cellspacing="0" cellpadding="0">
			<tr><td class="folder"><div class="thumb"><a href="people/index.html"><img src="people/friends/celestica/thumbs/dcp_0746.jpg"/></a></div><div class="data"><h4><a href="people/index.html">people</a></h4><p class="galleryinfo">39 images</p></div><div class="clear"></div></td><td width="20"></td><td class="folder"><div class="thumb"><a href="nature/index.html"><img src="nature/fauna/thumbs/dscf0851.jpg"/></a></div><div class="data"><h4><a href="nature/index.html">nature</a></h4><p class="galleryinfo">46 images</p></div><div class="clear"></div></td></tr>
<tr><td colspan="2" height="20"></td></tr><tr><td class="folder"><div class="thumb"><a href="places/index.html"><img src="places/canada/niagara_falls/thumbs/niagara_falls_6.jpg"/></a></div><div class="data"><h4><a href="places/index.html">places</a></h4><p class="galleryinfo">212 images</p></div><div class="clear"></div></td></table>
 
</div></div>
<div id="footer">297 images  &middot;  Album by <a href="http://jalbum.net" title="Jalbum, freeware album generator, v8.7.2" class="showhint">Jalbum</a> &amp; <a href="http://lazaworx.com" title="Skin: Turtle White, v1.0" class="showhint">Turtle</a>  &middot;  <a href="javascript:void(0)" class="showhelp">Help</a></div>
</div>
 
<div id="help">
<div class="window" id="helpsplash"><div class="close"><a href="javascript:void(0)" title="Close window" class="showhint"> </a></div><h2>Splash page</h2>
<ol><li><b>Up</b> one level <em>Up arrow</em></li><li>Start <b>slideshow</b> <em>Numpad *</em> <em>Space</em></li><li>Subalbums and thumbnails (if exists)</li></ol><p>Press <b>F1</b> at any time to get help!</p></div>
<div class="window" id="helpimage"><div class="close"><a href="javascript:void(0)" title="Close window" class="showhint"> </a></div><h2>Image page</h2>
<ol><li>Thumbnail navigation window</li><li><b>Previous</b> picture <em>Left arrow</em></li><li>$text.help.backtoSplash</li><li>Toggle <b>fit to screen</b> or <b>1:1</b> size <em>Numpad +</em></li><li>Show/hide <b>captions</b> and other info <em>Numpad -</em></li><li>Show/hide <b>thumbnails</b> <em>Numpad -</em></li><li>Start/stop <b>slideshow</b> <em>Numpad *</em> <em>Space</em></li><li><b>Next</b> picture <em>Right arrow</em></li><li><b>Double click the image</b> to switch between <b>fit to window</b> or <b>1:1</b> magnification. You can also <b>drag and move</b> if larger than the screen.</li><li><b>Information window</b>: caption, photo data, map, shopping cart, etc.</li></ol></div>
</div>
</div>
<div id="jalbumwidgetcontainer"></div>
<script type="text/javascript" charset="utf-8"><!--//--><![CDATA[//><!--
_jaSkin = "Turtle";
_jaStyle = "White.css";
_jaVersion = "8.7.2";
_jaLanguage = "en";
_jaPageType = "index";
_jaRootPath = ".";
_jaUserName = "RobM";
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://jalbum.net/widgetapi/load.js";
document.getElementById("jalbumwidgetcontainer").appendChild(script);
//--><!]]></script>
</body>
</html>
It works but it's not pretty. If you need help editing the css/html code you should really post any questions in the Turtle Skin Forum as I'm not familiar with its code. And remember, that to prevent having to manually make these changes after each update you would be better modifying the skins index.htt file. I hope this gets you most of the way to what you actually want though. Rob

Edited by: RobM on 23-Apr-2010 22:35

Edited by: RobM on 23-Apr-2010 22:39
teknight

Posts: 5
Registered: 21-Apr-2010
Re: Random Slide Show and Album Image Count
Posted: 24 Apr 10, 18:37   in response to: RobM in response to: RobM
  Click to reply to this thread Reply
Attachment example impage.jpg (18.0 KB)
First of all, thank you for your patience and being so explicit. The more I look at th code, the more it makes sense, but it's still not fully working. Here's what I've done: I created a new album (turtle skin). I modified the randomslideshow tool by changing the link to index.html. I created the javascripts folder, then I ran the randomslideshow tool. You can see below how I modified the index.html file....basically I got it to where it's exactly like the code you provided, but I took out the links at the bottom. It works!!!...sort of: as you can see from the attached image, it's calling up the wrong files. Instead of calling up slides/picturefile.jpg it's calling up slidespicturefile.jpg. Just to test things, I copied the pictures out of the slides directory into the main album directory, where the index file is and I changed their names by adding slides in front of each name: i.e. slidespicturename.jpg. It's now finding the files. Where is the code generated that tells the page where to get the images from?
   
<!-- saved from url=(0014)about:internet -->
   
<!--[if lte IE 6]><link href="res/ie6fix.css" rel="stylesheet" type="text/css" /><![endif]-->
 
<script type="text/javascript" src="res/jquery.min.js"></script>
<script type="text/javascript" src="res/javascripts/randomImage.js"></script>
<script type="text/javascript">
//<![CDATA[
var level=0;
var uplink='../';
var resPath='res';
var relPath='';
var slideshowDelay=2000;
var newDays=0;
var captionsOn=false;
var thumbsOn=false;
var fitImages=false;
var images=new Array(
);
 
var audio='';
 
var mapType='Map';
var mapZoom=18;
var text={atLastPage:'At last page',atLastPageQuestion:'Where to go next?',startOver:'Start over',up:'Up one level',stop:'Stop',upgradeBrowser:'Upgrade your browser!',upgradeBrowserExplain:'You are using and outdated version of Internet Explorer, which cannot properly display this album.',contin:'Continue',download:'Download',original:'Original',showExif:'Display photograpic (Exif/Iptc) data',photoData:'Photo data',showLocation:'Show the location on map',map:'Map',noGPS:'No GPS data found',buyThis:'Buy this item',notForSale:'Not for sale.'};
//]]>
</script>
<script type="text/javascript" src="res/swfobject.js"></script>
<script type="text/javascript" src="res/skin.js"></script>
<div id="splash">
<div id="header">
<div id="title">
<div id="parent">
        <a href="../" title="Up one level" class="showhint"></a>
</div>
<h1>Windows Standard</h1>
</div>
<div>
<script type="text/javascript">
<!--
       document.write(slideshowContent);
       document.close();
       //-->
      </script>
</div>
<div id="startbtn"> </div>
<div id="starttext">Start slideshow</div>
</div>
<div id="footer">297 images &middot; Album by 
  <a href="http://jalbum.net" title="Jalbum, freeware album generator, v8.7.2" class="showhint">Jalbum</a> &amp; 
  <a href="http://lazaworx.com" title="Skin: Turtle White, v1.0" class="showhint">Turtle</a> &middot; 
  <a href="#" class="showhelp">Help</a></div>
</div>
<div id="help">
<div class="window" id="helpsplash">
<div class="close">
      <a href="#" title="Close window" class="showhint"></a>
</div>
<h2>Splash page</h2>
<ol>
<li>
<b>Up</b> one level 
<em>Up arrow</em></li>
<li>Start 
<b>slideshow</b> 
<em>Numpad *</em> 
<em>Space</em></li>
<li>Subalbums and thumbnails (if exists)</li>
</ol>
<p>Press 
<b>F1</b> at any time to get help!</p>
</div>
<div class="window" id="helpimage">
<div class="close">
      <a href="#" title="Close window" class="showhint"></a>
</div>
<h2>Image page</h2>
<ol>
<li>Thumbnail navigation window</li>
<li>
<b>Previous</b> picture 
<em>Left arrow</em></li>
<li>$text.help.backtoSplash</li>
<li>Toggle 
<b>fit to screen</b> or 
<b>1:1</b> size 
<em>Numpad +</em></li>
<li>Show/hide 
<b>captions</b> and other info 
<em>Numpad -</em></li>
<li>Show/hide 
<b>thumbnails</b> 
<em>Numpad -</em></li>
<li>Start/stop 
<b>slideshow</b> 
<em>Numpad *</em> 
<em>Space</em></li>
<li>
<b>Next</b> picture 
<em>Right arrow</em></li>
<li>
<b>Double click the image</b> to switch between 
<b>fit to window</b> or 
<b>1:1</b> magnification. You can also 
<b>drag and move</b> if larger than the screen.</li>
<li>
<b>Information window</b>: caption, photo data, map, shopping cart, etc.</li>
</ol>
</div>
</div>
<div id="jalbumwidgetcontainer"></div>
<script type="text/javascript" charset="utf-8">
<!--//--><![CDATA[//><!--
_jaSkin = "Turtle";
_jaStyle = "White.css";
_jaVersion = "8.7.2";
_jaLanguage = "en";
_jaPageType = "index";
_jaRootPath = ".";
_jaUserName = "RobM";
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://jalbum.net/widgetapi/load.js";
document.getElementById("jalbumwidgetcontainer").appendChild(script);
//--><!]]>
</script>
Once again, thanks alot for your support.
teknight

Posts: 5
Registered: 21-Apr-2010
Re: Random Slide Show and Album Image Count
Posted: 24 Apr 10, 18:54   in response to: RobM in response to: RobM
  Click to reply to this thread Reply
I just figured out the problem:
I am using Windows. for whatever reason, the randomImage.js file contains "\" for the links to the image addresses, but it should contain "/"s. I've changed it and it now works.
I'm guessing the .bsh file needs to be changed, but where is the change supposed to take place?

Thank you very much for your help,
Remus
Legend
Forum admins
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums