Page 1 of 4 123 ... LastLast
Results 1 to 10 of 31

Thread: Double slideshow in a table or frames website

  1. #1
    Join Date
    Dec 2015
    Location
    Geneva Switzerland
    Posts
    31
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default Double slideshow in a table or frames website

    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
    Last edited by Beverleyh; 01-21-2016 at 01:12 PM.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. The Following User Says Thank You to Beverleyh For This Useful Post:

    pierruel (01-05-2016)

  4. #3
    Join Date
    Dec 2015
    Location
    Geneva Switzerland
    Posts
    31
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default Double slideshow in a table or frames websit

    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



    Quote Originally Posted by Beverleyh View Post
    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.

  5. #4
    Join Date
    Dec 2015
    Location
    Geneva Switzerland
    Posts
    31
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

    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

  6. #5
    Join Date
    Dec 2015
    Location
    Geneva Switzerland
    Posts
    31
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

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

    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

  7. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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
    Last edited by Beverleyh; 12-29-2015 at 05:26 PM.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  8. The Following 2 Users Say Thank You to Beverleyh For This Useful Post:

    pierruel (01-05-2016),Ripsaw (01-10-2016)

  9. #7
    Join Date
    Dec 2015
    Location
    Geneva Switzerland
    Posts
    31
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default Double slideshow in a table or frames website Reply to Thread

    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

  10. #8
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    LOL. I don't mind being a fairy as long as I have sparkly wings and a magic wand to summon-up Matthew McConaughey
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  11. #9
    Join Date
    Dec 2015
    Location
    Geneva Switzerland
    Posts
    31
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Beverleyh View Post
    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 filesName:  image2up_10.jpg
Views: 118
Size:  1.8 KB.
    Thank you again for your advices.
    HAve a nice day
    Best regards
    Pierre

    maliseuse2..xhtml :
    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>
    <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
    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>
    <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>

  12. #10
    Join Date
    Dec 2015
    Location
    Geneva Switzerland
    Posts
    31
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

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

Similar Threads

  1. Internet - Website Development - Dynamic Table
    By ramzo in forum Looking for such a script or service
    Replies: 1
    Last Post: 11-09-2008, 02:33 PM
  2. Frames Inside a Table?
    By holmedwa04 in forum HTML
    Replies: 6
    Last Post: 10-29-2008, 04:46 AM
  3. Left-Right Image Slideshow Script Double Loading
    By bkist in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 04-09-2008, 08:45 PM
  4. Ultimate Fade-In Slideshow (v1.5) changing images in other frames
    By inta in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 10-02-2006, 02:03 AM
  5. How to put in table frames
    By Druza in forum HTML
    Replies: 6
    Last Post: 10-16-2005, 04:58 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •