Develop Reference

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

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

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

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});
});

Using featherlightGallery.js without a tags

I'm using the FeatherlightGallery plugin for lightboxing on an image slider that just has images in it, not a tags then images, however it doesn't seem to load anything when clicking next/prev, just a blank lightbox. However the first image works. I get the console error:
GET http://url.com/undefined 404 (Not Found)
So it looks like it's not selecting the next image properly.
The JS to call the lightbox is:
$('.slider img').featherlightGallery({
targetAttr: 'src',
type: 'image',
gallery: {
previous: '',
next: ''
}
});
and the html of those images is:
<div class="slider">
<img class="is-active" src="http://url.com/image.jpg" alt="" data-slide-id="0">
<img src="http://url.com/image.jpg" alt="" data-slide-id="1">
<img src="http://url.com/image.jpg" alt="" data-slide-id="2">
<img src="http://url.com/image.jpg" alt="" data-slide-id="3">
</div>
Cheers.

Seem to have fixed it by changing this line:
$img[0].src = $nx.attr('href');
to this:
$img[0].src = (typeof $nx.attr('href') === 'undefined') ? $nx.attr('src') : $nx.attr('href');

click handler in capty plugin

I am trying this JS code in jquery capty plugin . However the plugin needs an image to works, like:
<img id="default1" src="img/1.jpg" name="#content-target1" width="208" height="143" class="latest_img" />
Well, when i add this image the JS below didn't works. Basically what i want is just click in span and show an alert message with the content.
$('.tag_content').live('click', function(event){
var span_val = $(this).parent().children("span").html();
alert(span_val);
});
html code
<div class="images">
<img id="default1" src="img/1.jpg" name="#content-target1" width="208" height="143" class="latest_img" />
<div id="content-target1">
<span class="tag_content">Design</span>
</div>
</div>
Any idea ? thanks

The following code seems to work for me. You can try it out on jsFiddle: http://jsfiddle.net/fZSGt/4/
$('#default1').capty();
$('.tag_content').click(function() {
//var span_val = $(this).parent().children("span").html();
var span_val = $(this).html();
alert(span_val);
});
I also changed $(this).parent().children("span").html() to $(this).html() because it seems to be unnecessary for your code.