I tried this library. angular-modal-gallery. doc
Problem is when popup image, it's showing in small size and initial size also too samall. I want to show image in large size.Similar to this site examples
https://www.jqueryscript.net/demo/Gallery-Popup-jQuery-Fs-Gal/
Please tell me any method to do this.
Here is the code I used in angular-modal-gallery library.
html code
<ks-modal-gallery *ngIf="stuf.itemType == 0" [id]="1" [modalImages]="getImage(stuf.itemId)"></ks-modal-gallery>
typescript code
import { Image } from 'angular-modal-gallery';
images: Image[];
ingleImage: Image[];
getImage(url: string) {
this.images = [
new Image(
0,
{ // modal
img: this.baseUrl + 'Upload/Photos/' + url + '.jpg',
extUrl: 'http://www.google.com'
}
)];
return this.singleImage = [this.images[0]];
}
Related
Trying to link shapes to slides the same way it's done with images.
.
.
Reason for this request is linking images seems much harder in terms of locating the exact one to be linked.
Have realized it might be best to link shapes through match/search text then insert the images after.
Codes attempted though please ignore if completely irrelevent.
function myFunction(){
var searchText = "IMAGE1";
var presentation = SlidesApp.getActivePresentation();
var slide = presentation.getSlides()[4];
// 2. Replace the shape which has the text of "searchText" with the image of "imageUrl".
slide.getShapes().forEach(s => {
if (s.getText().asString().toLocaleUpperCase().includes(searchText.toLocaleUpperCase())) {
s.setLinkSlide('INSERT_SLIDE_LINK');
}
}
)
}
Slides Example
Thank you
I believe your goal is as follows.
You want to link the shape to a slide by searching the text in the shape on Google Slides.
You want to achieve this using Google Apps Script.
setLinkSlide can use Slides Object. I thought that this might be able to be used.
Sample script:
function myFunction() {
const obj = { text1: 3, text2: 3, text3: 4, text4: 5, text5: 4, text6: 3 }; // This is from your showing sample image.
const slides = SlidesApp.getActivePresentation().getSlides();
slides.forEach(s => {
s.getShapes().forEach(shape => {
const t = obj[shape.getText().asString().toLowerCase().trim()];
if (t) {
shape.setLinkSlide(slides[t - 1]);
}
});
});
}
Note:
This sample script is for your provided sample Google Slides. When you change this, please modify obj. Please be careful about this.
Reference:
setLinkSlide(slide)
SUGGESTION
If I've understood your post correctly, these are your goals:
Check the text on each of the shapes in your slides
See if the current text shape matches the current searchText value
If true, link a dedicated slide to the current shape.
Sample Tweaked Script
function sample() {
var presentation = SlidesApp.getActivePresentation();
var slide = presentation.getSlides();
//Define the 'searchText' value & it's dedicated slide to be linked
var find = {
search: [["Text1", slide[1]],
["Text2", slide[2]],
["Text3", slide[3]]]
};
find.search.forEach(d => {
let searchText = d[0];
let linkSlide = d[1];
slide[0].getShapes().forEach(s => {
s.getText().asString().trim().toLowerCase() === searchText.toLowerCase() ? s.setLinkSlide(linkSlide) : null;
});
})
}
I'm using Angular UI Grid and I've tried to few ways to add an image (logo) to the top of the PDF document which gets exported.
I've had no luck with the implementations I've tried...
exporterPdfHeader: { text: "My Header", image: "<urlOfImage>" }
exporterPdfHeader: { text: "My Header", backgroundImage: "<urlOfImage>" }
exporterPdfHeader: { text: "My Header", backgroundImage: url("<urlOfImage>") }
Is this even possible to do?
Thanks in advance.
Can you add your image inside a custom html header using headerTemplate: 'header-template.html', in grid-options?
See example ui-grid tutorial
edit
OK, having looked at the source and docs for the export, there is nothing there about passing images in the header.
It does refer you to pdfMake
Images
This is simple. Just use the { image: '...' } node type.
JPEG and PNG formats are supported.
var docDefinition = {
content: [
{ // you'll most often use dataURI images on the browser side // if no width/height/fit is provided, the original size will be used image: 'data:image/jpeg;base64,...encodedContent...' },
{ // if you specify width, image will scale proportionally image: 'data:image/jpeg;base64,...encodedContent...', width: 150 },
{ // if you specify both width and height - image will be stretched image: 'data:image/jpeg;base64,...encodedContent...', width: 150, height: 150 },
{ // you can also fit the image inside a rectangle image: 'data:image/jpeg;base64,...encodedContent...', fit: [100, 100] },
{ // if you reuse the same image in multiple nodes, // you should put it to to images dictionary and reference it by name image: 'mySuperImage' },
{ // under NodeJS (or in case you use virtual file system provided by pdfmake) // you can also pass file names here image: 'myImageDictionary/image1.jpg' } ],
images: {
mySuperImage: 'data:image/jpeg;base64,...content...' } }
end of quote
So it looks like you were close.
Can you try a relative path from the root of your website wrapped in single quotes.
Had to write a custom export function to add page margins.
Plnkr
$scope.export = function() {
var exportColumnHeaders = uiGridExporterService.getColumnHeaders($scope.gridApi.grid, uiGridExporterConstants.ALL);
var exportData = uiGridExporterService.getData($scope.gridApi.grid, uiGridExporterConstants.ALL, uiGridExporterConstants.ALL, true);
var docDefinition = uiGridExporterService.prepareAsPdf($scope.gridApi.grid, exportColumnHeaders, exportData);
docDefinition.pageMargins = [40, 80, 40, 60];
if (uiGridExporterService.isIE() || navigator.appVersion.indexOf("Edge") !== -1) {
uiGridExporterService.downloadPDF($scope.gridOptions.exporterPdfFilename, docDefinition);
} else {
pdfMake.createPdf(docDefinition).open();
}
}
Image has to be provided as base 64 encoded, unless using Node.js (as per pdfmake library).
Otherwise, you may need to use a JavaScript function to download and convert an image to base 64.
References:
https://stackoverflow.com/a/37058202/2808230
pdfExport function in http://ui-grid.info/release/ui-grid.js
Found this as I was writing up this answer: Angular UI Grid - Exporting an image to a pdf
I'm experiencing a problem that seems to be reproduced randomly after closing Photoswipe when there is more than one image in the Slick carousel. Visually, the effect is that Photoswipe closes (disappears without any animation), then the right side of the page changes again to black with last photo viewed in Photoswipe visible, then the black background fades to transparent but seems to be still there (it prevents any buttons from being clicked).
In case it's relevant, the Photoswipe open animation don't behave like the demos either - it doesn't zoom in from the thumbnail, it just simply fades in from the center of the page.
Image of the page after problem occurs: https://i.imgur.com/a4XEMxU.png
Here is my implementation using Slick and Photoswipe together:
var carousel = $('#sc');
var pswpImages = [];
var options = {
history: false
};
var count = 0;
for (var fn in data.images) {
var pieces = fn.split('.');
var fullsize = meta_data['media'] + fn;
var thumbnail = meta_data['cache'] + pieces[0] + '_m.' + pieces[1];
carousel.append('<div><img src="' + thumbnail + '" class="sc" data-id="' + count + '"></div>');
count += 1;
$('.sc').each(function () {
$(this).on('click', function () {
options.index = $(this).data('id');
var pswpElement = document.querySelectorAll('.pswp')[0];
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, pswpImages, options);
gallery.init();
})
});
pswpImages.push({
src: fullsize,
msrc: thumbnail,
w: data.images[fn]['x'],
h: data.images[fn]['y']
});
}
// TODO: When closing gallery, get image number, and slick.GoTo that slide
carousel.slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
variableWidth: true,
centerMode: true
});
Could you provide a fiddle?
I suspect the $('.sc').each(function () needs to be outside the for loop, otherwise you are creating an on click event for every img previously created by the for loop.
1st iteration:
create 1 div, .each( ..on('click')) on that 1 img
2nd iteration:
create 2nd div, .each( ..on('click')) on the first AND the second img
..and so on.
So, in the end: clicking an image will start multiple instances of PhotoSwipe, but only if there are more than 1 images - just like you observed. The first iteration ist still fine.
A simple fix could be to call .off() before .on(), like:
...
$('.sc').each(function () {
$(this).off().on('click', function () {
options.index = $(this).data('id');
...
I have a listview that displays a list of userdetails on right and profile pic on left which I get from back end. For downloading and loading the image I'm using a webviewsample image class from github and it works fine. Now I'm need to make the image round. As I searched through web I understand nine slicing is used to do this but I'm not sure how. Each of my listitem has a different background which changes randomly. Below are the sample image of what I have done and what I actually want.
This is my current list view
This is how I need it to be
This is the code of my custom list item that displays this view
Container {
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
layout: StackLayout {
orientation: LayoutOrientation.LeftToRight
}
Container {
id:profileSubContainer
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
layout: DockLayout {
}
WebImageView {
id: profilePic
url: profilePicture
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
scalingMethod: ScalingMethod.AspectFit
visible: (profilePic.loading == 1.0)
}
ImageView {
id: defaultPic
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
scalingMethod: ScalingMethod.AspectFit
imageSource: "asset:///Images/defaultProfile.png"
visible:!profilePic.visible
}
layoutProperties: StackLayoutProperties
{
spaceQuota: 1
}
}
CustomButtonTextArea {
id: userName
layoutProperties: StackLayoutProperties {
spaceQuota: 2
}
text: username
textEditable: false
textAreaStyle: getStyle()
}
}
If you have older version of Qt where this isn't supported directly, a rather hackish way to do is this :
Cut out a circular hole from the background image (Using Photoshop/GIMP etc.) and save it as a PNG.
Now all you need to do is to arrange all the elements in such a way that it appears as if the profile pic has been cut out. If you place your profile pic first and then the background image, background image cover the profile pic, leaving only circular part from it visible (Note that it SHOULD be PNG for this to work).
Correct order will be :
a. Profile Image
b. Background Image
c. Text
You can either write these elements in that order or use the z value of elements.
Image // Background Image
{
z = 2;
}
Image // Profile Image
{
z = 1;
}
Text
{
z = 3;
}
P.S. This is pseudo code, I hope you get the idea. I did something like this with qt 4.8 long back, and it worked liked a charm.
Edit 1.
In case you want to have background of random color instead of images (as you have asked in the comment), you can try to do this using Qt.
Create the custom background with using QPainter or some similar class and some clipping mask to carve out the circular part.
Expose this class as a Qml element.
Use it for your case by passing random colors while drawing.
They talk of something similar here : http://qt-project.org/forums/viewthread/2066
P.S. Haven't tried it myself, but looks like a good direction if you are stuck otherwise.
If you can't use OpacityMask because your version of Qt doesn't support QtGraphicalEffects, you could do the same trick with Canvas, that is supported since Qt 5.0.
Rectangle{
id: root
width: 400
height: 400
color: "gray"
property string imageUrl: "./rabbid.jpg"
Canvas{
anchors{
fill: parent
margins: 50
}
Component.onCompleted:{
loadImage(imageUrl); // Ready to be used in onPaint handler
}
onPaint:{
console.log("Painting...");
var context = getContext("2d");
context.save();
context.fillStyle = "black";
context.arc(width/2, height/2, width/2, height/2, width);
context.fill();
context.globalCompositeOperation = "source-in";
context.drawImage(root.imageUrl, 0, 0, width, height);
context.restore();
}
}
}
The result:
Since Context.globalCompositeOperation = "source-in" is set, context operations will be done inside previous drawings. Take a look to Context2D for more info, and here for a graphical explanation of composite operations.
I have been trying many "solutions" the last 5 days to try and "turn on" clicking in a QML webview object, and I can still not seem to click on any link, on any page.
I am embedding paypal checkout page, and probably it is something very simple I have missed. I tried an empty page with only webview and no options at all but width + height + javascripts (and without js), and I tried below code (and plenty of other stuff), still no clicks. Tried asking on IRC and got response back that "it should always be possible to click, even with the most basic webview setup". I have in the below code changed url from the one containing a real ap-key to just the dev login page, but the problem is the same, regardless if its google.com of paypal or any other site.
Please, anyone know how I can click on anything? I can not click forms either, get a keyboard to popup to fill out forms, or any click.
I am running QML + PySide on Meego platform. I load the below page/rectangle in a Loader object from my main.qml.
Any help would be extremely appreciated.
Note: I did ask same Q on qt-developer network but got no response yet. Trying here, this forums is more populated, so hoping that someone with experience about this problem will read (I noticed I am not the only one with these problems that just "should work").
import QtQuick 1.1
import QtWebKit 1.1
import com.nokia.meego 1.1
Rectangle {
Image {
id: background
source: "./images/bg.png"
anchors.fill: parent
Text {
id: logo
text: "My Fancy Logo"
x: 2
y: 2
font.pixelSize: 24
font.bold: true
font.italic: true
color: "white"
style: Text.Raised
styleColor: "black"
smooth: true
}
Rectangle {
id: rect
x: 0
y: 60
width: background.width
height: background.height - 70
Flickable {
id: flickable
width: parent.width
height: parent.height
contentWidth: Math.max(parent.width,webView.width)
contentHeight: Math.max(parent.height,webView.height)
flickableDirection: Flickable.HorizontalAndVerticalFlick
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
boundsBehavior: Flickable.DragOverBounds
clip:true
pressDelay: 200
WebView {
id: webView
settings.javascriptEnabled: true
settings.pluginsEnabled: true
url: "https://developer.paypal.com/"
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
transformOrigin: Item.Top
smooth: false
focus: true
preferredWidth: flickable.width
preferredHeight: flickable.height
PinchArea {
id: pinchArea
property real minScale: 1.0
anchors.fill: parent
property real lastScale: 1.0
pinch.target: webView
pinch.minimumScale: minScale
pinch.maximumScale: 3.0
onPinchFinished: {
flickable.returnToBounds();
flickable.contentWidth = (flickable.width + flickable.width) * webView.scale;
flickable.contentHeight = (flickable.height + flickable.height) * webView.scale;
}
}
}
}
}
}
}
In your QML markup the PinchArea element is a child of the WebView and thus gets the mouse/touch press events before the WebView. If you move the PinchArea "behind" the WebView in the element hierarchy the links will become clickable (except the three below the login box, because they try to open new browser windows).