CodePen

HTML

            
              <select id="lightbox-type">
  <option value="image" id="image">Image</option>
  <option value="video" id="video">Video</option>  
</select>  

<div id="image-form"> 
  Your image form goes here.
</div>

<div id="video-form"> 
  Your video form goes here.
</div>
            
          
!
via HTML Inspector

CSS

            
              /* 
hide the video form because image is default! */
#video-form { display: none; }

/* the following styles are to make the demo a little prettier */
#video-form, #image-form {
   padding: 10px; 
  margin: 10px; 
  background: #efefef;
  border: 1px solid #ddd;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $("select#lightbox-type").change(function () {
  if ($("#video").is(":selected")) {
    $("#image-form").fadeOut("fast", function () {
      $("#video-form").fadeIn("slow");
    });
  }
  else if ($("#image").is(":selected")) {
    $("#video-form").fadeOut("fast", function () {
      $("#image-form").fadeIn("slow");
    });
  }
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................