plugin - 호출 jQuery supersized 플러그인 onclick



jquery wiki (4)

PHP에서 전체 스크립트를 반환하는 대신 이미지 태그를 반환 할 수 있습니다 (예 :

<img src="images/image1.jpg" /><img src="images/image1.jpg" />

...). 그런 다음 - $ ( '# script') 대신에 아약스 성공 콜백에서. html (data); - 넌 할 수있어

$('#script').empty();
$('#script').html(data);
$('#script').supersized();

https://src-bin.com

나는 supersized plugin (http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/) onclick을 호출하려고하는데, 지금까지 내가 다른 메뉴를 클릭 할 때 이미지가 변경되고, 하지만 그것은 HTML 마크 업처럼 보이는 슈퍼마켓에 의해 빌드 재건, 지금은이있어 :

html로 함수를 호출합니다 brown () onclick :

<ul id="rooms_menu" style="display:none;">
<li><a href="javascript:;" onclick="brown()">menu title</a></li>
<p class="rooms_desc">description text</p>

html 내가 아약스 응답을 반향 :

<div id="script">

<script>$(function(){
        $.supersized({
                      slides    :   [
                     {image     : 'img/rooms-default.jpg'}
                     //{image     : 'img/rooms-default.jpg'}
                                    ]
                     })
                     })</script>

</div>

brow ()은 ajax 함수입니다.

 function brown(){
      $.ajax({
      url: 'ajax.php?action=brown',
      success: function(data){
        $('#script').html(data);
             }
           })

         }

ajax.php 파일은 내용을 #script div로로드합니다. div :

switch($_GET["action"]){
      case "brown":
      echo "<script>$(function(){
         $.supersized({
                   slides :     [
               {image  : 'img/rooms-brown-01.jpg'},
               {image  : 'img/rooms-brown-02.jpg'}
                            ]
                            })

                            })</script>";
      break;
      case "rose":  etc.....

그래서 메뉴에서 처음 클릭 할 때 이미지가 업데이트되지만 다른 메뉴 제목을 클릭해도 이미지가 업데이트되지만 슬라이드 쇼가 엉망이되기 시작합니다. HTML 마크 업이 재구성되지 않는 것처럼 보입니다. 메뉴 제목 (하나의 이미지 만 슈퍼 어레이로 표시)에는 문제가 없습니다. 아르 자형.


Answer #1

새 스크립트를 추가하기 전에

$('#script').html(data);

이 전화하려고 :

if($.supersized.vars.slideshow_interval){
  clearInterval($.supersized.vars.slideshow_interval);
}

방법은 다음과 같아야합니다.

function brown(){
  $.ajax({
    url: 'ajax.php?action=brown',
    success: function(data){
      if($.supersized.vars.slideshow_interval){
        clearInterval($.supersized.vars.slideshow_interval);
      }
      $('#script').html(data);
    }
  });

}

Answer #2

새 이벤트를 첨부하기 전에 이벤트 바인딩 해제를 시도 했습니까? 이렇게 :

switch($_GET["action"]){
      case "brown":
      echo "<script>$(function(){
         $(window).unbind("resize");//add this. you could also add         
                                     //$('#supersized').html('') to remove markup created by the plugin
         $.supersized({
                   slides :     [
               {image  : 'img/rooms-brown-01.jpg'},
               {image  : 'img/rooms-brown-02.jpg'}
                            ]
                            })

                            })</script>";
      break;

플러그인이 이벤트를 창에 바인드하고 플러그인에서 작성한 이전 html을 제거하더라도 이전 이벤트는 여전히 바인드되어 두 번 실행되므로이 ​​작업을 수행해야 할 수 있습니다.

어떤 차이가 있는지 알려주시겠습니까?

수정 - 플러그인의 코드를 보았다. 문제는 16 행의 명령에 있다고 생각합니다.

  setInterval("theslideshow()", options.slideinterval);

함수는 주어진 간격으로 호출되며, 지워지 지 않으면 플러그인을 다시 호출 할 때 새로운 간격이 설정되므로 타이밍에 문제가 있습니다. 이런 식으로 플러그인을 수정할 수 있습니다. 대신에

    if (options.slideshow == 1){
        setInterval("theslideshow()", options.slideinterval);
    }

놓다

        firstRunofThisPlugin = true;
    if (options.slideshow == 1){
                if (firstRunofThisPlugin){
                     firstRunofThisPlugin = false;
                }else{
                     clearInterval(linkToTheLastInterval);
                }
        linkToTheLastInterval = setInterval("theslideshow()", options.slideinterval);
    }

당신이하고있는 일은 setInterval () 호출에 대한 참조를 저장하고 다음 번에 플러그인을 호출 할 때 그 참조를 지우는 것입니다.

이것은 두 가지 전역 변수를 사용합니다. 그러나 문제가 해결되면 전역 변수를 사용하지 않고 다시 작성할 수 있습니다.

추신 : 플러그인의 버전을 업데이트하지 않으시겠습니까?


Answer #3

왜 모든 세트를로드하고 필요에 따라 세트를 보이거나 숨길까요?

<script>
  $(function(){
    function selectSet() {
      $(".set").hide();
      $(".set."+$(this).attr("id")).show();
    };
    $(".set.brown").each(selectSet);
  });
</script>

<a href="javascript:;" id="brown" onclick="selectSet()">Choose me!</a>
<a href="javascript:;" id="rose" onclick="selectSet()">No choose me!</a>

<div class="set brown">
  <script>
    $(function() {
      $.supersized({
        slides: [
          {image: 'img/rooms-1.jpg'},
          {image: 'img/rooms-2.jpg'}
        ]
      });
    });
  </script>
</div>

<div class="set rose">
  <script>
    $(function() {
      $.supersized({
        slides: [
          {image: 'img/rooms-3.jpg'},
          {image: 'img/rooms-4.jpg'}
        ]
      });
    });
  </script>
</div>




jquery-plugins