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 2 of 2

Thread: Slideshow help

  1. #1
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Slideshow help

    Hi guys

    I need some help with a slideshow script on my new website.

    This is the website which shows the slideshow I want to have on my new website: Flyt dig!
    As you can see you can click on "Forstyr ham" and then the slideshow starts.

    I was told that I should use this script here: Dynamic Drive DHTML Scripts- Ultimate Fade-in slideshow (v2.0)

    So here is what I have done so far:

    I have pasted this code on my website:
    Code:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- optional touchswipe file to enable swipping to navigate slideshow -->
    <script type="text/javascript" src="jquery.touchSwipe.min.js"></script>
    
    <style>
    
    #fadeshow4 .gallerylayer img{ /* make all images inside fadeshow4 scale to 100% of slideshow width */
    width: 100%;
    height: auto;
    }
    
    </style>
    
    <script type="text/javascript" src="fadeslideshow.js">
    
    /***********************************************
    * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    
    <script type="text/javascript">
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["http://www.dynamicdrive.com/dynamicindex4/pool.jpg"],
    		["http://www.dynamicdrive.com/dynamicindex4/cave.jpg"],
    		["http://www.dynamicdrive.com/dynamicindex4/fruits.jpg"],
    		["http://www.dynamicdrive.com/dynamicindex4/dog.jpg"] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "always",
    	togglerid: ""
    })
    
    
    var mygallery4=new fadeSlideShow({
    	wrapperid: "fadeshow4", //ID of blank DIV on page to house Slideshow
    	dimensions: ['50%', 300], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["http://www.dynamicdrive.com/dynamicindex14/shockwave/images/1.jpg", "", "", "There is beauty to be found in nature not just in grand landscapes, but in the petals of an unassuming flower"],
    		["http://www.dynamicdrive.com/dynamicindex14/shockwave/images/3.jpg", "", "", "The iconic telephone booths of London now in a very unfamiliar place."],
    		["http://www.dynamicdrive.com/dynamicindex14/shockwave/images/7.jpg", "", "", "A piano not played is a piano that's wasting away. "],
    		["http://www.dynamicdrive.com/dynamicindex14/shockwave/images/4.jpg", "", "", "Alone and being lonely. It's a state of mind. Which one does this image evoke in you?"] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'manual', pause:3000, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "always",
    	togglerid: "fadeshow4toggler"
    })
    
    </script>
    I have downloaded the 2 external files and the 3 small pictures, but I don't know what to do with them or where they should be placed?

    I have also pasted this code on the same page as the first code:
    Code:
    <div id="fadeshow1"></div>
    
    <br />
    
    <div id="fadeshow4"></div>
    
    <div id="fadeshow4toggler" style="width:50%; text-align:center; margin-top:10px">
    <a href="#" class="prev"><img src="http://www.dynamicdrive.com/dynamicindex14/left.png" style="border-width:0" /></a>  <span class="status" style="margin:0 50px; font-weight:bold"></span> <a href="#" class="next"><img src="http://www.dynamicdrive.com/dynamicindex14/right.png" style="border-width:0" /></a>
    </div>
    Here is the result: Flyt dig!


    I'm really new to javascript, so I have somebody can help me out

  • #2
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant
    3 small pictures? There are two DIFFERENT slide shows defined there. Each uses FOUR images. But you don't need to download any of them, as the code is using absolute references to images on dynamicdrive.com

    As for where to put everything: If you are running Windows, put them in the c:\inetpub\wwwroot directory or create a subdirectory (I call mine "test") and put them there.

    Then you can refer to them in your browser via http://localhost/whatevername.html or http://localhost/test/yourchoiceofname.html
    But I don't even see the pictures it's referring to on my website: Flyt dig!


  •  

    Posting Permissions

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