Howdy_McGee Posted September 8, 2010 Share Posted September 8, 2010 I've been looking at this code for awhile and I can't seem to find the one thing that is pushing the images down. If you copy this code exactly you should see the same affect I am:As you step through the scroller, the images slowly get pushed down, but as you get back to the orig. src of where the scroller started it pops back up. IDK I'm thinking it's in the javascript. <?xml verion="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Testum</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> </head><body><style type="text/css" media="screen"> .infiniteCarousel { width: 100px; position: relative;} .infiniteCarousel .wrapper { width: 400px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */ overflow: auto; min-height: 180px; margin: 0 40px; position: absolute; top: 0; background-color: green;} .infiniteCarousel ul a img { border: 5px solid #000; -moz-border-radius: 5px; -webkit-border-radius: 5px;} .infiniteCarousel .wrapper ul { width: 5000px; list-style-image:none; list-style-position:outside; list-style-type:none; margin:0; padding:0; position: absolute; min-height: 261px; left: 230; top: 0;} .infiniteCarousel ul li { display:block; float:left; padding: 10px; height: 200px; width: 200px;} .infiniteCarousel ul li a img { display:block; margin-top: 0px;} .infiniteCarousel .arrow { display: block; height: 36px; width: 37px; position: absolute; top: 37px; cursor: pointer;} .infiniteCarousel .forward { background-position: 0 0; left: 227px; background: url(http://www.phys.vt.edu/~demo/images/Mis/arrow.GIF) no-repeat 0 0;} .infiniteCarousel .back { background-position: 0 -72px; background: url(http://www.phys.vt.edu/~demo/images/Mis/arrow2.GIF) no-repeat 0 0;} </style> <script type="text/javascript"> $.fn.infiniteCarousel = function () { function repeat(str, num) { return new Array( num + 1 ).join( str ); } return this.each(function () { var $wrapper = $('> div', this).css('overflow', 'hidden'), $slider = $wrapper.find('> ul'), $items = $slider.find('> li'), $single = $items.filter(':first'), singleWidth = $single.outerWidth(), visible = Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn't include padding or border currentPage = 1, pages = Math.ceil($items.length / visible); // 1. Pad so that 'visible' number will always be seen, otherwise create empty items if (($items.length % visible) != 0) { $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible))); $items = $slider.find('> li'); } // 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned')); $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned')); $items = $slider.find('> li'); // reselect // 3. Set the left position to the first 'real' item $wrapper.scrollLeft(singleWidth * visible); // 4. paging function function gotoPage(page) { var dir = page < currentPage ? -1 : 1, n = Math.abs(currentPage - page), left = singleWidth * dir * visible * n; $wrapper.filter(':not(:animated)').animate({ scrollLeft : '+=' + left }, 500, function () { if (page == 0) { $wrapper.scrollLeft(singleWidth * visible * pages); page = pages; } else if (page > pages) { $wrapper.scrollLeft(singleWidth * visible); // reset back to start position page = 1; } currentPage = page; }); return false; } $wrapper.after('<a class="arrow back"></a><a class="arrow forward"></a>'); // 5. Bind to the forward and back buttons $('a.back', this).click(function () { return gotoPage(currentPage - 1); }); $('a.forward', this).click(function () { return gotoPage(currentPage + 1); }); // create a public interface to move to a specific page $(this).bind('goto', function (event, page) { gotoPage(page); }); }); }; $(document).ready(function () { $('.infiniteCarousel').infiniteCarousel();}); </script> </head> <body> <h1>Image Loop De'Loop</h1> <div class="infiniteCarousel"> <div class="wrapper"> <ul> <li><a href="#"><img src="http://rlv.zcache.com/boobies_make_me_smile_funny_tee_shirt-d2355562171249449727c6n_150.jpg" width="150" height="150" /></a></li><br /> <li><a href="#"><img src="http://www.downloadsoftware4free.com/screen/thumb/MSN-funny-msn-display-picturesmsn-display-pictures.jpg" width="150" height="150" /></a></li><br /> <li><a href="#"><img src="http://facebook.topchina.info/wp-content/uploads/2009/09/funny-facebook-status-ideas-150x150.jpg" width="150" height="150" /></a></li><br /> <li><a href="#"><img src="http://www.wordsellinc.com/wp-content/uploads/funny-teeth-150x150.jpg" width="150" height="150" /></a></li><br /> <li><a href="#"><img src="http://www.everytshirt.com/Images/products/Funny_T-shirts/LMAO-Funny-T-shirt.jpg" width="150" height="150" /></a></li><br /> <li><a href="#"><img src="http://z.about.com/d/politicalhumor/1/0/w/v/2/bush-flips-bird-sm.jpg" width="150" height="150" /></a></li><br /> <li><a href="#"><img src="http://www.glogster.com/media/1/2/60/25/2602521.png" width="150" height="150" /></a></li><br /> </ul> </div> </div> </body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted September 8, 2010 Share Posted September 8, 2010 I don't think having two</head><body> will help Link to comment Share on other sites More sharing options...
Howdy_McGee Posted September 10, 2010 Author Share Posted September 10, 2010 lol No definitely not :S --- Still pulling the images down though Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.