Versuchen zu tun, Fenster Größe ändern mit jquery-cycle-slideshow

Ich versuche zum ausführen einer JavaScript-window-resize-Skript auf eine Seite mit jQuery-cycle-slideshow, aber ich bin man ein paar Fehler, die ich kann nicht scheinen zu erarbeiten. Es ändert das erste Bild problemlos auf die Seite laden, aber dann vergisst die neue Breite/Höhe-Attribute für die nachfolgenden Folien. Ich kann diese wieder auf die vor und nach der Verwendung von jQuery, aber die Bilder immer flash in voller Größe für einen kurzen moment, bevor Sie die Größe ändern.

Ist jQuery.Zyklus ändern der Größe der Folien zurück zu Ihrer ursprünglichen Größe? Wenn ja, wie verhindere ich das?

$(document).ready(function () {
  $('.slideshow').cycle({
    fx: 'fade',
    speed: 200,
    timeout: 1000,
    pause: 1,
    before: function (currSlideElement, nextSlideElement, options, forwardFlag) {
      resize();
    },
    after: function (currSlideElement, nextSlideElement, options, forwardFlag) {
      resize();
    }
  });

  $('.slideshow').find('img').css("height", "0");
  $('#image').hide().idle(1000).fadeIn();
  resize();
});

$(window).resize(function () {
  resize();
});

function resize() {

  var theheight = window.innerHeight;
  var thewidth = window.innerWidth;

  var imageheight = theheight - 200;

  if (imageheight > 540) {
    imageheight = 540;
  }
  if (imageheight < 300) {
    imageheight = 300;
  }

  var imagewidth = imageheight / 0.6585365;

  $(".slide").css("height", imageheight);
  $(".slide").css("width", imagewidth);
  $(".slide").attr("height", imageheight);
  $(".slide").attr("width", imagewidth);

}

Hi - könnte bitte senden Sie eine komplette Lösung? Ich kann nicht herausfinden, wie man kombinieren die Quelle hier, um die Größenänderung zu arbeiten! Danke!

InformationsquelleAutor James | 2010-02-02

18

Sieht es aus wie Zyklus speichert die dia-container-element, Breite-und Höhe-einmal, wenn Sie zuerst ihn nennen, und legt dann die eingehenden Folie, um jene Dimensionen, egal was Ihre Größe ändern Skript tut.

Ich hatte das gleiche Thema vor kurzem: die Kombination der Optionen
```
$slideshow.cycle({ 
  containerResize: false,
  slideResize: false,
  fit: 1
});
```
und
```
.yourslide { width: yourwidth !important }
```
arbeitete für mich. Der Schlüssel war die Passform:1-die Art und Weise der Dokumentation beschreiben Sie es machen es scheinen, wie genau das, was ich nicht wollte, aber es erzeugt den gewünschten Effekt. Kann es nicht erklären, leider.
- Arbeitete für mich auch.
InformationsquelleAutor RobW
1

Dieser arbeitete für mich, die in ähnlichen Situationen:
```
$(window).resize(function(){
$('.lr-slider').each(function(){
    newWidth = $(this).parent('div').width()
    $(this).width(newWidth)
    $(this).children('div').width(newWidth)
})
})
```
Punkte zu beachten:
1. .lr-regler ist der div contianing der Dias, dies ist amde zu unterstützen mulitple sldieshows
2. In diesem Fall .lr-regler, erbt es die Breite vom parent-element in css, also ich bin Neuerstellung dieses in jQuery auf ein Fenster resize-Ereignis
3. Die Folien sind alle div-Elemente ohne Klassen oder IDS. Sie können es vorziehen, um diese besser trargeted für Ihre eigenen verwenden, so können Sie explizit Bezug zu einer Klasse.
InformationsquelleAutor daveyfaherty

Macht diese Arbeit für Sie?

In die Optionen, dann fügen Sie diese:

cssBefore: {  
    top:  0, 
    left: 0, 
    width: wwidth, 
    height: wheight,  
    zIndex: 1  
}

Und für die Größe ändern, fügen Sie ein paar Variablen zu entsprechen, die festgelegt auf eine Größe:

var wheight, wwidth;
function resize() {
  wheight = Math.Min(window.innerHeight - 200, 540);
  wwidth = Math.Min(window.innerWidth, 300) / 0.6585365;
  $(".slide").width(wwidth).height(wheight);
});

Keinen Grund zu nennen, das in before: und after: mehr, nur einmal onload und in $(window).resize().

InformationsquelleAutor Nick Craver

0

Dank Nick, das war ein Schritt in die richtige Richtung. Ich habe es geschafft, es funktioniert mit der unten. Seltsam das es nicht funktioniert, wenn I dont haben animIn: Höhe/Breite auf einen anderen Wert eingestellt, als Sie in cssBefore: Alle Ideen auf, die?
```
 $('.slideshow').cycle({ 
    fx: 'custom', 
    speed: 200,
    timeout : 1000,
    pause:  1,
    cssBefore: {  
       left: 0,  
       top:  0,  
       width: imagewidth,  
       height: imageheight,  
       opacity: 0, 
       zIndex: 1 
   }, 
   animOut: {  
       opacity: 0  
   }, 
   animIn: {  
       left: 0,  
       top:  0,  
       width: imagewidth +1,  
       height: imageheight +1,  
       opacity: 1, 
       zIndex: 1  
   }, 
   cssAfter: {  
       zIndex: 0 
   }
});
```
- Hallo Jungs, bitte kommentieren Sie Ihren code für uns die newbs... ich bin fallen in das gleiche Problem. Tut CssBefore vermeidet die "kommen zurück auf die ursprüngliche Größe" - Sache? Danke.
- Ich habe meinen Weg gefunden, mit herkömmlichen CSS wie es hier erklärt stackoverflow.com/questions/3273137/... (Sie müssen hinzufügen "!wichtige" Erklärung zu vermeiden, die Rückkehr zu den ursprünglichen Größen). Ein weiterer interessanter Artikel, wenn Sie wollen, um die Größe des cycle-plugin abhängig von der Bildschirmauflösung des Benutzers, ist hier zu finden css-tricks.com/resolution-specific-stylesheets
- Hi - könnte bitte senden Sie eine komplette Lösung? Ich kann nicht herausfinden, wie man kombinieren die Quelle hier, um die Größenänderung zu arbeiten! Danke!
InformationsquelleAutor James
0

egal was ich eingefügt in den Kreislauf mit option für mich gearbeitet (versucht '100%' oder 'auto'), so löste ich das problem über css
```
.slideshowContainer {
    width: auto !important;
}
```
btw. 100% !wichtig tun würde, das gleiche trick. also die .slideshowContainer dauern wird, 100% der Breite des umgebenden Elements..

InformationsquelleAutor honk31

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.