Posts

Showing posts with the label Images

Image Gallery Codepen

HTML Code width JQuery Script <!--<div class="wrapper">   <div class="images">     <img src="https://source.unsplash.com/1600x900/?rainforest" />     <img src="https://source.unsplash.com/1600x900/?trees" />     <img src="https://source.unsplash.com/1600x900/?rocks" />     <img src="https://source.unsplash.com/1600x900/?mountains" />     <img src="https://source.unsplash.com/1600x900/?water" />     <img src="https://source.unsplash.com/1600x900/?nature" />   </div>   <div class="text">     <p>Click the images.</p>   </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript">   $(".images img").click(function () {   $(this).addClass("zoom"); }); $(".images img").mouseleave...

Upload Images

Upload Single Image if($request->file('reg_photo')){                                     // Uploading Registration photo                 $tmpFilePath = public_path('/assets/images/reg-photo/');                 // echo $tmpFilePath; die();                 $p_hadPath ='reg-photo_'.time();                 $img = Image::make($request->file('reg_photo'));                 $img->save($tmpFilePath.$p_hadPath.'.jpg');                 $reg_photo = $p_hadPath.'.jpg';             } Upload Multiple Images         $arr_degree_photo = [];         $degree_photo = $request->file('degree_photo'...

Image Preview Scripts & Add Multiple Boxes Scripts

How to load Single Image Preview <input type="file" name="" id="" onchange="readURL(this, previewImage)"> <img id="previewImage" value="">  <script type="text/javascript">         function readURL(This, img_id) {         var reader = new FileReader();         reader.onload = function(e) {         $('img#'+img_id).attr('src', e.target.result);         $('img#'+img_id).addClass('on__changeImg');         $('img#'+img_id).css('border','1px solid #000');         }         reader.readAsDataURL(This.files[0]);         }   </script> How to load Single Image Preview <script> function readURL(input) {     if (input.files && input.files[0]) {         var reader = new FileReader();         reader.onload = function (e) { ...