Page 1 of 3 123 LastLast
Results 1 to 10 of 25

Thread: Need Help With Pixelating Slide Show

  1. #1
    Join Date
    Aug 2016
    Location
    Michigan
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Need Help With Pixelating Slide Show

    Hi All,

    I am note a coder however I have worked with Java Scripts in the past. I am trying to add this script to my home page to display images of some of my work however I am running into issues.

    I copies the script into the head and the body as instructed however there are no instruction s on how to get the script to show or reference the images. Do I put the file name of the images into the script or do i reference their location somewhere in the script. I am totally confused.

    Thanks,
    Jeff

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    This is an old slideshow that only works (shows special pixelation transitions between images) in IE 9 and less. Other browsers will see a simple slideshow. The complete instructions for installing it are on the demo page:

    http://www.dynamicdrive.com/dynamicindex14/pixelate.htm

    The images are entered in the array in Step 1 (the part of the code that goes in the head of the page):

    Code:
    <script language="JavaScript1.1">
    <!--
    
    //Pixelating Image slideshow
    //Copyright Dynamic Drive 2001
    //Visit http://www.dynamicdrive.com for this script
    
    //specify interval between slide (in mili seconds)
    var slidespeed=3000
    //specify images
    var slideimages=new Array("photo1.jpg","photo2.jpg","photo3.jpg")
    //specify corresponding links
    var slidelinks=new Array("http://www.dynamicdrive.com","http://wsabstract.com","http://www.geocities.com")
    
    var imageholder=new Ar . . .
    Replace the red images with your own. Put the code of Step 2 in the body of the page where you want the slideshow to appear.

    If you want more help with it please post a link to the page on your site where you've put the code for it.

    That said, due to the limitations involved with this old script, I'd recommend almost any other slideshow.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2016
    Location
    Michigan
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John,
    Thank you for getting back to me. I do not have it on my live page but rather a test page however, since this is so old, can you recommend a more recent script that will offer the same function. Preferably with .jpg images.
    Jeff

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    It's a little trickier, but very versatile, and still pretty easy to setup, and can look really good with its fade transition in all browsers. It handles any kind of image that the web can, so that includes .jpg:

    http://www.dynamicdrive.com/dynamici...nslideshow.htm

    It's the Ultimate Fade-In Slideshow. Let me know if you have trouble. But first of course try following the step by step directions. If you run into problems, try putting up a test page on your site and posting a link to it. I can fix almost anything involved with this script, even take a failed attempt and make a working demo with your images that you can then copy. It also has additional features available other than what's included with the script, but let's not worry about that part just yet.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Aug 2016
    Location
    Michigan
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John,
    Well I am completely lost and confused. As I said, I am not a coder and because of that I am very confused by the directions. I have created a test folder with everything in it including the images I will to have show up on the from page. Can you take a look at it and see what I am doing or not doing? It is www.cbjeff.com/test/index2.html. The folder is, of course, called test and it has everything in it. I would also like to be able to add images to it once the issues are resolved. Any help you can provide would be greatly appreciated.

    Thanks,
    Jeff Walters

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    If you want to skip the critique and explanations, just copy the the last code block in this post, paste it into a text only editor like NotePad and save it as - say index3.html, and upload it to your test folder. Should work pretty well and can be tweaked if need be. In any case, any questions or problems, just let me know.

    OK, you've done better than a lot of non-coders do first time. You have the scripts in place and the code on your page is pretty much workable. There are three main problems, and one's not even your fault:

    1. There's no division in the HTML markup to receive the slideshow.
    2. You have two initialization calls, when likely you only want one slideshow, or if you want two slideshows, the second one is also missing a division to receive it in the HTML markup.
    3. You've hotlinked to the Dynamic Drive images for the slideshows (this is the one that's not your fault), often one can hotlink to images from another site, but Dynamic Drive blocks that. It can sometimes work if the images are cached in the browser, but even then it often fails - you need to use your own images.


    One and two can be fixed by changing:

    Code:
                <p style="margin-top:0; margin-bottom:0;" align="center">&nbsp;<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>
    to:

    Code:
                <div id="fadeshow1"></div><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: ""
    })
    
    </script>
    Now, notice the highlighted part in the fixed code. That's where you need to put your images. If these images were in the same folder as the page, you could write it like so:

    Code:
                <div id="fadeshow1"></div><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: [
    		["pool.jpg"],
    		["cave.jpg"],
    		["fruits.jpg"],
    		["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: ""
    })
    
    </script>
    You can in fact download these images from Dynamic Drive and put them in your test folder and the slideshow in the most recent code will work there. That might even be the best thing to do, just to get it working. But I see you also have some images in that folder already. Let's try using those, I'm also changing the style you used that went with slideshow 4 to apply to the first slideshow and getting rid of the fourth one, and adjusting the first's dimensions to be at least workable - use this as your new test page (save as index3.html and put it in your test folder):

    HTML Code:
    <html>
    
    <head>
    <title>CBJ Home Page</title>
    <meta name="generator" content="Namo WebEditor v5.0">
    <meta name="author" content="Jeff Walters">
    <meta name="classification" content="Home Page">
    <meta name="description" content="Begining point for my site">
    <meta name="keywords" content="Gifts, Birthdays, Wood, Wooden, Wood Turner, Pen, Bowls, Boxes, Artistic">
    <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>
    
    #fadeshow1 .gallerylayer img{ /* make all images inside fadeshow1 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)
    * Please keep this notice intact
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    </head>
    
    <body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
    <table align="center" cellpadding="0" cellspacing="0" width="1233">
        <tr>
            <td width="167" height="105">
                <p>&nbsp;<img src="images/pens_030313/SL_Honduran_Rosewood_Gold%202%20(Small).jpg" width="156" height="86" border="0"></p>
            </td>
            <td width="1066" height="105" valign="middle"><p align="center"><span style="font-size:14pt;"><b><font color="maroon">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;www.cbjeff.com <img src="images/buttons/cbj_html_smartbutton1.gif" namo_npi=":EmbededNPI1" align="middle" width="520" height="88" border="0"></font></b></span> 
                <span style="font-size:14pt;"><b><font color="maroon">www.jeffscottwalters.com</font></b></span></p>
            </td>
        </tr>
    </table>
    <table align="center" cellpadding="0" cellspacing="0" width="1232">
        <tr>
            <td width="167" height="381" align="center" valign="top">
                <p style="margin-top:0; margin-bottom:0;"><a href="index2.html"><img src="images/pictures/index_html_smartbutton1.gif" namo_npi=":EmbededNPI2" border="0"></a><a href="sale.html"><img src="images/pictures/index_html_smartbutton2.gif" namo_npi=":EmbededNPI3" border="0"></a></p>
                <p style="margin-top:0; margin-bottom:0;"><a href="gallery.html"><img src="images/pictures/index_html_smartbutton3.gif" namo_npi=":EmbededNPI4" border="0"></a><a href="about.html"><img src="images/pictures/index_html_smartbutton4.gif" namo_npi=":EmbededNPI5" border="0"></a><a href="mailto:jeff@jeffscottwalters.com"><img src="images/pictures/index_html_smartbutton5.gif" namo_npi=":EmbededNPI6" border="0"></a>&nbsp;</p>
            </td>
            <td width="1065" height="381" valign="top"><p align="center"><span style="font-size:18pt;"><b><font color="maroon">Welcome 
    to my site and my world of Wood Turning</font></b></span></p>
                <div id="fadeshow1"></div><script type="text/javascript">
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [500, 800], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["IMAG0119.jpg"],
    		["IMAG0247.jpg"],
    		["IMAG0304.jpg"],
    		["IMAG0389.jpg"],
    		["IMAG120.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: ""
    })
    
    </script></p>
            </td>
        </tr>
    </table>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p style="margin-top:0; margin-bottom:0;" align="center">&nbsp;</p>
    </body>
    </html>
    If there are still problems or questions, just let me know.
    Last edited by jscheuer1; 08-27-2016 at 01:25 AM. Reason: add preface
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Aug 2016
    Location
    Michigan
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John,
    So do I then replace all the code with what you provided or just the code in blue.
    Jeff

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The whole thing, it's an entire page, sorry - I used the HTML code feature (which incidentally has syntax highlighting - I guess that's what's confusing) for the last block because it was an entire HTML page. To restate - save this in a plain text editor like NotePad. Save it as index3.html and place it in your test folder:

    Code:
    <html>
    
    <head>
    <title>CBJ Home Page</title>
    <meta name="generator" content="Namo WebEditor v5.0">
    <meta name="author" content="Jeff Walters">
    <meta name="classification" content="Home Page">
    <meta name="description" content="Begining point for my site">
    <meta name="keywords" content="Gifts, Birthdays, Wood, Wooden, Wood Turner, Pen, Bowls, Boxes, Artistic">
    <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>
    
    #fadeshow1 .gallerylayer img{ /* make all images inside fadeshow1 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)
    * Please keep this notice intact
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    </head>
    
    <body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
    <table align="center" cellpadding="0" cellspacing="0" width="1233">
        <tr>
            <td width="167" height="105">
                <p>&nbsp;<img src="images/pens_030313/SL_Honduran_Rosewood_Gold%202%20(Small).jpg" width="156" height="86" border="0"></p>
            </td>
            <td width="1066" height="105" valign="middle"><p align="center"><span style="font-size:14pt;"><b><font color="maroon">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;www.cbjeff.com <img src="images/buttons/cbj_html_smartbutton1.gif" namo_npi=":EmbededNPI1" align="middle" width="520" height="88" border="0"></font></b></span> 
                <span style="font-size:14pt;"><b><font color="maroon">www.jeffscottwalters.com</font></b></span></p>
            </td>
        </tr>
    </table>
    <table align="center" cellpadding="0" cellspacing="0" width="1232">
        <tr>
            <td width="167" height="381" align="center" valign="top">
                <p style="margin-top:0; margin-bottom:0;"><a href="index2.html"><img src="images/pictures/index_html_smartbutton1.gif" namo_npi=":EmbededNPI2" border="0"></a><a href="sale.html"><img src="images/pictures/index_html_smartbutton2.gif" namo_npi=":EmbededNPI3" border="0"></a></p>
                <p style="margin-top:0; margin-bottom:0;"><a href="gallery.html"><img src="images/pictures/index_html_smartbutton3.gif" namo_npi=":EmbededNPI4" border="0"></a><a href="about.html"><img src="images/pictures/index_html_smartbutton4.gif" namo_npi=":EmbededNPI5" border="0"></a><a href="mailto:jeff@jeffscottwalters.com"><img src="images/pictures/index_html_smartbutton5.gif" namo_npi=":EmbededNPI6" border="0"></a>&nbsp;</p>
            </td>
            <td width="1065" height="381" valign="top"><p align="center"><span style="font-size:18pt;"><b><font color="maroon">Welcome 
    to my site and my world of Wood Turning</font></b></span></p>
                <div id="fadeshow1"></div><script type="text/javascript">
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [500, 800], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["IMAG0119.jpg"],
    		["IMAG0247.jpg"],
    		["IMAG0304.jpg"],
    		["IMAG0389.jpg"],
    		["IMAG120.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: ""
    })
    
    </script></p>
            </td>
        </tr>
    </table>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p style="margin-top:0; margin-bottom:0;" align="center">&nbsp;</p>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Aug 2016
    Location
    Michigan
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John,
    Works great. I just have to figure out how to get it to show the whole image. I tried resizing the images however it did not seem to work.

    You're the best

    Jeff

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Oh, you can resize the images in an image editing program like Photoshop, The Gimp, Paint Shop, etc. But the trick would be to resize them all to a size that's about the size you want them. Then, if they're all the same size, just set those dimensions in the slideshow init here:

    Code:
    <script type="text/javascript">
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [500, 800], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["IMAG0119.jpg"],
    		["IMAG0247.jpg"],
    		["IMAG0304.jpg"],
    		["IMAG0389.jpg"],
    		["IMAG120.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: ""
    })
    
    </script>
    If they're not all the same dimensions, use the width of the widest, and the height of the tallest, the slideshow will automatically center them. And of course, at that point, one would get rid of this:

    Code:
    <style>
    
    #fadeshow1 .gallerylayer img{ /* make all images inside fadeshow1 scale to 100% of slideshow width */
    width: 100%;
    height: auto;
    }
    
    </style>
    Anything else, or more on this part of it that you want to know - just ask.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. IE Issues with Pixelating Slide Show
    By marjorieprints in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 05-06-2013, 02:12 AM
  2. Pausing Pixelating Slide Show
    By damnitsux2bu in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 09-21-2009, 04:25 AM
  3. Image Slide Show - Book Flip Slide Show
    By Peppy in forum Dynamic Drive scripts help
    Replies: 13
    Last Post: 01-17-2007, 04:11 PM
  4. Pixelating Slide Show
    By DizzyIzzie in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 08-03-2006, 07:26 PM
  5. pixelating image slide show
    By swsds in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 07-17-2005, 10:42 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
  •