11 svar · 885 visningar · startad av Asa
Har följande kod som funkar bra.
<img id="imageToSwap" src="bild1.jpg" />
<br/><br/>
<select id="dd" onChange="swapImage()">
<option value="bild1.jpg">bild1.jpg</option>
<option value="bild2.jpg">bild2.jpg</option>
<option value="bild3.jpg">bild3.jpg</option>
</select>
<script type="text/javascript">
function swapImage(){
var image = document.getElementById("imageToSwap");
var dropd = document.getElementById("dd");
image.src = dropd.value;
};
</script>
Nu är det så att jag vill att denna kod skall funka så att min huvudbild ligger i en <ul><li>HÄR</li></ul> och jag kommer ha två värden i selectboxen så det måste splittas på nåt vis. Färg;Bild - Hur skall jag skriva då?!
Koden:
<ul>
<li><img id="imageToSwap" src="bild1.jpg" /></li>
</ul>
<br/><br/>
<select id="dd" onChange="swapImage()">
<option value="Vit;bild1.jpg">Vit</option>
<option value="Blå;bild2.jpg">Blå</option>
<option value="Grön;bild3.jpg">Grön</option>
</select>
<script type="text/javascript">
function swapImage(){
var image = document.getElementById("imageToSwap");
var dropd = document.getElementById("dd");
image.src = dropd.value;
};
</script>
Sen nästa problem:
Får inte detta att funka med följande bild slide:
http://amazingslider.com/examples/jquery-image-and-video-gallery-with-thumbnails/
dropd.value är en sträng, splitar på ";":
function swapImage(){
var image = document.getElementById("imageToSwap");
var dropd = document.getElementById("dd");
var values = dropd.value.split(";");
image.src = values[1];
alert(values[0]);
}
jquery plugin kör du nog när DOM trädet är redo och det är den DOM strukturen den kommer köra, vad försöker du göra med jquery pluginet?
Tackar för det :) Funkade fint! Nu till steg 2.
Bifogar filerna. Det får jag inte till alls att funka med amazing slider.
Nej här är rätt kod för sidan. Visa källan så ser ni:
http://www.textiltema.se/test.html
Här är det utan slide grejjen
http://www.textiltema.se/test_utan.html
vad du vill egentligen göra (gissar jag) är att använda sliderns bilder dvs triggar plugin:ets element?
Jag vill först och främst använda deras bildvisare med thums under som funkar som det gör på sidan. Sen vill jag ha in selectboxen så att stora bilden byts ut vid onchange i listan.
Jag är kass på javascript språk :/ Men hoppas du blev klokare?
typ:
$("#dd").on("change", function() {
$(".amazingslider-bullet-wrapper-0").children().eq(this.selectedIndex).trigger("click");
});
(jQuery < 1.7):
$("#dd").bind("change", function() {
$(".amazingslider-bullet-wrapper-0").children().eq(this.selectedIndex).trigger("click");
});
?
Är säkert rätt men hur funkar det då? Var skall koden in då?
Supertack! Verkar fungera finfint :) Så tur ni finns som kan!
Om jag lägger till en option i selectlisten med ex Välj färg så felar det och visas fel. Den tror att den första alltså är ett val och det vill jag inte. Hur gör jag då?
<select id="dd" onChange="swapImage()">
<option value=""> - Välj färg - </option>
<option value="Vit;items/350/produktID_183.jpg">Vit</option>
<option value="Grön;items/350/produktID_183_extra_371.jpg">Grön</option>
<option value="Blå;items/350/produktID_183_extra_372.jpg">Blå</option>
<option value="Röd;items/350/produktID_183_extra_373.jpg">Röd</option>
</select>
Jag testa själv och manskulle skriva -1 efter this.selectedIndex i denna koden märkte jag. Då funkade det :)
$("#dd").bind("change", function() {
$(".amazingslider-bullet-wrapper-0").children().eq(this.selectedIndex-1).trigger("click");
});