jQuery billed problem

Det ser ud som om du glemmer eksplicit height på et element. Prøv lige at uploade koden et sted så man kan se den virke, og giv et link.

for et stykke tid siden prøvede jeg at lave noget lignede for en kunde.
Jeg havde dog problemer med at mine billeder blev nogle grimme størrelser alt efter hvordan vinduet var sized (widescreen osv.) så jeg lavede et jQuery plugin til det:

 (function($){
     $.fn.resizeTo = function(id) {
         var fetchElement = $(id);
         if ($(fetchElement).length==1){
             this.each(function(){
                 var aspectRadio = $(this).height() / $(this).width();
                 if (aspectRadio < ($(fetchElement).height()/$(fetchElement).width())){
                     $(this).height($(fetchElement).height());
                     $(this).width($(this).height() / aspectRadio);
                 } else {
                     $(this).width($(fetchElement).width());
                     $(this).height($(this).width() * aspectRadio);
                 }
             });
         }
     };
 })(jQuery);

koden skulle virke og bliver kaldt sådan: $(element).resizeTo('#slideshow') hvis det er dit slideshow du vil have elementet skal fitte.
Derud over er du nød til at have de rigtige CSS instillinger på elementet:

 #slideshow {
     width:100%;
     height: 100%;
     position:fixed;
     top:0;
     left:0;
     z-index:1;
     overflow:hidden;
 }

jeg brugte følgende og satte mine billeder til at floate og cleare left.

Dog er det også vigtigt at du tilføjer dette til din css også:

 html, head {
     height:100%;
 }

da du ellers ikke vil kunne bruge height:100% på dit element.

til slut vil jeg foreslå dig at måske extende det jQuery plugin til at bruge resizeTo functionen hver gang nyt billede bliver loadet. At sætte display:none; på elementer som ikke vises. og måske lave en event listener på window.resize som resizer dit ligenu visende billede.

hvis du vil er du mere end velkommen til at kigge på min kode her: http://www.annae.dk/html/index2.html og du tager bare så meget du lyster af koden.

Det ser ud som om du glemmer eksplicit height på et element. Prøv lige at uploade koden et sted så man kan se den virke, og giv et link.

Enig, for at uddybe yderligere har du et div:

<div style='width:720px;height:210px; id="slideshow" />


Du smider billeder ind i der er meget højere.

Enten skal du forsøge, som jeg tror Jesper mener, at sætte en højde på billedet, så det går ud over kanterne på det div, som jeg formoder ikke har overflow hidden.

Dog ville jeg i stedet, løse det gennem CSS - det kan være svært at have et større div bagved andet indhold, som der indeholder links med diverse events. Men jeg tror dit store problem ligger i den højde på det div. Så brug chancen til at lære lidt CSS, så du kan have semantisk markup, og samtidigt benytte de forskellige plugins og javascript funktioner der kan hentes.

Ellers ja, kom med et online eksempel.

/J

Hey,

Jeg fik det til at virke, kan ikke engang huske hvordan. Troede egentlig jeg fik lukket tråden, men det kan jeg jo se jeg ikke gjorde.

Jeg brugte Lindstrøms eksempel og det virker fint. Nu har jeg bare det nye problem her.

Hvis jeg har et billede som er tæt på 1:1 i aspect ratio (pt. har jeg 2 test billeder på 10:9 og 10:6,5), så tager mit resize script (som er det fra Lindtrøm, mange tak) jo højde for dette. Sådan at hvis det i et tilfælde af resize ville blive større mindre, så holder den forholdet så billedet ikke kommer til at se skævt ud.

Det bivirker jo desværre at når billedet er næsten 1:1 og det skal omskaleres til ex. 16:9 så vil kun toppen af billedet være synligt (klart da der er meget mere bredde i en WideScreen end højre, så for at kompensere for den store bredde bliver billedet jo også meget højt, også meget højere en skærmen kan vise). Dette er desværre meget problematisk.

Nogen idéer ud over at lave nogle 16:9, 16:10 og 1:1 billeder?