1

我正在使用 Malihu 的 Sideways 画廊的第一个版本，当我点击它时，我想让大图像淡入下一个。不幸的是，我不擅长 jQuery ......

这是 HTML（只有 4 张图片的示例）：

<div id="bg">
    <img src="images/galerie/photo2.jpg" height="500" title="1" id="bgimg" />
    <div id="img_title">1</div></div>
<div id="preloader">
    <img src="images/ajax-loader_dark.gif" width="32" height="32" /></div>
<div id="img_title"></div>


<div id="outer_container">
  <div id="thumbScroller">
    <div class="container">
      <div class="content">
        <div><a href="images/galerie/photo1.jpg"><img src="images/galerie/thumbs/photo1.jpg" title="1" class="thumb" />
        </a></div>
      </div>
      <div class="content">
        <div><a href="images/galerie/photo2.jpg"><img src="images/galerie/thumbs/photo2.jpg" title="2" class="thumb" />
        </a></div>
      </div>
      <div class="content">
        <div><a href="images/galerie/photo3.jpg"><img src="images/galerie/thumbs/photo3.jpg" title="3" class="thumb" />
        </a></div>
      </div>
      <div class="content">
        <div><a href="images/galerie/photo4.jpg"><img src="images/galerie/thumbs/photo4.jpg" title="4" class="thumb" />
        </a></div>
      </div></div>
    </div>
  </div>

这是jQuery：

$outer_container=$("#outer_container");
$thumbScroller=$("#thumbScroller");
$thumbScroller_container=$("#thumbScroller .container");
$thumbScroller_content=$("#thumbScroller .content");
$thumbScroller_thumb=$("#thumbScroller .thumb");
$preloader=$("#preloader");
$toolbar=$("#toolbar");
$toolbar_a=$("#toolbar a");
$bgimg="#bgimg";

$(window).load(function() {
    sliderLeft=$thumbScroller_container.position().left;
    padding=$outer_container.css("paddingRight").replace("px", "");
    sliderWidth=$(window).width()-padding;
    $thumbScroller.css("width",sliderWidth);
    var totalContent=0;

    //get content width
    $thumbScroller_content.each(function () {
        var $this=$(this);
        totalContent+=$this.innerWidth();
        $thumbScroller_container.css("width",totalContent);
    });

    //content scrolling
    $thumbScroller.mousemove(function(e){
        if($thumbScroller_container.width()>sliderWidth){
            var mouseCoords=(e.pageX - this.offsetLeft);
            var mousePercentX=mouseCoords/sliderWidth;
            var destX=-(((totalContent-(sliderWidth))-sliderWidth)*(mousePercentX));
            var thePosA=mouseCoords-destX;
            var thePosB=destX-mouseCoords;
            var animSpeed=600; //ease amount
            var easeType="easeOutCirc";
            if(mouseCoords>destX){
                //$thumbScroller_container.css("left",-thePosA); //without easing
                $thumbScroller_container.stop().animate({left: -thePosA}, animSpeed,easeType); //with easing
            } else if(mouseCoords<destX){
                //$thumbScroller_container.css("left",thePosB); //without easing
                $thumbScroller_container.stop().animate({left: thePosB}, animSpeed,easeType); //with easing
            } else {
                $thumbScroller_container.stop();
            }
        }
    });

    //thumbnails mouse over/out & initial state
    var fadeSpeed=200;

    $thumbScroller_thumb.each(function () {
        var $this=$(this);
        $this.fadeTo(fadeSpeed, 0.4);
    });

    $thumbScroller_thumb.hover(
        function(){ //mouse over
            var $this=$(this);
            $this.fadeTo(fadeSpeed, 1);

        },
        function(){ //mouse out
            var $this=$(this);
            $this.fadeTo(fadeSpeed, 0.4);


        }
    );

    //on window resize scale image and reset thumbnail scroller
 $(window).resize(function() {
  FullScreenBackground($bgimg);
  $thumbScroller_container.stop().animate({left: sliderLeft}, 400,"easeOutCirc");
  var newWidth=$(window).width()-padding;
  $thumbScroller.css("width",newWidth);
  sliderWidth=newWidth;
 });

 FullScreenBackground($bgimg); //scale 1st image
});

