Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    opening slideshow in another page

    Hi!
    I´m having problem with this slideshow I wanna do. I´m a beginner and don´t really know how to do, when I want to check the small pictures, and then open a bigger version of them in another page.

    I could really need some help, I´m very comfused...
    This is how my code looks like.
    Thank you!

    Code:
    <!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>Uppgift 6</title>
    <link rel="stylesheet" type="text/css" href="style6.css" />
        <script type="text/javascript">
        var picIx;
        var windowSmall = null;
        var xpicBig = new Array();
                xpicBig[0] = "butterfly";
                xpicBig[1] = "boats";
                xpicBig[2] = "church";
                xpicBig[3] = "flower";
                xpicBig[4] = "glass";           
                
        var xpic = new Array();
                xpic[0] = "butterfly_small";
                xpic[1] = "boats_small";
                xpic[2] = "church_small";
                xpic[3] = "flower_small";
                xpic[4] = "glass_small";
           
            function showPict(show,nr){
                var imgText = document["image" + nr].alt;
                document.getElementById("picText" + nr).innerHTML = imgText;            
                
                if(show)
                document.getElementById("BigPic"+nr).style.visibility = "visible";
                else
                document.getElementById("BigPic"+nr).style.visibility = "hidden";
                 
                
                box[picIx].style.zIndex = 10;
                var z = 9;
                    for (var i=picIx+1; i<box.length; i++){
                        box[i].style.zIndex = z;
                    }
                z = 9;
                    for (var i=picIx+1; i<box.length; i++){
                    box[i].style.zIndex = z;
                        z = z - 1;
                    }
            }
            
            function init(){
                box =  document.getElementsByName("popup")
                    for (var i=0; i<box.length; i++){
                    box[i].style.left = 5*i+"px";
                    }
                picIx = 0;
                
                for (i=0;i<5;i++) {
                    document.forms['xbox'].kryss[i].checked=false;
                }
            }
            
            function checkedPic(nr){
                if(document.xbox.kryss[nr].checked)
                    var imgUrl = "pics/small/" + xpic[nr] + "1.jpg";
                else
                    var imgUrl = "pics/small/" + xpic[nr] + "0.jpg";            
                    document.getElementById("image" + nr).src = imgUrl;
            }
            
            function choosenPic(){
                if(document.xbox.kryss[nr].checked)
                    var xpicBig = "pics/" + xpicBig[nr] + ".jpg";
            }
            
            function newWindow(width,height,filename){
                var windowProp = "resizable=yes,width=" + width; + ",height=" + height;
                
                if(windowSmall !=null)if(windowSmall.closed ==false) windowSmall.close();
                windowSmall = window.open(filename,"Bildspel", windowProp);
            }
            
            function showSlides(nr){
                while (xpicBig.length > 0)xpicBig.pop(); //rensar arrayen
                    for (var i=0; i<xpicBig.length; i++){  //KOLLA UPP NAMNET!!! EV. FEL(BIG)
                    var url = xpicBig[i].src; //url:en till valda bilder      
                    var filname = url.substring(url.lastIndexOf("/")+1)
                    //if(filename == "white.jpg") break;
                    //else
                    xpicBig[i] = filename;             
                    }
                newWindow(width="500px",height="500px","slideshow.htm");
            }      
            
        </script>
    </head>
        <body onload="init();">
            <form name="xbox" action=""> 
            <div id="pics">
                <h1> Sommarens Bilder </h1>
                <div id="a11"onmouseover="showPict(true, 0);" onmouseout="showPict(false, 0);">
                    <img id="image0" src="pics/small/butterfly_small0.jpg" alt="En fjäril." />
                        <div id="BigPic0" class="box" name="popup"><img src="pics/butterfly.jpg" alt="En fjäril." width="200px" height="150px" />
                            <label><p />
                                <input name="kryss" type="checkbox" onclick="checkedPic(0,0);" />
                                    <span id="picText0" />                               
                            </label>
                        </div>
                </div>
                <div id="a11" onmouseover="showPict(true, 1);" onmouseout="showPict(false, 1);">
                    <img id="image1" src="pics/small/boats_small0.jpg" alt="Båtar vid stranden." />
                        <div id="BigPic1" class="box" name="popup"><img src="pics/boats.jpg" alt="Båtar vid stranden." width="200px" height="150px" />
                            <label><p />
                                <input name="kryss" type="checkbox" onclick="checkedPic(1,1);" />
                                    <span id="picText1" />    
                            </label>
                        </div>
                </div>
                <div id="a11" onmouseover="showPict(true, 2);" onmouseout="showPict(false, 2);">
                    <img id="image2" src="pics/small/church_small0.jpg" alt="En kyrka i Spanien." />
                        <div id="BigPic2" class="box" name="popup"><img src="pics/church.jpg" alt="En kyrka i Spanien." width="200px" height="150px" />
                            <label><p />
                                <input name="kryss" type="checkbox" onclick="checkedPic(2,2);" />
                                    <span id="picText2" />                                
                            </label>
                        </div>            
                </div>
                <div id="a11" onmouseover="showPict(true, 3);" onmouseout="showPict(false, 3);">
                    <img id="image3" src="pics/small/flower_small0.jpg" alt="Somrig blomma." />
                        <div id="BigPic3" class="box" name="popup"><img src="pics/flower.jpg" alt="Somrig blomma." width="200px" height="150px" />
                            <label><p />
                                <input name="kryss" type="checkbox" onclick="checkedPic(3,3);" />
                                    <span id="picText3" />                                
                            </label>
                        </div>
                </div>
                <div id="a11" onmouseover="showPict(true, 4);" onmouseout="showPict(false, 4);">
                    <img id="image4" src="pics/small/glass_small0.jpg" alt="Snart ett nytt glas." />
                        <div id="BigPic4" class="box" name="popup"><img src="pics/glass.jpg" alt="Snart ett nytt glas." width="200px" height="150px" />
                            <label><p />
                                <input name="kryss" type="checkbox" onclick="checkedPic(4,4);" />
                                    <span id="picText4" />
                            </label>   
                        </div>
                </div>
                <div id="slideShowBtn">
                        <input type="button" value="Visa bildspel" onclick="showSlides();" />
                </div>
            </div>
            </form>
        </body>
    </html>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb More information needed...

    For us to help, it would be nice to know what the problem is that you are having
    to give us a clue as to where to look. You did not include the URL where the pictures
    are located so we can not see if they are displaying correctly or not. Do you have the
    script on a server where we could see it in action or are you getting the picture locally?

    Where did you get the script from? Did it ever work for you?

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi!
    Yeah of course.
    http://www.fc.lnu.se/~cp222bn/uppgift6/uppgift6.htm
    This is the place I´ve posted it.

    My problem is that i can´t open a bigger version of the checked pictures in another page, as a slideshow.

    I need to save them in an array (or someting) and move that information to the other page.

    The code for the second page looks like this.

    Thanx!

    Code:
    <!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>Uppgift 6</title>
    <link rel="stylesheet" type="text/css" href="style6.css" />
        <script type="text/javascript">
        
            xpicBig = window.opener.xpicBig;
            var showSlide;
            var imgText = new Array("En fjäril.","Båtar vid stranden.","En kyrka i Spanien.","Somrig blomma.","Snart ett nytt glas.");
            
            function initShow() {
    	    var HTMLcode = "<select name = 'menuPic' onchange = 'showPict()'>";  // OBS!! id eller name?  Gör så att när jag väljer i menyn anropas showPict 'menupic'=rullista i menyn
    		for (var i=0; i<xpicBig.length; i++) {  //Loop för att se vilka/hur många filer som är förkryssade
    	    var HTMLcode = HTMLcode + "<option>" + xpicBig[i] + "</option>";  //Lägger till en optiontag, för varje fil som loopen räknar upp
    	} // End for
    	
    	var HTMLcode = HTMLcode + "</select>";
    	    document.getElementById("menu").innerHTML = HTMLcode; //Visar var funktionen ska visas
    	    document.showForm.menuPic.selectedIndex = 0; // första optiontaggen ska visas i menyn
    	showSlide = document.getElementById("ShowedPic");  //vart bilden ska visas
    	showSlide.src = "pics/" + xpicBig[0];
            
    	    box =  document.getElementsByName("textBox1")
                    for (var i=0; i<box.length; i++){
                    box[i].style.left = 5*i+"px";
                    }
                imgText = 0;
            } // End initShow
            
            function PrevPic() {
    	var i = document.showForm.menu.selectedIndex; // Index för den bild som visas
    	if (i > 0) { // Om ej första bild redan visas
    		document.showForm.menu.selectedIndex = i-1; // Subtrahera 1 från menyvalet, så att menyn uppdateras
    		showSlide.src = "pics/" + xpicBig[i-1]; // Visa föregående bild
                    } // End if
            } // End PrevPic
            
            function NextPic() {
    	var i = document.showForm.menu.selectedIndex; // Index för den bild som visas
    	    if (i < xpicBig.length-1) { // Om ej sista bild redan visas
    		document.showForm.menu.selectedIndex = i+1; // Addera 1 till menyvalet, så att menyn uppdateras
    		showSlide.src = "pics/" + xpicBig[i+1]; // Visa nästa bild
            	} // End if
            } // End NextPict
            
            function showPict(){
            showSlide.src = "pics/" + xpicBig[document.showForm.menu.selectedIndex];   //Tar reda på vad jag valt i menyn   
            }//End showPict
            
            function textBox(){
                    
                //var imgText = selectedIndex;
    	    
                box[imgText].style.zIndex = 10;
                var z = 9;
                    for (var i=imgText+1; i<box.length; i++){
                        box[i].style.zIndex = z;
                    }
                z = 9;
                    for (var i=imgText+1; i<box.length; i++){
                    box[i].style.zIndex = z;
                        z = z - 1;
                    }
            }//End textBox
        
        </script>
    </head>
    <body onload="initShow()";>
        <h2> Bildspel</h2>
        <div id="picSlideShow" name="textBox1">
            <img id="showedPic" alt="Bilderna i bildspelet." src="pics/white.jpg" onmouseover="textBox()"; />
                <form name="showForm" action="">
                    <input type="button" value="Bakåt" onclick="prevPic()"; />
                    <span id="menu">här ska menyn ligga</span>
                    <input type="button" value="Framåt" onclick="nextPic()"; />
                </form>
        </div>        
    </body>
    </html>

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb Something to try...

    I'm having a little trouble with the language (ugly American)
    but see if you can integrate this into your code.

    Substitute your own images in place of my 'baseURL' + 'imgList' array.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <style type="text/css">
    .imgBox { border:1px solid blue; height:75px; width:50px; }
    .liArea { list-style-type:none; display:inline; }
    </style>
    
    <script type="text/javascript">
    var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
    var imgList = ['11.jpg','12.jpg','13.jpg','14.jpg','15.jpg'];
    window.onload = function () {
      var str = '';
      for (var i=0; i<imgList.length; i++) {
        var li = document.createElement('li');
        li.setAttribute('class','liArea');
        li.setAttribute('id','liArea'+i);
        document.getElementById('_thumbs').appendChild(li);
    
        var pic = document.createElement('img');
        pic.setAttribute('id','pic'+i);
        pic.setAttribute('src',baseURL+imgList[i]);
        pic.setAttribute('class','imgBox');
        document.getElementById('liArea'+i).appendChild(pic);
    
        var cbox = document.createElement('input');
        cbox.setAttribute('id','cbox'+i);
        cbox.setAttribute('type','checkbox');
        document.getElementById('liArea'+i).appendChild(cbox);
      }
    }
    function newWindows() {
      var OpenWindow = window.open('', 'newWindow',
        'resizable=yes,scrollbars=yes,height=300,width=500', false);
      OpenWindow.document.write("<TITLE>Title Goes Here</TITLE>")
      OpenWindow.document.write("<BODY BGCOLOR=pink>")
      OpenWindow.document.write("<h1>Hello!</h1>")
      var sel = document.getElementsByTagName('input');
      for (var i=0; i<sel.length; i++) {
        if (sel[i].type == 'checkbox') {
          if (sel[i].checked) {
            OpenWindow.document.write( '<img src="'+document.getElementById('pic'+i).src+'">');
          }
        }
      }
      OpenWindow.document.write("</BODY>");
      OpenWindow.document.write("</HTML>");
      OpenWindow.document.close();
    }
    </script>
    
    </head>
    <body>
    <div id="_thumbs"></div>
    <button onclick="newWindows()">New Window</button>
    </body>
    </html>

  • #5
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I´ll try that!

    THANK YOU!

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Thumbs up

    Quote Originally Posted by L8P8 View Post
    I´ll try that!

    THANK YOU!
    You're most welcome.
    Happy to help.
    Keep us informed of your progress.
    Good Luck!


  •  

    Posting Permissions

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