Double slideshow in a table or frames website

[pierruel]

I'm very interested by the following slideshow: http://www.javascriptkit.com/script/...entslide.shtml. My project is to have music staves (in .jpg format) appearing on the screen as follows:
one to three staves on the upper half of the screen (upper cell of a table or upper frame of a two-frames system, or another solution) and the same number of (the following) staves in the lower part. Then, when the 1 to 3 upper staves (let's say staves # 1 to 3) have been dispayed for a certain duration (to adjust by experience) and when I begin to play the 1 to 3 staves in the lower part (let's say the staves # 4 to 6), the upper staves are replaced by the staves (let's says staves # 7 to 9) which follow the ones I'm reading in the lower part, and so on.
I know that there are some similar systems on sale (or even free) on the web but almost all are designed for an (expensive)iPad (I've a Windows PC and there are Windows tablets at much reasonable prices, with less functionalities indeed but mine doesn't need to be much sophisticated, it needs only to display music and to be able to enlarge it (because of my low vision)
my question is: how could I adapt the above mentioned app knowing that I can code a bit of HTML but nothing at all in Javascript.
Thank you very much in advance for the necessary patch.
Kind regards
Pierre

[Beverleyh]

I'm not sure how that slideshow fits in but it's very old. You'd be better off using a more modern, robust script like this http://www.dynamicdrive.com/dynamici...nslideshow.htm

As for the layout, again we can't really comment or make suggestion on something we can't see. You would need to give us something to look at (HTML, CSS) to base our assessments on.

If you're asking how to approach the project build, here are some tips;

- use a div-based layout - preferably new HTML5 elements like, nav, header, aside, article, etc. - rather than frames or tables. If you don't know what HTML5 elements you can work with, hit Google.

- apps and websites are different things so make sure you know which one you want to create from the start. Assuming you mean a device-agnostic website, it's usually easier to build from a "mobile first" approach, so there's your next topic to research.

- building for a multitude of devices means that you should also have a solid understanding of "media queries", so look into those and how you can use them to manipulate layout.

- later you can tackle the JavaScript layer, but it might interest you to know that there are native media (<audio> and <video>) elements in HTML5 so you might not need it as much as you think. It depends what you want to do though.

In any case, we can't really advise you further until you give us *your code* so feel free to post back at various stages of your project with your code so far and we can make further suggestions.

Good luck with your project.

[pierruel]

Many thanks to you, Beverleyh, for your exhaustive answer. If my quoted slideshow is old, my knowledge in HTML are even much older and in Javascript near zero (and my command of English not very much better !). What I understand is that I have a lot of research before I can make a good use of your advices, except perhaps the tips. I'll be learning. Since it will take some time until I'll have something to give you to look at, I prefer not wait more before telling you Happy New Year !
Sincerely yours
Pierre

I'm not sure how that slideshow fits in but it's very old. You'd be better off using a more modern, robust script like this http://www.dynamicdrive.com/dynamici...nslideshow.htm

As for the layout, again we can't really comment or make suggestion on something we can't see. You would need to give us something to look at (HTML, CSS) to base our assessments on.

If you're asking how to approach the project build, here are some tips;

- use a div-based layout - preferably new HTML5 elements like, nav, header, aside, article, etc. - rather than frames or tables. If you don't know what HTML5 elements you can work with, hit Google.

- apps and websites are different things so make sure you know which one you want to create from the start. Assuming you mean a device-agnostic website, it's usually easier to build from a "mobile first" approach, so there's your next topic to research.

- building for a multitude of devices means that you should also have a solid understanding of "media queries", so look into those and how you can use them to manipulate layout.

- later you can tackle the JavaScript layer, but it might interest you to know that there are native media (<audio> and <video>) elements in HTML5 so you might not need it as much as you think. It depends what you want to do though.

In any case, we can't really advise you further until you give us *your code* so feel free to post back at various stages of your project with your code so far and we can make further suggestions.

Good luck with your project.

[pierruel]

Hello again,
I'm sorry but there is a foremost question. My choice of a website structure comes from my ( rather elementary) knowledge of HTML (I would have to upgrade to ver. 5). My project must fit into a windows operated tablet without connection to the web. From that point of view it's not a website. A wanted to use HTML to create a "framework" where I could insert a ready-to-use Javascript code. If it's not possible, I must abandon the idea of building my "thing" by myself and continue browsing the Internet until I find a convenient et unexpensive application.
As far as the fadeinslideshow.htm is concerned, it's functionalities are too sophisticated or not adapted (the fadind for instance) for my project.
Hence the foremost question is: shall I persist on the "do-it-myself" path (I'm too old to learn new developing languages) or not. Probably it's not a question to be asked on a Javascript forum !
Thank you anyhow.
Best regards
Pierre

[pierruel]

In addition to my last post concerning "Double slideshow on a website", here is my "vintage" code:

<?xml version="1.0" encoding="windows-1252"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Date de création: 28.12.2015 -->
<head> 
<script type="text/javascript">

var slideimages = new Array() // create new array to preload images
slideimages[1] = new Image()
slideimages[1].src = "image1.jpg"
slideimages[2] = new Image()
slideimages[2].src = "image2.jpg"
slideimages[3] = new Image() // create new instance of image object
slideimages[3].src = "image3.jpg" 
slideimages[4] = new Image()
slideimages[4].src = "image4.jpg"
slideimages[5] = new Image()
slideimages[5].src = "image5.jpg"
slideimages[6] = new Image() 
slideimages[6].src ="image6.jpg" 
slideimages[7] = new Image()
slideimages[7].src = "image7.jpg"
slideimages[8] = new Image()
slideimages[8].src = "image8.jpg" 
slideimages[9] = new Image() 
slideimages[9].src = "image9.jpg" 
slideimages[10] = new Image()
slideimages[10].src = "image10.jpg"
</script>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title></title>
</head>
<body> 

 <!--<img src="images_up/image1.jpg" border="0" width="1599" height="807" alt="" /> -->

<frameset rows="50%,*">
	<frame name="cadre_sup" bordercolor="#050000">
	<img src="image1.jpg" id="slide" width=900 height=300 />
	
	<script type="text/javascript">

//variable that will increment through the images
var step_up =0	 

function slideit_up(){
 //if browser does not sdownport the image object, exit.
 if (!document.images)
  return
 document.getElementById('slide').src = slideimages[step_up].src
 if (step_up<4)
  step_up++
 else
  step_up=0
 //call function "slideit()" every 2.5 seconds
 setTimeout("slideit_up()",2500)
}


</script>  
<!---------------------------------------->
	<frame name="cadre_inf" bordercolor="#050000">
	<img src="image6.jpg" id="slide" width=900 height=300 />
	
	<script type="text/javascript">

//variable that will increment through the images
var step_down=0

function slideit_down(){
 //if browser does not sdownport the image object, exit.
 if (!document.images)
  return
 document.getElementById('slide').src = slideimages[step_down].src
 if (step_down<6)
  step_down++
 else
  step_down=0
 //call function "slideit()" every 2.5 seconds
 setTimeout("slideit_down()",2500)
}

slideit_down()

</script>
<noframes>


</body>
</noframes>
</frameset>
</html>

I don't dare to upload 10 pictures. The first of each series (up and down) is charged correctly but they don't change as a slideshow.
Is there a fuiture for this kind of project?
MAny thanks
Regards
Pierre

[Beverleyh]

My project must fit into a windows operated tablet without connection to the web. From that point of view it's not a website

As long as you can connect to the website once, you can still create an HTML5 website that you can use offline later with AppCache. Here's some info on that http://www.sitepoint.com/creating-of...with-appcache/ basically, you include a manifest in the HTML that lists all the resources that must be downloaded and made available offline, so that the website continues to work without internet connectivity after the initial load.

Yes, you can create your HTML5 framework. Yes, you can include JavaScript and other resources that work as part of/in conjunction with your offline app/site. Yes, you can continue to do it yourself without any fancy software - you just need a web server/hosting space, a bit of HTML5/JavaScript know-how, and time to put it together.

As for your vintage slideshow code, it's a little outdated and the framesets are likely to cause issues in a modern environment. It looks like it's just incrementing through an image array and applying a slide effect? (Can't check as I'm on iPad) A more modern approach would be to include all the images (or placeholder divs) first off on the HTML, initially hide them with CSS, but then sequentially add a class that reveals them using modern CSS3 transition effects. As luck would have it, I have a few freebie scripts and blog posts that might help point you in the right direction;

- simple sweep-in scroller (demo shows multiple instances in one page - images can replace text) http://fofwebdesign.co.uk/template/_...s-scroller.php
And the blog post to support it http://www.dynamicdrive.com/forums/e...ller-(CSS3-JS)

- auto-play any content slider with controls and swipe support http://fofwebdesign.co.uk/freebies-f...h-js-swipe.htm
Blogs to support this script (and earlier versions); http://www.dynamicdrive.com/forums/e...t-Slider-demo) and http://www.dynamicdrive.com/forums/e...(JS-auto-play)

- cross-fade slideshow http://fofwebdesign.co.uk/template/_...ideshow-js.htm
And it's supporting blog http://www.dynamicdrive.com/forums/e...-Retina-Images

Hope that helps and good luck with your project

[pierruel]

Dear Beverleyh,
I seem as if I've met a good fairy in this end of year 2015
Many thanks. I'll be busy these days.
Fine end-of-the-year celebrations.
Pierre

[Beverleyh]

LOL. I don't mind being a fairy as long as I have sparkly wings and a magic wand to summon-up Matthew McConaughey

[pierruel]

LOL. I don't mind being a fairy as long as I have sparkly wings and a magic wand to summon-up Matthew McConaughey

Good morning ahyhow,
I've done two tests (with that old vintage code), the one (maliseuse2..xhtml = my [music]reader ver 2) where 5 country images appear in turn very well; the other (maliseuse2_rev..xhtml = the same but revised) where the images appear in a 2 cells (1 column) table but don't change.
(the double dot in the filenames are just typing errors).
I did already test with a table reusing twice the same scripts as they are, but without success; this time I used 2 series of scripts where variables and some other elements are ditinguished by adding "up" respectively "down" at the end. But of course since my knowledge in Javascript are neighbouring zero, I probably modified terms which are reserved words of Javascript and/or forgot to modify some others. I'm sorry to show you such an heavy coding but I hadn't time enough to improve until now!
If you think that the "table" solution is a bad one causing the failure of my project, I'll study the way of using <div> elements I never used for images. I join 2 tiny images (10% of their real size) in order that to have more complete files.
Thank you again for your advices.
HAve a nice day
Best regards
Pierre

maliseuse2..xhtml :

<?xml version="1.0" encoding="windows-1252"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Date de création: 28.12.2015 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title></title>	  
 <script language="JavaScript1.1">
<!--

/*
JavaScript Image slideshow:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!
*/

var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}

function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}

function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}

