www.webdeveloper.com
Results 1 to 4 of 4

Thread: Apple.com's slide show (CSS + Javascript)

  1. #1
    Join Date
    Jun 2005
    Posts
    3

    Apple.com's slide show (CSS + Javascript)

    See:

    http://www.apple.com/safari

    I like the way they are doing the slideshow, with the "hot buttons" below. It's being done in HTML with:

    Code:
    <section id="slideshow">
    				<div id="slideshow-swap">
    					<img id="slideshow1" src="http://images.apple.com/safari/images/overview_hero_image1_20100607.png" width="550" height="429" alt="Safari Reader" />
    				</div>
    				<ul class="slideshow-nav">
    					<li><a class="slideshow-link" href="#slideshow1">1</a></li>
    					<li><a class="slideshow-link" href="#slideshow2">2</a></li>
    					<li><a class="slideshow-link" href="#slideshow3">3</a></li>
    					<li><a class="slideshow-link" href="#slideshow4">4</a></li>
    					<li><a class="slideshow-link" href="#slideshow5">5</a></li>
    				</ul>
    				<img id="slideshow2" src="http://images.apple.com/safari/images/overview_hero_image2_20100607.png" width="550" height="429" alt="Safari Reader" />
    				<img id="slideshow3" src="http://images.apple.com/safari/images/overview_hero_image3_20100607.png" width="550" height="429" alt="Top Sites" />
    				<img id="slideshow4" src="http://images.apple.com/safari/images/overview_hero_image4_20100607.png" width="550" height="429" alt="Full History Search" />
    				<img id="slideshow5" src="http://images.apple.com/safari/images/overview_hero_image5_20100607.png" width="550" height="429" alt="Cover Flow" />
    			</section>
    The CSS include files, makes the ul/li into the buttons.

    I've played with it, just put in the above HTML & CSS..but there is no slide-show, & the hot-buttons don't even work.

    I looked at the various .js files (9 total, including swap_view.js & event_mixins.js), & I can't figure out what's going on. I don't see where the looping is being programmed, with the time-delay. I tried including a couple of the .js files, but it doesn't work. Including ALL of them does.

    Can someone recommend a minimalist-solution, a basic .js file which will do the nice transitions (fade out/fade in).

  2. #2
    Join Date
    Sep 2009
    Posts
    146
    dont give credit to apple where its not deserved LOL

    here's apples thing on steroids in a nice little jQuery plugin:
    http://flowplayer.org/tools/scrollable/index.html#demos

    check out the example with the navigation plugin to get those slick buttons

    -aPeg

  3. #3
    Join Date
    Jun 2005
    Posts
    3
    Quote Originally Posted by apeg View Post
    dont give credit to apple where its not deserved LOL

    here's apples thing on steroids in a nice little jQuery plugin:
    http://flowplayer.org/tools/scrollable/index.html#demos

    check out the example with the navigation plugin to get those slick buttons

    -aPeg
    Thanks!!

    Flowplayer.org looks to be a excellent solution, very good presentation as well. I can run the JQuery image scrolling demos with no problems on iPhone 3G.

    Are there any similar solutions by other vendors? I need a presentation suitable for "professional photography".

    What do you think of the CMS such as Drupal, Joomla, et al. that can use the above. Which do you recommend? I noticed Flowplayer.org website doesn't use a CMS, my Firefox CMS detector just shows JQuery.


    I do give credit to Apple, to keep their website KISS.

  4. #4
    Join Date
    Sep 2009
    Posts
    146
    Quote Originally Posted by spock00 View Post
    I do give credit to Apple, to keep their website KISS.
    hahah fair enough...

    as for the CMS, its really depends on your needs? generally CMS's are handled on the back-end while the plugin i passed you is strictly a front end tool.

    Drupal, Joomla... both are great, but again 100% dependent one what you needs from the CMS are.

    -aPeg

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles