not able to upload same image with ng-show and ng-hide - javascript

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" />

Related

show full image after load is completed in Angular 12

I read image src with API from server .
I want the image not to be displayed until it is completely loaded and to display the skeleton instead while loading(images are displayed in sections and I want the skeleton to be destroyed when the image is fully displayed)
this is my code but it is not working as expected
HTML:
<div class="col-12 p-0">
<ngx-skeleton-loader *ngIf="imgLoad == false" count="1" [theme]="
{'borderradius':'7', 'background-color': '#ccc','margin-top':'0', 'min-height':
'25vh','width':'100%' }"></ngx-skeleton-loader>
<img (load)="loadImage()" [hidden]="imgLoad == false" src="assets/image/job1.jpg"
alt="" class="w-100 h-auto image-border">
</div>
TS :
imgLoad:boolean = false;
loadImage(){
this.imgLoad = true;
}
right now you read image from assets not API server!
but I try your code and change *ngIf="imgLoad == false" to *ngIf="imgLoad === false" & [hidden]="imgLoad == false" to [hidden]="imgLoad === false", so it's work fine
the stackblitz link: https://stackblitz.com/edit/angular-nnefsj?file=src/app/app.component.html
Just set your favorite width and height for skeleton and image.
If you need to use scr from a service in ts file just use [src] in img tag.

How to acces image url outside the domain for downloading perticular division in javascript

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..

JQuery-zoom dynamically change image

I'm using jquery-zoom and I have 4 images for a product on my website, when clicking one of the 4 images, I want the main image to change to the clicked image and still zoomable with jquery-zoom, now everytime when click different images, the main image gets updated to the clicked one but it's no longer zoomable, it's only zoomable when the page reloaded... How should I make my desired effect happen? Currently my code looks like this:
HTML:
<div class="product-main-image">
<img id="product-zoomable-image"src="/images/image1.jpg" alt="无图片" class="img-responsive" data-BigImgsrc="/images/image1.jpg">
</div>
<div class="product-other-images">
<img alt="无图片" src="/images/image1.jpg">
<img alt="无图片" src="/images/image2.jpg">
<img alt="无图片" src="/images/image3.jpg">
<img alt="无图片" src="/images/image4.jpg">
</div>
Javascript:
$('.product-carousel-image').click(function(event) { // change image shown as product image
var newImageUrl = $(this).attr('href');
console.log(newImageUrl) ;
$('#product-zoomable-image').attr('src', newImageUrl);
$('#product-zoomable-image').trigger('zoom.destroy');
$('#product-zoomable-image').zoom({url: newImageUrl});
});
Just figured out by myself, need to destroy the zoomImg first and then create another:
$('.product-carousel-image').click(function(event) { // change image shown as product image
var newImageUrl = $(this).attr('href');
$('#product-zoomable-image').attr('src', newImageUrl);
$('.product-main-image').trigger('zoom.destroy');
$('.product-main-image').zoom({url: newImageUrl});
});

How to change Class From jquery but remove that class from another object

