TAILIEUCHUNG - JQuery: Novice to Ninja- P11

JQuery: Novice to Ninja- P11:No matter what kind of ninja you are—a cooking ninja, a corporate lawyer ninja, or an actual ninja ninja—virtuosity lies in first mastering the basic tools of the trade. Once conquered, it’s then up to the full-fledged ninja to apply that knowledge in creative and inventive ways. | Images and Slideshows 127 around. We ll be exploring many of the concepts employed here in more detail in the coming chapters so don t worry if you need to skip this one for now and come back to it later. Let s base our slideshow on a familiar list of images. We ll wrap the list in a div which will allow us to constrain the thumbnails and add an anchor that will serve as our trigger chapter_04 15_iphoto_style_slideshow excerpt h2 Around town last night h2 div id photos a href class trigger Image Gallery a ul id photos_inner li img alt Glendatronix src . . images li li img alt Darth Fader src . . images li ul div If a user views our page with both CSS and JavaScript turned off they ll simply see a huge stack of images. While it s far from being the great experience we hoped to provide we have given them full access to our content. If only JavaScript is disabled all but one of the images will be hidden but we ll overlay a link to the full gallery page on top of the gallery so clicking it will bring users through to a traditional HTML gallery page. Let s start our slideshow enhancements with the CSS 128 jQuery Novice to Ninja chapter_04 15_iphoto_style_slideshow excerpt photos border 1px solid BEBEBE height 400px overflow hidden position relative width 400px photos ul left 0 list-style-type none margin 0 padding 0 position absolute top 0 width 2400px photos li float left photos .trigger left 0 position absolute top 0 z-index 10 text-indent -9999px height 400px width 400px display block Starting with the container div we set up the display constraints. Our images are 400 pixels square so that s the dimensions for our container. Should the images have been of varying sizes you could simply set the container s proportions to the size of the largest image it would need to contain. The overflow hidden means that none of our thumbnails will peek through unexpectedly. For our unordered list of images we control the .

1    4    0    14-08-2020
152    6    0    14-08-2020
30    3    0    14-08-2020
36    6    0    14-08-2020
423    13    0    14-08-2020
59    10    0
1    4    0
1    2    0
4    5    0
45    10    0