Bilder

7 svar · 559 visningar · startad av Heatseeker 22 jan. 2013

HeatseekerMedlem sedan jan. 201330 inlägg

Frågan22 jan. 2013 06:57#1

Har ytterligare problem med 3 bilder som jag kör till en slideshow.

HTML

<div id="wrap"> --har heigth:100%; till webläsaren--
<div id="content">

<ul id="slideshow">	 
<li><img src="img/img2.jpg" width="750" height="409" </li>
<li><img src="img/img1.jpg" width="750" height="409" /></li>
<li><img src="img/img3.jpg" width="750" height="409"  /></li>
</ul>

</div>
</div>

CSS

#slideshow{width:750px; height:409px; float:left; margin:10px 10px; overflow:hidden;
 position:absolute; z-index:0; list-style:none; padding:0;}
			
			

#slideshow ul{list-style:none; margin:0; padding:0;}

Jag skulle vilja att bilderna alltid är 100% till #slideshow. Så om jag minskar browsern så vill jag att bilderna ska minska även dom.

jag vill att:

 #content{width:100%;}
#slideshow{width:70%; height:40%;}

går det att lösa på något bra sätt genom att ändra nått i koden överst? Förklara gärna detaljrikt då jag inte är proffs på det här:)

voigtann1Medlem sedan juni 20019 519 inlägg

22 jan. 2013 07:06#2

Det beror lite på hur din slideshow fungera idag, om det bara är bild 1 fade out => bild 2 fade in så är det ju inte något större problem att fixa det, men om det är som en karusell (bilder flyger från från sida till sida) så spontant så känns det som att man måste lösa det med JS för att positionera bilder mm du kan ju titta på zurbs orbit, den fungera ihop med deras responsiva grid: http://foundation.zurb.com/docs/orbit.php

HeatseekerMedlem sedan jan. 201330 inlägg

22 jan. 2013 07:12#3

så här ser javascriptet ut som jag kör

<script type="text/javascript">$(function () { $('#slideshow').cycle ({fx:'fade', speed: 2000, timeout: 4000,});});
</script>

HeatseekerMedlem sedan jan. 201330 inlägg

22 jan. 2013 07:15#4

Och jag är till och med berädd att skippa fadeshown bara jag får till det här med bilden:)
Har du lust att förklra hur du tänker?

voigtann1Medlem sedan juni 20019 519 inlägg

22 jan. 2013 07:15#5

och vilket är cycle pluginet du använder dig av då(kan finnas flera plugin med samma namn)?

HeatseekerMedlem sedan jan. 201330 inlägg

22 jan. 2013 07:16#6

jquery.cycle.all.js
jquery-1.8.3.js

voigtann1Medlem sedan juni 20019 519 inlägg

22 jan. 2013 07:21#7

Det säger inte mycket, är det http://jquery.malsup.com/cycle/ du använder dig av? Länkar alltid till det plugin du använder dig av.

Sökte på jquery cycle och fick: http://stackoverflow.com/questions/7003290/making-a-jquery-cycle-plugin-become-responsive-to-the-layout-pixels (http://www.bluebit.co.uk/blog/Using_jQuery_Cycle_in_a_Responsive_Layout) kanske något för dig?

HeatseekerMedlem sedan jan. 201330 inlägg

22 jan. 2013 11:46#8

Tack så mycket. Efter lite letande så hittade jag det jag behöver:)