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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,042
    Thanks
    19
    Thanked 42 Times in 42 Posts

    Simple fading images.

    Is there any decent prebuilt easy to use image fading scripts that anyone knows of where I can just tell it the images I want to fade and pop goes the weasel?
    I basically have img1.jpg img2.jpg and img3.jpg and want to fade between each of them in an infinite loop.
    Thanks in advance.
    Rafiki.

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,042
    Thanks
    19
    Thanked 42 Times in 42 Posts
    Am I missing something?

    Here is the HTML/Javascript
    Code:
    <div id="cycler">
    	<img src="images/image1.jpg" alt="roof" class="active">
    	<img src="images/image2.jpg" alt="Description" >
    	<!--<img src="images/image3.jpg" alt="Description" >-->
    	
    	</div>
    	
    	<script type="text/javascript">
    
    function cycleImages(){
          var $active = $('#cycler .active');
          var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
          $next.css('z-index',2);//move the next image up the pile
          $active.fadeOut(1500,function(){//fade out the top image
    	      $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
              $next.css('z-index',3).addClass('active');//make the next image the top one
          });
        }
    
    $(document).ready(function(){
    // run every 7s
    setInterval('cycleImages()', 1000);
    })</script>
    And the CSS
    Code:
    #cycler{
    padding:0;
    margin:0px 5px;
    	border:none;
    	width:1000px;
    	position:relative;
    	height:2000px;
    	}
    
    #cycler img{margin-top:45px;position:absolute;z-index:1}
    #cycler img.active{z-index:3}
    Not getting anything in IE 10 and Chrome 25.

  • #4
    Banned
    Join Date
    Mar 2013
    Posts
    139
    Thanks
    0
    Thanked 9 Times in 9 Posts
    Courtesy of Mr. Google.....

    Code:
    <style type="text/css">
                #ssImg {
                    display: none;
                }
            </style>
    Code:
    <script type="text/javascript">
                var myPics = ['img1.jpg','img2.jpg','img3.jpg'];
                //preload the pics to ensure they are cached by end of page load
                var picO = new Array();
                for(i=0; i < myPics.length; i++){
                    picO[i] = new Image();
                    picO[i].src = myPics[i];
                }
                var curPic = 0;
                var fadeTimer;
                var speed = 50;
                var opacStep = 0.5;
                var dirn = -1;
                var curOpac = 10;
                function fade(){
                    if(fadeTimer){clearInterval(fadeTimer);}
                    fadeTimer = setInterval(setOpacity,speed);
                }
                function setOpacity() {
                    curOpac = curOpac + (opacStep * dirn);
                    if(curOpac < 0){
                        swapImage();
                        curOpac = 0;
                        dirn = 1;
                        fade();
                        return;
                    }
                    if(curOpac > 10){
                        curOpac = 10;
                        clearInterval(fadeTimer);
                        dirn = -1;
                        setTimeout(fade,1000);
                        return;
                    }
                    if(typeof(oSsImg.style.opacity) == 'string'){
                        oSsImg.style.opacity = curOpac/10;
                    } else {
                        oSsImg.style.filter = 'alpha(opacity=' + curOpac*10 + ')';
                    }
                }
                function swapImage(){
                    curPic = (++curPic > picO.length-1)? 0 : curPic;
                    oSsImg.src = picO[curPic].src;
                }
                window.onload=function(){
                    oSsImg = document.getElementById('ssImg');
                    oSsImg.src = picO[curPic].src;
                    oSsImg.style.display = 'inline';
                    setTimeout(fade,1000);
                }
            </script>
    Code:
    <div>
                <img id="ssImg" src="" alt="" />
            </div>

  • #5
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    @rafiki, are you calling jQuery?

    @knightCoder, yeah I found plenty of pure JS ways of doing it but, since he posted in the frameworks section, thought he might want to use one. Plus, the issue with most the pure JS versions I found was that you have to name your images eg:
    Code:
    var myPics = ['img1.jpg','img2.jpg','img3.jpg'];
    So if you add remove or anything, you have the edit the array in this case. In the jQuery version, it looks for any images in a predefined div. So you can cram as much or as little in there and never have to change the script.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #6
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,042
    Thanks
    19
    Thanked 42 Times in 42 Posts
    Quote Originally Posted by harbingerOTV View Post
    @rafiki, are you calling jQuery?

    @knightCoder, yeah I found plenty of pure JS ways of doing it but, since he posted in the frameworks section, thought he might want to use one. Plus, the issue with most the pure JS versions I found was that you have to name your images eg:
    Code:
    var myPics = ['img1.jpg','img2.jpg','img3.jpg'];
    So if you add remove or anything, you have the edit the array in this case. In the jQuery version, it looks for any images in a predefined div. So you can cram as much or as little in there and never have to change the script.
    I didn't want one of them standard JS ones, the jQuery looks very good, how do you 'Call jQuery'? I haven't ever used it. And doing long days of manual work right now so feeling tired as soon as I get back.
    Thanks.
    Rafiki.

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,900
    Thanks
    56
    Thanked 543 Times in 540 Posts
    Quote Originally Posted by harbingerOTV View Post
    Plus, the issue with most the pure JS versions I found was that you have to name your images
    wouldn't that just be a case of
    Code:
    var myPics = document.getElementById("cycler").getElementsByTagName("img");
    ?

  • #8
    Banned
    Join Date
    Mar 2013
    Posts
    139
    Thanks
    0
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by harbingerOTV View Post
    @rafiki, are you calling jQuery?

    @knightCoder, Plus, the issue with most the pure JS versions I found was that you have to name your images eg:
    Code:
    var myPics = ['img1.jpg','img2.jpg','img3.jpg'];
    So if you add remove or anything, you have the edit the array in this case. In the jQuery version, it looks for any images in a predefined div. So you can cram as much or as little in there and never have to change the script.
    To me your post sounds like you don't fully understand what jquery actually is.

    Jquery is not a different language at all. It is just a bunch of prewritten libraries, functions etc written in pure js as you refer to. Whatever you can using the jquery framework, you can do in "pure js" because jquery is just JS. I challenge anyone to show something they claim they can do in jquery that cannot be done with "pure" js. There won't be anything .

    So you can modify the code (pure JS as you called it) I posted before to look for images wherever you like so you won't have to edit the code at all if the images or number of images changes.

    For a simple image fader like the op wants, you don't need jquery at all. Finally newbies trying to play with jquery before they understand even the basics of javascript is akin to a baby trying run or jump hurdles before it can even walk.

  • #9
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,292
    Thanks
    10
    Thanked 583 Times in 564 Posts
    Quote Originally Posted by knightCoder View Post
    I challenge anyone to show something they claim they can do in jquery that cannot be done with "pure" js. There won't be anything .
    i'll nibble. The thing i want to do is use a jQuery UI plugin that integrates with bootstrap, can you post me the code to make it work in pure js, it says "jQuery is not defined" when i try to use it without jQuery...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #10
    Banned
    Join Date
    Mar 2013
    Posts
    139
    Thanks
    0
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by rnd me View Post
    i'll nibble. The thing i want to do is use a jQuery UI plugin that integrates with bootstrap, can you post me the code to make it work in pure js, it says "jQuery is not defined" when i try to use it without jQuery...
    ok, I'll nibble back

    First post the bootstrap code you are having difficulty with and I'll have a look at it when I have a chance.

    But the point I am making is that any jquery code can be "reverse engineered" back to "pure js", as harbingerOTV referred to, because jquery is simply javascript and not a different language.

    Post the bootstrap code in another thread and we can continue there.

  • #11
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,292
    Thanks
    10
    Thanked 583 Times in 564 Posts
    Quote Originally Posted by knightCoder View Post
    First post the bootstrap code you are having difficulty with and I'll have a look at it when I have a chance.

    Post the bootstrap code in another thread and we can continue there.
    i'm not going to make you do that, my point is simply that one should be careful throwing down gauntlets around here. i don't have too many problems with existing code.

    maybe some plugins could work seamlessly in Zepto instead, but is that "pure" or just "less dirty" than jQuery?
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #12
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,042
    Thanks
    19
    Thanked 42 Times in 42 Posts
    If we could get back on topic please, I thought I was calling the jQuery function via the lines..
    Code:
    $(document).ready(function(){
    // run every 1s
    setInterval('cycleImages()', 1000);
    })

  • #13
    Banned
    Join Date
    Mar 2013
    Posts
    139
    Thanks
    0
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by rafiki View Post
    If we could get back on topic please, I thought I was calling the jQuery function via the lines..
    Code:
    $(document).ready(function(){
    // run every 1s
    setInterval('cycleImages()', 1000);
    })
    If you insist on using jquery, then it's only a trivial process to change the "pure js" code I posted, that works 100% btw, to jquery type code and then you can add it to the existing jquery libraries.

    @rnd me - I stand by what I posted 100%. Lets discuss your issue with bootstrap in another thread if you have an actual code example that shows anything I stated is not true.

  • #14
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,292
    Thanks
    10
    Thanked 583 Times in 564 Posts
    Quote Originally Posted by rafiki View Post
    Is there any decent prebuilt easy to use image fading scripts that anyone knows of where I can just tell it the images I want to fade and pop goes the weasel?


    well, you can use my image gallery maker, it's pretty simple to use.

    you just list each image url on a line in the "Build from List" section and click "Build"...

    as an example, with three (right-click-> copy image url, paste, [ENTER]) combos, i was able to produce this gallery.

    it can be plopped on any page using the also-generated embed code:
    Code:
    <iframe src="http://danml.com/pub/photos.htm?settings=({ title: 'Slides',author: 'anon',fade: true,showThumbs: false,auto: '10',showInfo: false });imgs=['http://www.codingforums.com/image.php?u=39179&dateline=1176590874','http://www.codingforums.com/image.php?u=107046&dateline=1346774063','http://www.codingforums.com/image.php?u=51506&dateline=1213777153']"  frameborder='1' style='width: 600px; height:400px; position: relative;'>		your browser cannot display inline frames</iframe>
    i did write it a while back, so if you discover any issues with it let me know, and i'll be happy to help out.
    Last edited by rnd me; 04-02-2013 at 01:00 AM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #15
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    rafiki, are you referencing jQuery before the script? ie: <script src='YOUR-PATH/jQuery.js'></script>

    knightcoder, again, he posted in the frameworks section. So giving him an example using a framework is what I did. When I say "pure" JS, I mean no framework. And, thank you for clarifying what jQuery is. /sarcasm

    edit x2: forgot the smiley
    edit x3: forgot to improperly quote my adjective
    Last edited by harbingerOTV; 04-03-2013 at 02:52 PM. Reason: sarcasm is lost on the intertubes *sigh
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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