$($bgimg).load(function() {
 $preloader.fadeOut("fast"); //hide preloader
 var $this=$(this);
 $this.removeAttr("width").removeAttr("height").css({ width: "", height: "" });
 FullScreenBackground($this);
 var imageTitle=$("#img_title").data("imageTitle");
 if(imageTitle){
  $this.attr("alt", imageTitle).attr("title", imageTitle);
  $("#img_title").html(imageTitle);
 } else {
  $("#img_title").html($(this).attr("title"));
 }
 $this.fadeIn("slow"); //fadein background image
 });

//mouseover toolbar  

$toolbar.fadeTo("fast", 0.4);  

$toolbar.hover(  

 function(){ //mouse over  

  var $this=$(this);  

  $this.stop().fadeTo("fast", 1);  



},  

 function(){ //mouse out  

  var $this=$(this);  

  $this.stop().fadeTo("fast", 0.4);  

 }  

);  
//Clicking on thumbnail changes the background image
$("#outer_container a").click(function(event){
 event.preventDefault();
 $preloader.fadeIn("fast"); //show preloader
 var $this=$(this);
 var title_attr=$this.children("img").attr("title"); //get image title attribute
 $("#img_title").data("imageTitle", title_attr); //store image title
 $($bgimg).css("display","none").attr("src", this); //change image source
}); 


//Image scale function
function FullScreenBackground(theItem){
var winWidth=$("div#silh").width();           
var winHeight=($("div#silh").height()-208+'px');
var imageWidth=$(theItem).width();
var imageHeight=$(theItem).height();
var picHeight = imageHeight / imageWidth;
var picWidth = imageWidth / imageHeight;
if($toolbar.data("imageViewMode")=="full"){ //fullscreen size image mode
 if ((winHeight / winWidth) < picHeight) {
  $(theItem).css("width",winWidth);
  $(theItem).css("height",picHeight*winWidth);
 } else {
  $(theItem).css("height",winHeight);
  $(theItem).css("width",picWidth*winHeight);
 };
} else { //normal size image mode
 if ((winHeight / winWidth) > picHeight) {
  $(theItem).css("width",winWidth);
  $(theItem).css("height",picHeight*winWidth);
 } else {
  $(theItem).css("height",winHeight);
  $(theItem).css("width",picWidth*winHeight);
 };
}
$(theItem).css("margin-left",(winWidth-$(theItem).width())/2);
$(theItem).css("margin-top",(winHeight-$(theItem).height())/2);
}


/*Image view mode function - fullscreen or normal size
function ImageViewMode(theMode){
 $toolbar.data("imageViewMode", theMode);
 FullScreenBackground($bgimg);
 if(theMode=="full"){
  $toolbar_a.html("<img src='toolbar_n_icon.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restore");
 } else {
  $toolbar_a.html("<img src='toolbar_fs_icon.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximize");
 }
}*/ 


    //browser resize
    $(window).resize(function() {
        //$thumbScroller_container.css("left",sliderLeft); //without easing
        $thumbScroller_container.stop().animate({left: sliderLeft}, 400,"easeOutCirc"); //with easing
        var newWidth=$(window).width()-padding;
        $thumbScroller.css("width",newWidth);
        sliderWidth=newWidth;
    });

在画廊的第二个版本中（更复杂，与我想要做的不对应），我想要的代码是这样的（但显然它不适用于第一个版本）：

//clicking on large image loads the next one

 $bgimg.click(function(event){
  var $this=$(this);
  if($bg.data("nextImage") && $bg.data("lastImageReached")!="Y"){ //if next image data is stored and last image is not selected
   $this.css("display","none");
   $preloader.fadeIn("fast"); //show preloader
   $($outer_container.data("selectedThumb")).children(".selected").css("display","none"); //deselect thumb
   $($outer_container.data("selectedThumb")).next().children(".selected").css("display","block"); //select new thumb
   //store new selected thumb
   var selThumb=$outer_container.data("selectedThumb");
   $outer_container.data("selectedThumb",$(selThumb).next());
   $bg.data("newTitle",$($outer_container.data("selectedThumb")).children("img").attr("title")); //get and store new image title attribute
   itemIndex++;
   $this.attr("src", "").attr("src", $bg.data("nextImage")); //switch image
  }
 });

我的在线画廊的完整示例在这里： http: //flore-gandiol.fr/marelle3/page3.html（尚未完成）

如果有人可以提供帮助，那就太好了！谢谢

4

0 回答 0