Okay。 因此,我写了一篇少许的“Query gallery scroller”的演讲。 它精彩地在北纬角开展工作,但在 Chrome或沙捞中则做 t。
这里指的是:
http://thehousinggroup.info/our-gallery/bathroom-renovations/gallery-1/
Here:
var imageQuantity = $( .galleryBox img ).size() //finds the number of images
var wrapWidth = imageQuantity * 610 + px //sets inner wrapper to image width*no. of images
//Formating
$( .galleryBox img )
.hide()
.unwrap()
.wrapAll( <ul></ul> )
.wrapAll( <div id="innerWrap"></div> )
.wrap( <li></li> );//wraps images in ul and div, strips off the <p> that WordPress adds
$( #innerWrap ).css({
width : wrapWidth,
position : relative
});
$( .galleryBox ).css({ overflow : hidden }); //this css will be relegated to the stylesheet eventually...
$( .galleryBox ul ).css({ list-style : none });
$( .galleryBox li ).css({
float : left ,
margin-right : 10px
});
$( .galleryBox img ).show(); //shows the images once the formatting is complete
//Scroll Controls
var currentNumber = 1; //this is for the "1 of 4" counter
var fullNumber = imageQuantity;
$( #innerWrap ).before( <p id="scroller"><a id="prevButton" href="">previous</a> <span id="currentNumber"> + currentNumber + </span> of + fullNumber + <a id="nextButton" href="#">next</a></p> ); //this places the next, previous, and 1 of # counter buttons
$( #nextButton ).click(function(event){
event.preventDefault();
var wrapPosition = parseInt($( #innerWrap ).css( right ));
var stopPoint = (fullNumber-1)*610;
if(wrapPosition < stopPoint) { //sets the scrolling to stop at last image
$( #innerWrap ).animate({ right : "+=610px"});
++currentNumber;
$( #currentNumber ).empty().html(currentNumber); //sets the counter to the proper number
}
});
$( #prevButton ).click(function(event){ //same as above, reversed out for the previous button
event.preventDefault();
var wrapPosition = parseInt($( #innerWrap ).css( right ));
var stopPoint = (fullNumber-1)*610;
if(wrapPosition > 0) {
$( #innerWrap ).animate({ right : "-=610px"});
--currentNumber;
$( #currentNumber ).empty().html(currentNumber);
}
});
我会把 c放在风格上,但现在又是如何建立的。 如果你再听说过的话,我!
感谢。