i have problem. i don't no how to fix that problem
HTML Code:
<div class="image">
<a href="#">
<img src="images/image1.jpg" id="mainimg-1">
</a>
</div>
<div class="otherthumbnailcontainer">
<div class="thumbnailimages" id="thumbnailcont-1">
<img src="images/image1.jpg" id="thumbnail-1" onMouseOver="changeimage('images/image1.jpg','mainimg-1','thumbnail-1','thumbnailcont-1');" class="thumbsmallimg selectedthumb">
<img src="images/image2.jpg" id="thumbnail-2" onMouseOver="changeimage('images/image2.jpg','mainimg-1','thumbnail-2','thumbnailcont-1');" class="thumbsmallimg">
<img src="images/image3.jpg" id="thumbnail-3" onMouseOver="changeimage('images/image3.jpg','mainimg-1','thumbnail-3','thumbnailcont-1');" class="thumbsmallimg">
<img src="images/image4.jpg" id="thumbnail-4" onMouseOver="changeimage('images/image4.jpg','mainimg-1','thumbnail-4','thumbnailcont-1');" class="thumbsmallimg">
<img src="images/image5.jpg" id="thumbnail-5" onMouseOver="changeimage('images/image5.jpg','mainimg-1','thumbnail-5','thumbnailcont-1');" class="thumbsmallimg">
</div>
</div>
Here is code:
function changeimage(thumburl,mainimgid,thumbnailimg,thumbmaindiv)
{
$('#'+mainimgid).attr("src", thumburl);
// $('#'+thumbnailimg).add("thumbsmallimg selectedthumb");
$('#'+thumbnailimg).removeClass("selectedthumb").addClass('thumbsmallimg');
// $('#'+thumbnailimg).toggleClass("selectedthumb");
}
Now what i would like to do on the website page is completely load the first image with these two class "thumbsmallimg selectedthumb" but when mouse goes over on another image the class "selectedthumb" will switch from one image to another.
EDIT:
http://jsfiddle.net/nZMpW/ Check this link. its like a product image gallery when you hover mouse on down image its come in big image. but first down image is selected if you move on another image its come in big image but is not select. css this ":hover" option only work when you mouse on that image but i don't want to do this
remove all you onmouseover events and use this jquery code in the $(document).ready() section
$(".thumbsmallimg").mouseover(function() {
$("#mainimg-1").attr("src", this.src);
$(".selectedthumb").removeClass("selectedthumb");
$(this).addClass("selectedthumb");
});
and, if you want it to work with several sets of thumbnails/bigImages, you can use data() attributes:
<img src="http://www.yoono.com/static/yoono_com_v8/img/iphone_yoono.png" id="thumbnail-1" class="thumbsmallimg selectedthumb" data-big-image="mainimg-1">
<img src="http://www1.pcmag.com/media/images/302835-apple-iphone-5-sprint.jpg" id="thumbnail-2" class="thumbsmallimg" data-big-image="mainimg-1">
.....
and in jqQuery:
$(".thumbsmallimg").mouseover(function() {
$("#" + $(this).data("big-image")).attr("src", this.src);
$(".selectedthumb").removeClass("selectedthumb");
$(this).addClass("selectedthumb");
});
here is your Fiddle updated again
instead having selectedthumb, in your css put those styles inside .thumbsmallimg:hover{
.thumbsmallimg:hover{
/* the styles that wrere in class .selectedthumb */
}

html spoiler and changing button

How can I change the src of an image input onclick and create a spoiler? I want this to happen:
(button that says: show) <- This button will have image 1
once clicked it will display a button with a different image
(button that says: hide) <- This button will have image 2
The only thing is, I want the src of the image of the button to change, but not the value of a button input, because I'm using an image input, not a button. Here is my current code:
<script type="text/javascript">
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
</script>
<div class="spoiler">
<INPUT type="image" id="image" src="http://www.ogiatech.com/files/theme/icon_plus.png" value="" onclick="showSpoiler(this);" style="outline: none;"
onmouseover="this.src='http://www.ogiatech.com/files/theme/icon_plus_hover.png'"
onmouseout="this.src='http://www.ogiatech.com/files/theme/icon_plus.png'" />
<div class="inner" style="display:none;">
This is a spoiler!
</div>
</div>
I want the the image src for the input with the id="image", AND the images for the rollover effect to change onclick. I know this may be confusing, but is there a way to achieve this?
You can try another approach. Use a hidden input tag with src as you want. Later use a img to change the image as http://jsfiddle.net/G4Y5t/
<div class="spoiler">
<img id="image"
src="http://www.ogiatech.com/files/theme/icon_plus.png"
onclick="showSpoiler(this);" style="outline: none;"
onmouseover="this.src='http://www.ogiatech.com/files/theme/icon_plus_hover.png'"
onmouseout="this.src='http://www.ogiatech.com/files/theme/icon_plus.png'" />
<input type="hidden" value="your image src" />
<div class="inner" style="display:none;">This is a spoiler!</div>
</div>
You can change the input value attribute inside your function if you want.
Hope this help

Categories

Resources