CODEWITHSUNDEEP
javascripthtml
Godfather
Godfather

Reputation: 227

Load images with select list in Div tag

I would like to load picture in div tag with select list, when I click on Picture 1, Picture 1 to load. When I click on Picture 2, Picture 2 to load... And, when, for example, Picture 1 is loaded and when press Next button Picture 2 to load...I tried in many ways but I failed.

<select id="mypicture" class="dropdown">
<option value="">Choose picture...</option>
<option value="1">Picture 1</option>
<option value="2">Picture 2</option>
<option value="3">Picture 3</option>
<option value="4">Picture 4</option>          
       </select>

Here is my code

Upvotes: 1

Views: 2390

Answers (3)

motatoes
motatoes

Reputation: 926

I can think of two ways to do this:

Option 1

Add a img tag to your div. for every change to your dropdown, you can change the src of the img tag accordingly.

Example: http://jsfiddle.net/MfPyU/

Option 2

This is my preference, you can create a new img tag dynamically using JS. The benefit of this in my opinion is you can add an onload event listener to the image and display text such as 'loading' while the image loads.

Example: http://jsfiddle.net/QW4Sp/

Upvotes: 1

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

You need to create a new img and append it to the div.

Javascript

$(document).ready(function() {
    var pictures = ["https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQYN2T3dktBEDIuwIuosj8ulzlwGod-KabDTy2vBFC-Kht_u4ep","https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQgBLpqp92lc7JQiNszqO_ZP52OymeqShqxqcrlUDcae9UaTTLtfQ", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS99xzsoRm3g0nckrH-SjfgSe8zgeYSCgc23IqtbtocZo3sjZN2gA", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBLBxc5mMj9WbV9ghIyfpmOfVdt0qyIe21f8HBlqwvVoGgCxQucA"];
    $(".nextbutton").button({ disabled: true });

    $('.dropdown').change(function() {
        var value = $('.dropdown').val();
        if (value== 0) {
          $(".prevbutton").button({ disabled: true });
        } else if (value == 1) {

          $(".prevbutton").button({ disabled: true });
          $(".nextbutton").button({ disabled: false });
        } else if (value == 4) {
          $(".nextbutton").button({ disabled: true }); 
        } else {
          $(".nextbutton").button({ disabled: false });
          $(".prevbutton").button({ disabled: false });
        }

        //Emptys picture div and appends image
        $("#picture").empty();
        $("#picture").append($("<img/>",{src: pictures[value-1]}));
    });
$(".prevbutton").button({ disabled: true });

});
$("#next").click(function() {
  var nextElement = $('#mypicture > option:selected').next('option');
  if (nextElement.length > 0) {
    $('#mypicture > option:selected').removeAttr('selected').next('option').attr('selected', 'selected');
  $('.dropdown').trigger('change');      
  }
});

$("#prev").click(function() {
  var nextElement = $('#mypicture > option:selected').prev('option');
  if (nextElement.length > 0) {
    $('#mypicture > option:selected').removeAttr('selected').prev('option').attr('selected', 'selected');
  $('.dropdown').trigger('change');        
  }  
});

HTML

     <select id="mypicture" class="dropdown">
<option value="">Choose picture...</option>
<option value="1">Picture 1</option>
<option value="2">Picture 2</option>
<option value="3">Picture 3</option>
<option value="4">Picture 4</option>          
       </select>
<hr>
<button id="prev" class="prevbutton">Previous</button>
<button id="next" class="nextbutton">Next</button>
 <hr>
<div id="picture">
</div>

Working Example: http://jsfiddle.net/Wdw4z/3/

Upvotes: 0

Rodik
Rodik

Reputation: 4092

You are missing the actual image display in your code.

What you need to do, is after you reconfigure all the buttons in your change event handler, you need to display an image.

$('div').html('<img src="'+imgUrl+'">');

and you need to set the imgUrl depending on the value of the select, or have the url on the option element so you can retrieve it like so:

<option value="1" data-imgurl="imgs/img1.jpg">

I have updated your fiddle with another solution http://jsfiddle.net/Wdw4z/1/

Upvotes: 1

Related Questions