//-->
</script>
</head>	 

<body>
 <a href="javascript:gotoshow()"><img src="image1_9x3_10.jpg" name="slide" border=0 width=900 height=300></a>  




<script>
<!--

//configure the paths of the images, plus corresponding target links
slideshowimages("image1.jpg","image2.jpg","image3.jpg","image4.jpg","image5.jpg")
slideshowlinks("D:\2_M_E_S__P_R_O_J_E_T_S\Musique sur tablette\view?id=20010")

//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2000

var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()

//-->
</script>
<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>

</body>
</html>

maliseuse2_rev..xhtml

<?xml version="1.0" encoding="windows-1252"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Date de création: 28.12.2015 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title></title>	  
 <script language="JavaScript1.1">
<!--

/*
JavaScript Image slideshow:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!
*/

var slideimagesup=new Array()
var slidelinksup=new Array()
function slideshowimagesup(){
for (i=0;i<slideshowimagesup.arguments.length;i++){
slideimagesup[i]=new Image()
slideimagesup[i].src=slideshowimagesup.arguments[i]
}
}

function slideshowlinksup(){
for (i=0;i<slideshowlinksup.arguments.length;i++)
slidelinksup[i]=slideshowlinksup.arguments[i]
}

function gotoshowup(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinksup[whichlink])
else
winslide.location=slidelinksup[whichlink]
winslide.focus()
}
 
