Created
June 4, 2016 06:14
-
-
Save mahedi2014/e08fa96f0e7c5edfcdaae1dd0a03b972 to your computer and use it in GitHub Desktop.
Select image from media gallery
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>Select image from media gallery</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> | |
| <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> | |
| <script> | |
| $(document).ready(function(){ | |
| $(".selected_img").click(function(){ | |
| $('img').css('border', "0"); //remove all image border | |
| $(this).css('border', "solid 2px blue"); //make selected image border | |
| var image_path = $(this).attr("src"); //get selected image link | |
| $('#selected_img_preview').attr('src', image_path); //set preview image in parent | |
| $('#image_url').val(image_path); //set input filed value by selected image link | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h2>Select image from media gallery</h2> | |
| <!-- Trigger the modal with a button --> | |
| <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open media gallery</button> | |
| <br> | |
| <img src="image/user3.jpg" width="100px" height="100px" id="selected_img_preview"> <!--preview image setting--> | |
| <br> | |
| <input type="text" id="image_url" value=""> <!--new selected image url--> | |
| <!-- Modal --> | |
| <div class="modal fade" id="myModal" role="dialog"> | |
| <div class="modal-dialog"> | |
| <!-- Modal content--> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <button type="button" class="close" data-dismiss="modal">×</button> | |
| <h4 class="modal-title">Select image</h4> | |
| </div> | |
| <div class="modal-body"> | |
| <?php | |
| //store all images in folder "image" | |
| $files = glob("image/*.*"); | |
| for ($i=1; $i<count($files); $i++) | |
| { | |
| $num = $files[$i]; | |
| echo '<img src="'.$num.'" width="25px" height="25px" class="selected_img" >'." "; | |
| } | |
| ?> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |
| <h1>Instructions</h1> | |
| <h4>jQuery Code in head tag</h4> | |
| <textarea cols="110" rows="5"> | |
| $(document).ready(function(){ | |
| $(".selected_img").click(function(){ | |
| $('img').css('border', "0"); //remove all image border | |
| $(this).css('border', "solid 2px blue"); //make selected image border | |
| var image_path = $(this).attr("src"); //get selected image link | |
| $('#selected_img_preview').attr('src', image_path); //set preview image in parent | |
| $('#image_url').val(image_path); //set input filed value by selected image link | |
| }); | |
| }); | |
| </textarea> | |
| <h4>PHP Code in bootstrap modal</h4> | |
| <textarea cols="110" rows="5"> | |
| //store all images in folder "image" | |
| $files = glob("image/*.*"); | |
| for ($i=1; $i<count($files); $i++) | |
| { | |
| $num = $files[$i]; | |
| echo '<img src="'.$num.'" width="25px" height="25px" class="selected_img" >'." "; | |
| } | |
| </textarea> | |
| <h4>HTML Code for image url in input field and preview</h4> | |
| <textarea cols="110" rows="5"> | |
| <img src="image/user3.jpg" id="selected_img_preview"> <!--preview image setting--> | |
| <input type="text" id="image_url" value=""> <!--new selected image url--> | |
| </textarea> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment