CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
Jordan
Jordan

Reputation: 25

Changing iFrame src with jQuery based on select menu

I'm trying to display a photosphere in a div, with the src being based on a value from a select menu.

The select menu will offer different rooms the user can view, and the div will hold an iFrame which displays the photosphere.

Here's what I have so far - it's broken (I'll explain below):

<!-- SCRIPT FOR PHOTOSPHERE-->
    <script>
        $(document).ready(function(){

            // SELECT MENU
            $("#mySelect").change(function(){
                var value = $(this).val();   

                //IFRAME TAG
                $("#myPhotoSphere").attr
                var src = ($(this).attr('src') === 'photosphere_example.png')   
                $(this).attr('src', src);

                // Classroom:
                if(value == "1")
                { $("#myPhotoSphere").attr("src","http://orb.photo/embedded_player.php?view=201712011cb4f0e032532a59807bea088f9ca145"); }

                //Common room:
                if(value == "2")
                { $("#myPhotoSphere").attr("src","http://orb.photo/embedded_player.php?view=20171201a1da59af307b44fa6dfa5ab2dfc157bd"); }

                //Lecture theatre: 
                if(value == "3")
                { $("#myPhotoSphere").attr("src","http://orb.photo/embedded_player.php?view=2017120169fafbe2c0a507bbb06284857b3ea427"); }

                //Atrium:
                if(value == "4")
                { $("#myPhotoSphere").attr("src","http://orb.photo/embedded_player.php?view=20171201a5853f710927d4a6b13909117b9ac85a"); }

                //Coffe Shop:
                if(value == "5")
                { $("#myPhotoSphere").attr("src"," http://orb.photo/embedded_player.php?view=20171201b19318b56e5168ce54ee5a2cc024c798"); }
            }); 
        });
    </script>

Then here's the html:

 <!-- VIRTUAL TOUR -->
        <select id="mySelect">
            <option value ="" disabled selected> Select a PhotoSphere </option>

            <option value="1"> Computing Classroom </option>
            <option value="2"> Common Room </option>
            <option value="3"> Leacture Theatre </option>
            <option value="4"> Atrium </option>
            <option value="5"> Coffee Shop </option>
        </select>

        <div>
            <iframe id="myPhotoSphere" src="http://orb.photo/embedded_player.php?view=201712011cb4f0e032532a59807bea088f9ca145" frameborder="0" scrolling="no" width="900" height="600">Please enable iframes to view content.</iframe>
        </div>

I'm not sure where to go on from here, I've been looking at how people use jQuery and change certain parts (which I've sort of puzzled together, however, I've hit a wall and can't seem to work it out).

Apologies for any embarrassing mistakes (newbie)..

Upvotes: 0

Views: 1418

Answers (1)

Marc
Marc

Reputation: 11623

You could try something like this to simplify it:

HTML

<!-- VIRTUAL TOUR -->
<select id="mySelect">
  <option value="" disabled selected> Select a PhotoSphere </option>
  <option value="http://www.google.com">Google</option>
  <option value="http://www.yahoo.com">Yahoo!</option>
  <option value="http://www.msn.com">MSN</option>
</select>

<div>
  <iframe id="myPhotoSphere" src="http://www.google.com" frameborder="0" scrolling="no" width="900" height="600"></iframe>
</div>

JAVASCRIPT

$(document).ready(function() {
  // SELECT MENU
  $("#mySelect").change(function() {
    var value = $(this).val();

    //IFRAME TAG
    console.log(value);
    $("#myPhotoSphere").attr('src', value);
  })
});

Here's a working example (the links just load other jsfiddle versions of this example): https://jsfiddle.net/j94geqt5/3/

Upvotes: 2

Related Questions