var slideimagesdown=new Array()
var slidelinksdown=new Array()
function slideshowimagesdown(){
for (i=0;i<slideshowimagesup.arguments.length;i++){
slideimagesdown[i]=new Image()
slideimagesdown[i].src=slideshowimagesdown.arguments[i]
}
}

function slideshowlinksdown(){
for (i=0;i<slideshowlinksdown.arguments.length;i++)
slidelinksdown[i]=slideshowlinksdown.arguments[i]
}

function gotoshowdown(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinksdown[whichlink])
else
winslide.location=slidelinksdown[whichlink]
winslide.focus()
}
//-->
</script>
</head>	 

<body>
<table border=0 summary="">
	<tr>
		<td><a href="javascript:gotoshowup()"><img src="image1_9x3.jpg" name="slideup" border=0 width=900 height=300></a>  




<script>
<!--

//configure the paths of the images, plus corresponding target links
slideshowimagesup("image1.jpg","image2.jpg","image3.jpg","image4.jpg","image5.jpg")
slideshowlinksup("D:\2_M_E_S__P_R_O_J_E_T_S\Musique sur tablette\view?id=20010")

//configure the speed of the slideshow, in miliseconds
var slideshowspeedup=2000

var whichlinkup=0
var whichimageup=0
function slideitup(){
if (!document.images)
return
document.images.slide.src=slideimagesup[whichimageup].src
whichlinkup=whichimageup
if (whichimageup<slideimagesup.length-1)
whichimageup++
else
whichimageup=0
setTimeout("slideitup()",slideshowspeedup)
}
slideitup()

//-->
</script></td>
	</tr>
	<tr>
		<td><a href="javascript:gotoshowdown()"><img src="image1_9x3.jpg" name="slidedown" border=0 width=900 height=300></a>  




<script>
<!--

//configure the paths of the images, plus corresponding target links
slideshowimagesdown("image1down.jpg","image2down.jpg","image3down.jpg","image4down.jpg","image5down.jpg")
slideshowlinksdown("D:\2_M_E_S__P_R_O_J_E_T_S\Musique sur tablette\view?id=20010")

//configure the speed of the slideshow, in miliseconds
var slideshowspeeddown=2000

var whichlinkdown=0
var whichimagedown=0
function slideitdown(){
if (!document.images)
return
document.images.slide.src=slideimagesdown[whichimagedown].src
whichlinkdown=whichimagedown
if (whichimagedown<slideimagesdown.length-1)
whichimageudown++
else
whichimagedown=0
setTimeout("slideitdown()",slideshowspeeddown)
}
slideitdown()
</script></td>
	</tr> 
	
</table>
<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>

</body>
</html>

[pierruel]

P.S. I adore your description of me: Junior coders" as I'm almost 82 years old ;o)
Regards
P.