I have the following code :
$('.posts').append('<article class="post">\n' +
' <div class="postImages">'+displayPostImagesHere()+'</div>\n' +
' </article>');
and want to get images from firebase storage and display for each image in place of displayPostImagesHere() function the following code :
<div class="postImage"><img src="'+url+'" alt="Post image"></div>
Related
Using jQuery, I' m downloading an image into SVG format.
Now, I wanted to show a title just above image. I tried to achieve this with keyup event. When I write the title, my script appends it into the div as it suppose to be but as soon as I click on download button, the title disappears and the image downloads without the appended title.
I wanted to download the image with title above that's actually an appended text.
html
<div class="row">
<div class="col-sm-6">
<label>Write Title</label>
<input type="text" name="qr_frame_text" id="qr_frame_text">
</div>
<div class="col-sm-6">
<div id="qr-container">
<div id="get_frame_text"></div> //Here I'm appending the title
<div id="img" class="qr-img">
<img src="data:image/png;base64, {!! base64_encode($image) !!}" class="img-fluid" />
</div>
</div>
</div>
JavaScript
$("#qr_frame_text").keyup(function () {
$("#get_frame_text").html(this.value);
});
$( document ).ready(function() {
domtoimage.toSvg(node)
.then(function (dataUrl) {
var node = document.getElementById("qr-container");
$('#qr2').click(function() {
$('#qr-container').html("div id=\"get_frame_text\"></div>\n" +
"<div id=\"img\" class=\"qr-img\">\n" +
" <img src=\"data:image/png;base64, {!!base64_encode($image) !!}\" class=\"img-fluid\" />\n"+
"</div>\n");
var link = document.createElement('a');
link.download = 'qrcode.svg';
link.href = dataUrl;
link.click();
});
});
});
You are calling domtoimage.toSvg(node) after you have done the following:
$('#qr-container').html("div id=\"get_frame_text\"></div>\n" +
"<div id=\"img\" class=\"qr-img\">\n" +
" <img src=\"data:image/png;base64, {!!base64_encode($image) !!}\" class=\"img-fluid\" />\n"+
"</div>\n");
Remember, var node = document.getElementById("qr-container"); is not saving a snapshot of the node. It will change if it is modified.
You are changing the element to no longer contain the input before saving it. If you are trying to reset the changes, do that in your .then().
I have one code for downloading particular division using javascript. But my problem is in that div contain one image tag .my image src is a URL which is outside my domain.My download function is given below:
function download() {
var options = {
};
var pdf = new jsPDF('p', 'pt', [748, 600]);
pdf.addHTML($("#invoice-POS"), 20, 20, options, function () {
pdf.save("Receipt_" + $scope.ReceiptName + ".pdf");
location.reload();
});
}
My div is
<div id="invoice-POS">
<center id="top">
<div class="info">
<img id="my-image" ng-src="{{Logo}}" alt=""
style="height:150px;width:150px"><br />
<h2 style="color:black" >Invoice</h2>
<img ng-src="{{QrImg}}" alt="" style="height:150px;width:150px" />
<h5>Scan QR Code </h5>
</div>
</center>
</div>
in this div ng-src="{{Logo}} is an external url ,qrImg is genertaed from my domain so qrimg is diplayed.Logo Image displayes in div ,but after downloading the div, Logo image is not showing,Qrimage is showing .Please help me..
I am trying to fetch Google Street View images and display them in a light box using featherlight. The images are defined dynamically based on which map icon a user selects.
My image displays without issue but the lightbox freezes for a second and then returns a page of random characters as if the image has been attempted to read as text.
An example of my code is as follows:
let streetView_imgURL = "https://maps.googleapis.com/maps/api/streetview?size=600x300&location=" +
props.Latitude + "," + props.Longitude + "&key=MYKEY";
document.getElementById("selectedSchool").innerHTML = (props ?
"<div class='imgbox'>" +
"<img style='width:100%;' data-featherlight='" + streetView_imgURL + "'src='"
+ streetView_imgURL + "'>"
If I understood your issue well, try this:
http://jsfiddle.net/markovica/1njee7ah/2/
<style>.gsv-screenshot {display: none}</style>
<a href=".gsv-screenshot" class="" data-featherlight>Click Me</a>
<div class="lightbox gsv-screenshot">
<i class="featherlight-close fa fa-close"></i>
<img style='width:100%;' src="https://maps.googleapis.com/maps/api/streetview?size=600x300&location=44.8165107,20.4603276">
</div>
find a way to generate items this way. It doesn't seem to have issues.
I want to upload image to the server, I have two images, one on left side currently i am uploading other is previously uploaded image to the right. left Side image will appear when user clicks the "Upload" button , after upload I have provided "X" mark to the right of the Image, after clicking "X" I hiding that uploaded image. Once again If I upload same Image which I uploaded earlier which is not uploading why? . If I upload some other Image it is uploading.
<div ng-click="deleteLocalfile()" ng-hide="deletePreviewImage" ng-show="showImage" class="img-wrap">
<span class="close">×</span>
<img ng-src="{{imagepreviewUrl}}" ng-if="imagepreviewUrl" style="width: 100px; height: 100px;" alt="" data-id="103">
</div>
<a ng-show="user.photo.photoProof" href><img ng-src="{{tabindexUrl}}" style="width: 100px; height: 100px;" alt=""></a>
<div class="fileUpload btn btn-primary" flow-attrs="{accept:'image/*'}">
<span>Upload</span>
<input data-flow-btn type="file" ng-model="user.photo.photoProof" name="photoProof" id="photoProff" class="upload"/>
</div>`<div class="list-group mt-md mb-0" data-ng-show="$flow.files.length" data-ng-repeat="file in $flow.files">
<div class="box-layout list-group-item" data-ng-hide="fileUploadSuccess">
<div class="col-xs-2 va-m">
<span class="img-wrapper img-rounded" style="width:50px;"><img imageonload="onImgLoad('photo')" flow-file-added="validate($file)" flow-img="file" alt="" style="width: 50%; height: auto;"></span>
</div>
<div class="col-xs-5 va-m">
<div class="progress progress-sm nm">
<div class="progress-bar" ng-style="{width: (file.progress() * 100) + '%'}"></div>
</div>
<div class="col-xs-5 va-m"><strong>{{file.name}}</strong > {{file.size}} bytes</div>
</div>
</div>
</div>`
Controller Code:
$scope.onImgLoad = function(type){
$scope.deletePreviewImage = true;
$scope.previewImageUrl = '';
switch (type){
case 'photo':
MyService.getBase64Content($scope.flow.photoDoc.files[0].file, function(e){
$scope.user.photo.photoProofContent = e.target.result.substr(e.target.result.indexOf(',') + 1);
$scope.imagepreviewUrl = 'data:image/jpeg;base64,'+ $scope.user.user.photoProofContent.replace(/['"]+/g, '');
$scope.previewImageUrl = $scope.imagepreviewUrl;
$scope.deletePreviewImage = false;
});
deleteLocalfile method:
$scope.deleteLocalfile = function(){
$scope.showImage = false;
$scope.deletePreviewImage = true;
}
After Image Upload say "1.jpeg" it will appear as left as side Image , after clicking "X" on this image, it will hide , later If I upload same Image say "1.jpeg" I am not able to load its not calling $scope.onImgLoad() method, If I upload some other Image say "2.jpeg" it is appearing as left side Image. why "1.jpeg" not coming? the src attribute in image tag holding previous image, its not changing why?.
when uploaded one file and upload the same file again, browser won't trigger change event。 So before uploading the same file , you need set input's value to empty string. For example, $('#photoProff').val('');
I don't reading your code carefully , if you provide a codepen url address or jsFiddle url address, I can know more.
Very simple solution for you is - Use ng-if instead of ng-show or ng-hide.
ng-if will load element in html only when condition is ture, else not. whereas in case of ng-show or ng-hide , only display of image is set to block or none respectively, but image is always in DOM.
Example
<img ng-src='someurl' ng-if="condition==true" />
i have a simple question regarding jquery, i have a long list of images directly uploaded from youtube, the image have the same v-code as the video itself, so for simpe downloading of all the videos on one page for browsers i made a list of images, once u click it, the video will appear on its place, the thing is that the code that i have oriented for video's image, but not on another one, anyway here is the code:
$('.youtube_thumb > img').click(function(){
var parts = this.src.split("/");
var id = parts[parts.length-2];
$('<iframe width="50%" height="300" src="http://www.youtube.com/embed/' + id + '?autoplay=1" frameborder="0" allowfullscreen></iframe>').insertAfter(this);
$(this).parent().parent().find(".name,.detail,.youtube_play").hide();
$(this).remove();
});
and the div
<div class="youtube">
<div class="name">
#left(name,30)#
</div>
<div class="detail">#left(detail,50)#</div>
<div class="youtube_play"></div>
<div class="youtube_thumb">
<img src="http://img.youtube.com/vi/#link#/0.jpg" style="width:50%;height:300px;border:0;" />
</div>
</div>
as u can see the code takes the img's src and sort the v-code and then put it inside the frame. But i want to work this code only after i click on the class youtube_play but not on youtube_thumb's image.
Thank you all for the help!
$('.youtube_play').click(function(){
var img = $(this).next().find('>img');
var parts = img.get(0).src.split("/");
var id = parts[parts.length-2];
$('<iframe width="50%" height="300" src="http://www.youtube.com/embed/' + id + '?autoplay=1" frameborder="0" allowfullscreen></iframe>').insertAfter(img.get(0));
img.parent().parent().find(".name,.detail,.youtube_play").hide();
img.remove();
});