dzwoni jQuery supersized plugin onclick

Question

Próbuję zadzwonić do supersized plugin (http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/) onclick, do tej pory, gdy klikam na moi zmierzających menu obrazy zostaną zmienione, ale wygląda na to znaczniki HTML zbudowany przez supersized nie dostać odbudować, teraz mam to:

html wich wywołuje brązowy function() 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 gdzie echo odpowiedź ajax:

<div id="script"> 

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

</div> 

brwi() jest funkcją ajax:

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

     } 

następnie plik ajax.php ładuje swoją zawartość do #script 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..... 

więc obrazy są aktualizowane po kliknięciu na pierwszą czas w menu, ale jeśli kliknę inny tytuł menu, obrazy również zostaną zaktualizowane, ale pokaz slajdów zacznie się psuć, wygląda na to, że znaczniki html nie są odbudowywane, gdy używam tylko jednego obrazu na tytuł menu (tylko jeden obraz w tablicy o zwiększonej rozdzielczości) nie jest problemem. R.

Answer 1

Zamiast powrocie cały skrypt z PHP, możesz po prostu odesłać tagów graficznych (jak

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

...). Następnie w wywołaniu powodzenia ajax w miejsce - $ ('# script'). Html (dane); - można zrobić

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

Answer 2

wierzę, że jest to metoda, która ustawia wszystko $.supersize.resizenow się, czy próbowałeś nazywając to?

W przypadku braku tego, czy masz link, do którego można uzyskać dostęp z internetu, gdy próbujesz tego, więc mógłbym rzucić okiem?

Answer 3

Czy próbowałeś odłączyć wydarzenie przed dołączeniem nowego? tak:

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; 

Można to zrobić ponieważ plugin wiąże zdarzenia do okna, a nawet jeśli usuniesz poprzednią html utworzony przez wtyczkę stare zdarzenie jest nadal zbindowanych i pożary dwukrotnie.

Powiedz mi, jeśli zauważy żadnej różnicy

EDIT - patrzę na kod wtyczki. Problemem jest, jak sądzę, w poleceniu na linii 16:

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

funkcja nazywa się w danym przedziale, a jeśli nie jest zaznaczone, kiedy ponownie wywołać wtyczkę, nowy przedział jest ustawiona, a więc masz problemy z czasem. Możesz poprawić wtyczkę w ten sposób. Zamiast

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

umieścić

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

Co robisz jest zapisać odniesienie do setInterval() rozmowy i wtedy jasne, że odniesienie przy następnym wywołaniu wtyczkę.

Używa dwóch zmiennych globalnych, które są złe, ale jeśli rozwiąże problem, mogę pomóc w przepisaniu tego bez użycia globali.

P.S. dlaczego nie zaktualizujesz wersji wtyczki?

Answer 4

przed dodaniem nowego skryptu z

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

próby wywołania w ten sposób:

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

metoda następnie powinna wyglądać następująco:

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 5

Dlaczego nie można po prostu załadować wszystkie zestawy i pokazać/ukryć je w razie potrzeby?

<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>