I am developing a phonegap ios application. I need camera to be on initially when page is loaded.
Now on clicking the div, camera is loaded in a new screen with two buttons "retake" and "use".if click on "use" button then the captured snap will be appended to img with id "preview"
code is,
function onCamera() {
navigator.camera.getPicture(uploadPhoto, function(message) {
alert('get picture failed');
},{
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA
});
}
function uploadPhoto(imageURI) {
$("#preview").attr({
src: imageURI,
title: "cam",
alt: "cam image"
});
}
<div onclick="onCamera()">
<img src="Images/camera.png" style="width:50px; height:50px;"/>
</div>
<div class="cam">
<img id="preview" src="css/empty.png" style="width:100%; height:300px;" />
</div>
How can i make the camera load to div with id "preview" when the page is loaded initially?
Please Help, Thanks.
Related
Everyone I am a junior developer at NESAC(ISRO).
I am working on a project with vue JS and leaflet JS. So my task is:-
Using Leaflet JS, I have to render a map on the screen.
Set markers at "n" specific locations on the renderd map.
Create a sidebar with a checkbox of various entities such as cities, restaurants, parks etc.
Develop a Vue app such that, I create my different components on the components folder, so that all my components go through App.vue file and gets renderd at the index.html, i.e. my browser.
And, now I have to make a Layer control function such that each of my entities gets different reactions. Eg. If I click the restaurant checkbox at the sidebar, then all my restaurant leaflet markers should be shown on the screen, but each entity should have different reactivity.
Github Link.
You can use npm package for that - Vue2Leaflet
Here is docu: https://vue2-leaflet.netlify.app
And simple Map with Vue.js and leaflet:
<template>
<div style="height: 350px;">
<div class="info" style="height: 15%">
<span>Center: {{ center }}</span>
<span>Zoom: {{ zoom }}</span>
<span>Bounds: {{ bounds }}</span>
</div>
<l-map
style="height: 80%; width: 100%"
:zoom="zoom"
:center="center"
#update:zoom="zoomUpdated"
#update:center="centerUpdated"
#update:bounds="boundsUpdated"
>
<l-tile-layer :url="url"></l-tile-layer>
</l-map>
</div>
</template>
<script>
import {LMap, LTileLayer} from 'vue2-leaflet';
export default {
components: {
LMap,
LTileLayer,
},
data () {
return {
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
zoom: 3,
center: [47.413220, -1.219482],
bounds: null
};
},
methods: {
zoomUpdated (zoom) {
this.zoom = zoom;
},
centerUpdated (center) {
this.center = center;
},
boundsUpdated (bounds) {
this.bounds = bounds;
}
}
}
</script>
It's just a wrapper for a leaflet and you have complete access to all the leaflet functions through:
mounted() {
this.$nextTick(() => {
this.map = this.$refs.map.mapObject;
});
}
I think that can be a good start for you.
The main problem I'm looking at right now is the next/previous buttons are not working as expected after featherlightGallery() has been called more than once - The first click on the next button always shows the first image while the previous button always shows the 2nd to last image.
GitHub
The idea is to show the first 4 thumbnails from a gallery on a page.
When one of these thumbnails is clicked, the (hidden) gallery opens via featherlight, a click is triggered on the related image in the gallery, and the gallery behind the image is closed. This leaves the viewer with the image they clicked and the next/previous buttons. (ignore the lack of styling!)
Every time these thumbnails are clicked, the next/previous buttons work as expected, displaying adjacent images in the gallery.
The first 4 images from the gallery shown on the page: (# is substituted for actual numbers. The data-click attr is used in JS to trigger a click on the related gallery image)
<div id="intro-gallery">
<a data-click="gi-#" class="intro" href="img/#.jpg"><div class="intro" style="background-image: url('img/#.jpg');"></div></a>
<a data-click="gi-#" class="intro" href="img/#.jpg"><div class="intro" style="background-image: url('img/#.jpg');"></div></a>
<a data-click="gi-#" class="intro" href="img/#.jpg"><div class="intro" style="background-image: url('img/#.jpg');"></div></a>
<a data-click="gi-#" class="intro" href="img/#.jpg"><div class="intro" style="background-image: url('img/#.jpg');"></div></a>
</div>
Clicking this link opens the featherlight div without triggering any clicks or hiding the gallery (with JS).
<p><a class="link" href="#main-gallery-container">Gallery</a></p>
The first time the link is clicked, the gallery is shown and the user clicks a thumbnail, the next/previous buttons work as expected. Since the gallery is hidden after user clicks a thumbnail, they need to click the Gallery button again to see all the thumbs - at this point, after clicking another thumbnail, the next button always shows the first image and the previous button shows the 2nd to last image. Seems like the current image is set to the last image in this case.
Inside this #main-gallery div are 12 .gallery-item divs (1 shown for brevity).
<div id="main-gallery" data-featherlight-gallery data-featherlight-filter=".mgi">
<div class="gallery-item">
<a class="main" id="gi-#" href="#mgi-#">
<div class="thumb-holder" style="background-image: url('img/{$x}.jpg');"></div>
</a>
<div class="mgi-wrapper">
<div id="mgi-#" class="mgi">
<div class="mgi-image" style="background-image: url('img/#.jpg');">
</div>
<div class="mgi-text">
<p>Some text goes here</p>
</div>
</div>
</div>
</div>
</div>
JS
"use strict";
(function ($) {
$(function () {
$('a.link').click(function (e) {
e.preventDefault();
$.featherlight.close();
$.featherlightGallery.close();
initGallery();
}); // Add link to view gallery, bind click.
$.featherlightGallery.prototype.afterOpen = function () {
var link = $('<span class="single-gallery-link"><a class="link" href="#main-gallery-container">View Gallery Images</a></span>');
$('.featherlight.single .featherlight-content').prepend(link);
$(link).click(function () {
$.featherlight.close();
$.featherlightGallery.close();
initGallery();
});
};
$('a.intro').click(function (e) {
e.preventDefault();
initGallery(); // get ID from data-att of initial thumbnail
var id = $(this).data('click'); // Get same thumb in gallery and trigger a click
var thumb = document.getElementById(id);
$(thumb).click();
});
$('#link').click(function (e) {
e.preventDefault();
initGallery();
});
var switchToGallery = function switchToGallery(e) {
// prevent triggered click
e.preventDefault();
$.featherlight.close();
$.featherlightGallery.close();
initGallery();
};
var initGallery = function initGallery() {
$.featherlight('#main-gallery', {
variant: 'onclick',
afterOpen: function afterOpen() {
$('a.main').featherlightGallery({
targetAttr: 'href',
variant: 'single',
beforeOpen: function beforeOpen() {
$.featherlight.close();
}
});
}
});
};
});
//https://stackoverflow.com/a/52611202/774793
//$.featherlightGallery($(".column"), {$currentTarget: $('the first item, maybe this in your case?')});
})(jQuery);
//# sourceMappingURL=index.js.map
EDIT: I don't like posting URLs with a limited lifespan here but for the sake of solving the problem - temporary example
The library is confused, $.featherlightGallery.current().$currentTarget[0] seems to be a detached copy and not part of $.featherlightGallery.current().slides() so navigation is lost.
I'm not too sure what is going on and don't have the time to delve into it further.
I would try with persist: true. Also looks like you are constantly re-initing the gallery, you should bind it once.
I want to open fancybox with open api method and have share menu.
<a class="box" href="https://source.unsplash.com/juHayWuaaoQ/1500x1000" data-
fancybox="images" data-caption="Backpackers following a dirt trail">
<img src="https://source.unsplash.com/juHayWuaaoQ/240x160" />
</a>
This opens the image when clicked but the share button is missing. How can I have share button?
https://jsfiddle.net/92vepwLr/2/
Use buttons option to specify buttons in the toolbar. Example:
HTML
<a class="item">
<img src="https://source.unsplash.com/juHayWuaaoQ/240x160" />
</a>
JS
$('.item').on('click', function() {
$.fancybox.open({
src: "https://source.unsplash.com/juHayWuaaoQ/1500x1000",
opts: {
thumb: "https://source.unsplash.com/juHayWuaaoQ/240x160",
caption: "lorem ipsum dolor",
buttons: ['zoom', 'share', 'close']
}
});
});
Demo - https://jsfiddle.net/8mh15gwd/
i am creating an Listing ionic application where i am displaying feeds from an API in the home page. It also has some filter options which is an actionsheet with options such as near by, populer and so on. What i want to do is when user click one of the filter for example populer, i want to do display the new feeds on the same page. How can i do so ??
My code base is as below
home.ts
constructor(....){
this.getFeeds();
}
//make api call to get the feeds
getFeeds(){
const data = localStorage.getItem('userToken');
this.userPostData.api_token= data;
this.authService.postData(this.userPostData,'feeds').then((result)=>{
this.responseData = result;
})
}
//Feeds by location
//Actionsheet
filters() {
let actionSheet = this.actionSheetCtrl.create({
title: 'Sort Events by',
buttons: [
{
text: 'Location',
icon:'pin',
handler: () => {
//Make api call to feeds based on location
}
},
{
text: 'Popularity',
icon:'people',
handler: () => {
//Make api call to feeds based on location
}
}
]
});
actionSheet.present();
}
And my home.html is
<ion-card *ngFor="let item of responseData?.feed" tappable (click)="viewDetail(item.id)">
<div class="event-image-holder search-list">
<img src="http://localhost:8000/{{item.photo_url}}"/>
<div class="event-attendee-count">
<ion-icon name="people"></ion-icon> {{item.attendees.length}} are going
</div>
</div>
<ion-card-content>
<div class="event-info">
<div class="event-time">
<!-- 04 Feb -->
{{item.gmt_date_set | date:'dd MMM'}}
</div>
<div class="event-descp">
<h2>{{item.title}}</h2>
<p>
{{item.club.name}}
</p>
</div>
</div>
</ion-card-content>
</ion-card>
After some research here and there tutorials from youtube and udemy, i found that when ever you change the data of the variable it automatically change on the view page.
So in my case if i override the data of this.responseData it will automatically updated on the view page with out much doing.
I have a gallery of 5 thumbnails and one larger image. I have jqZoom tied to the large image so when you mouse over it, you can see a zoomed in version.
I'm having trouble when a user clicks an alternate thumbnail. I can get the larger image to change, but the zoomed in image remains the original image. I can't make jqZoom change the zoomed in image to match the thumbnail.
Here is an example of what I'm trying to do. You click on the text and the thumbnail changes, but the larger jqZoom image remains the same. How do I change this so that jqZoom loads the new image in the zoom area?
<script type="text/javascript">
$(function() {
var options = {
zoomWidth: 250,
zoomHeight: 250,
showEffect: 'fadein',
hideEffect: 'fadeout',
fadeinSpeed: 'fast',
fadeoutSpeed: 'fast',
showPreload: true,
title: false,
xOffset: 100
};
$(".jqzoom").jqzoom(options);
});
function changeImgSrc() {
document.getElementById('bigImage').src = '4.jpg';
document.getElementById('smallImage').src = '3.jpg';
var options = {
zoomWidth: 400,
zoomHeight: 400,
showEffect: 'fadein',
hideEffect: 'fadeout',
fadeinSpeed: 'fast',
fadeoutSpeed: 'fast',
showPreload: true,
title: false,
xOffset: 100,
containerImgSmall: '3.jpg',
containerImgLarge: '4.jpg'
};
$(".jqzoom").jqzoom(options);
}
</script>
</head>
<body>
<div id="content" style="margin-top:100px;margin-left:100px;">
<a id="bigImage" href="2.jpg" class="jqzoom" style="" title="Product Zoom">
<img id="smallImage" src="1.jpg" title="Product Zoom" style="border: 0px none;">
</a></select>
<br>
<div id="img" onClick="document.getElementById('bigImage').src = '4.jpg';changeImgSrc();">click here to change source</div>
</div>
Thanks for your help!!
A simple way is to unbind the jqZoom whenever the image changes and then re-bind it once you've changed the source of your main pic
var jqzoomOptions = {
zoomWidth: 438,
zoomHeight: 390,
title: false
}
$("#mainPic").jqzoom(jqzoomOptions);
/* image thumbs */
$("#productPicThumbs a").click(function(){
// change pic source here
$("#mainPic").unbind();
$("#mainPic").jqzoom(jqzoomOptions);
return false;
});
I had similar problem with your...
I've got important tips from that site, please check it...
http://paul.leafish.co.uk/articles/drupal/quick_and_dirty_jqzoom_with_drupal_ecommerce_and_imagecache
Old but good js plugin.
I have solved this problem with jQuery, changing the jqimg attribute on the picture source:
$("#foto_produto").attr("jqimg", "domain-url.com/sample3.jpg");
On the following :
<img src="domain-url.com/sample1.jpg" class="jqzoom" jqimg="domain-url.com/sample2.jpg" alt="domain-url.com/sample1.jpg">
Finally obtaining:
<img src="domain-url.com/sample1.jpg" class="jqzoom" jqimg="domain-url.com/sample3.jpg" alt="domain-url.com/sample1.jpg">
You can also applies the jQuery "attr" function to change the "src" and "alt" of that div.
This is how you can clean the data from jqzoom:
$('.jqclass').removeData('jqzoom');
Because jqzoom keeps the data in this object:
$(el).data("jqzoom", obj);
Removing the main image and re-appending it should make it work, here is an example
$('a.main_thumb').jqzoom({ title: false });
$("a.thumb").click(function (e) {
e.preventDefault();
var thumbUrl = $(this).attr("href");
var thumbImg = $(this).find("img").attr("data-img");
$(".main_thumb").remove();
$(".current_thumbnail").append("<a href='" + thumbUrl + "' class='main_thumb'><img src='" + thumbImg + "' /></a>");
$('a.main_thumb').jqzoom({ title: false });
});
With the last version of jQZoom you can create galleries (jQZoom can manage it for you).
1.Attach the gallery ID to your main anchor "rel" attribute.
<a href="images/big-1.jpg" class="zoom" rel="gallery-1">
<img src="images/small-1.jpg" />
</a>
2.Manage your thumbnails "class" and "rel" attributes.
The class zoomThumbActive is attached to your thumbnails by jQZoom. By default specify this class to the selected thumbnail (it should be the same image in your main anchor element)
<ul>
<li>
<a class="zoomThumbActive" href="javascript:void(0);" rel="{
gallery: 'gallery-1',
smallimage: 'images/small-1.jpg',
largeimage: 'images/big-1.jpg'
}">
<img src="images/thumbnail-1.jpg">
</a>
</li>
<li>
<a href="javascript:void(0);" rel="{
gallery: 'gallery-1',
smallimage: 'images/small-2.jpg',
largeimage: 'images/big-2.jpg'
}">
<img src="images/thumbnail-2.jpg">
</a>
</li>
<li>
<!-- ... -->
</li>
</ul>
The structure of the thumbnail rel attribute is very important.
The base elements are :
gallery: the ID of the gallery to which it belongs,
smallimage: the path to the small image (loaded when you click on the
thumbnail),
largeimage: the path to the big image.