1

first of all I'm a designer with little to no knowledge in jquery. I'm usually able to do research and find scripts that do what I want and then change them a bit. But this time I already did research for 4 days and still can't find anything that is close enough to what I'm looking for.

Currently I use this script:

   $(function(){
      $(".img-swap").live('click', function() {

        if ($(this).attr("class") == "img-swap") {
          this.src = this.src.replace("_1","_2");
        } else {
          this.src = this.src.replace("_2","_3");
        }
        $(this).toggleClass("on");
      });
    });

I have single images on the website. On click the image should be replaced like this:

I have folders with a max of 10 images. They are named 'projectxyz_01.jpg' etc. What I need now is a script that on click replaces 'project_xyz_01.jpg' with 'project_xyz_02.jpg' and so on. If there is no more picture in the folder go back to the first one. It would be nice if the images fade.

The script I currently use does only work to go from 1-3 of course, doesn't fade and doesn't go back to the first image.

This is the image container:

        <div class="slideshow_querformat">
            <img src="images/mmd/mmd_test_01.jpg" class="img-swap" border="0" alt="social media webcalender" title="Klicken, um die nächste Arbeit zu sehen." />
        </div>

This is the css part:

   .slideshow_querformat { 
width:60.25%;
min-width:700px;
height:auto;
margin: 0 auto 0 auto;
text-align:center;
position:relative;
z-index:999;
    }

   .slideshow_querformat img { 
max-width:100%;
max-height:100%;
cursor:pointer;
margin-left:16px;
    }
4

5 に答える 5

0

このようなものが必要になります

$(function(){
  $(".slideshow_querformat").on('click', '.img-swap', function() {
    var self = this,
        file = this.src,
        common = file.substring(0, file.length-6)
        currentId =  +file.substr(-6,2),
        id = ('0' + (currentId+1)).substr(-2),
        nextimage= new Image();

    nextimage.onload = function(){
       // image was preloaded so it exists
       var img = this;
       $(self).fadeOut(300, function(){self.src = img.src; $(self).fadeIn(300)});
    };
    nextimage.onerror = function(){
       // error occured while preloading. we assume image does not exist
       $(self).fadeOut(300, function(){self.src = common+ '01.jpg'; $(self).fadeIn(300)});
    };
    nextimage.src = common + id + '.jpg';
  });
});

http://jsfiddle.net/gaby/3PFGF/のデモ (エラー ケースを紹介していません)

このスクリプトが行うことは、新しい画像をプリロードしようとすることです。成功すると、現在の画像がフェードアウトし、src属性が交換され、新しい画像がフェードインします。

エラーが発生した場合 (画像が存在しないと理解しています)、名前を 01 に設定し、それにフェードインをロードします..

.live()非推奨の代わりに使用する必要がありますが、効率的な使用方法の提案が必要な場合は、.on()もう少し html (イメージのコンテナー) を提供する必要があります。

于 2013-01-02T17:14:32.717 に答える
0

これを使用して画像を交換できます。ここで、total はフォルダ内にある画像の総数になります。

<script type="text/javascript">


   $(function(){
      count = 1;
      total = 4;


      $(".img-swap").on('click', function() {

        $(this).fadeOut(400, function() {
            $(this).attr('src', 'projectxyz_0' + count + '.jpg');
        }).fadeIn(400);

        count ++;

        if(count > total) {
            count = 1;
        }

      });
    });
</script>
于 2013-01-02T17:16:14.070 に答える
0

画像をフェードさせるには、setTimeout 関数で「fadeOut」を使用してみてください...このようなもの...

setTimeout(function(){$("your_image_id").fadeOut("fast");},2000);

ここで 2000 はオプションです。必要に応じて作成できます...低速にしたい場合は、高速ではなく「低速」を使用します...

最初の画像を取得するには... チェックを入れます... このように...

if($(this).attr('src') == 'project_xyz_10.jpg') {
  this.src = this.src.replace("_10","_1");
}

効くかも…

于 2013-01-02T17:04:00.217 に答える