Skip to main content

Forums

This topic contains 7 replies, has 4 voices, and was last updated by  rbalascak 3 years, 11 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #206770

    rbalascak
    Participant

    Hello,
    I am looking to have a simple slideshow on the homepage of my site.
    10 pictures.
    That fade in.
    And fade out.
    That is it.

    I can not for the life of me get this to work… can anyone help please?
    I tried following the instructions here https://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/

    here is my page….
    http://raeheartsdesign.com/2015/index2.html

    #206772

    Shikkediel
    Participant

    Slideshow works when the script is added afterwards (so no syntax issues there). The function wrapper’s a likely suspect to me :

    (function($){ ... })(jQuery);
    

    Instead you could try :

    $(function() { ... });
    

    Edit – although I doubt a bit that is really it.

    #206774

    Beverleyh
    Participant

    This reply has been reported for inappropriate content.

    Just wondering if you’re using jQuery for other stuff or only to power this slideshow? If the latter, its quite a big chunk of extra code to add (~100kb minified) to your web page.

    If you want to go lightweight, its possible to achieve the same sort of thing with a few lines of vanilla JavaScript and CSS3 (if you’re happy to elbow IE9/8 users to one side, since those browsers don’t support CSS transitions)

    Here’s an example: http://fofwebdesign.co.uk/template/_testing/cross-fade-slideshow-js.htm

    IE9 users just see the images ticking over but no fade effect. IE8 users just see the first image, however, you can make IE8 act like IE9 with the following CSS;

    <!--[if IE 8]>
    <style>
    #slideshow .show:first-child               { background-image:url(path/to/image-01.jpg) } 
    #slideshow :first-child + div.show             { background-image:url(path/to/image-02.jpg) }
    #slideshow :first-child + div + div.show       { background-image:url(path/to/image-03.jpg) }
    #slideshow :first-child + div + div + div.show         { background-image:url(path/to/image-04.jpg) }
    #slideshow :first-child + div + div + div + div.show   { background-image:url(path/to/image-05.jpg) }
    </style> 
    <![endif]-->
    

    And follow the pattern to add more pics.

    Hope that helps.

    #206775

    Chromawoods
    Participant

    You are pretty close. The part where you fade in the next slide also needs to be within the callback of the previous slide’s fadeOut function. Check out this pen:

    #206778

    Shikkediel
    Participant

    That’ll leave a white background in between instead of a crossfade. The code is seems to be working fine (when added in the Firebug console), it’s must have to do with timing of execution.

    #206786

    Chromawoods
    Participant

    @shikkediel yes you are right, that works too. I have updated the pen.

    But yeah, I agree with @beverleyh that nowadays jQuery is probably overkill for such a thing.

    #206888

    rbalascak
    Participant

    THANK YOU, THANK YOU, THANK YOU!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star