I put magnific popup to my site, to display Images in gallery. I love this tool, except one thing. The arrows for changing of images are displayed on the sides of screen, what is little bit inpractical when you have big screen with big resolution. So I want to ask if it is possible to move the arrows inside the image, as it is common for many other image viewiers such as lightbox and so on.
Thank you in advance.
You may just re-append the arrows inside container, here is example http://codepen.io/dimsemenov/pen/JGjHK
I had an issue when building multiple gallery from database. One gallery contained an unique picture and with callback : this.contentContainer.append(this.arrowLeft.add(this.arrowRight));
this picture just won't display (you get an error on this.arrowLeft undefined or Null)
(try it on the codepen example, just erase the second picture from the DOM.You'll see the remaining image can't be opened)
To fix this, i used the following callback instead :
this.contentContainer.append(this.arrowLeft,this.arrowRight);
#raison, this should work with type inline/iframe:
callbacks: {
buildControls: function() {
// re-appends controls inside the main container
this.arrowLeft.appendTo(this.contentContainer);
this.arrowRight.appendTo(this.contentContainer);
}
}
Related
I’m creating an app and need to make a signup/login page. I added a background using a picture and a zstack and on top I have the text and text fields. The text fields are showing up but not allowing me to add padding as well as there is no title text showing. Please help.my code
Did some more testing to find out that this happens whenever I use a textfield over an image. Not sure if this is a bug or not but it seems to be because as soon as the zstack is removed everything works.
At last ive discovered the issue, the text fields are extending way out of the canvas. Ive fixed the width of the textfield as a temporary solution but still looking for a way to fix this relative to the screen rather than the background as the field extends to the size of the image. Let me know if you can help as im just starting to use xcode!
I think its because the image cause canvas to be much more bigger and you use edgesIgnoringSafearea(.all)
Try to use on the image clipped() method and i think it will fix your issue with the padding.
And also try to add foregroundColor to the test fields
below i attached an app help guide screen. I am understanding how to build this screen.
If any body have idea please share here
View with semi transparent background color (backgroundColor:"rgba(0,0,0,0.5)";) and some images on top of it.
So, using images is bad. You'll need images for translations and if you do this as one image you'll need to ensure all devices are covered so your arrows point to the right element.
Minimise images == smaller app.
First thing you'll need to do is a create a blocker view -- so that's a view that will fill the screen and have a black background with opacity.
You can't apply that to the window as everything in it will be semi-transparent so:
Create a transparent Window that fills the screen.
Add to that window a view that fills the window and has opacity say 0.5 and black background
Add to the Window (not the view you just created) the other elements and button -- ideally, these should be individual graphics of the arrows, sized in such a way that you can position them based on the host element (the item they are pointing to / referring to). Use real text so you can handle translations / reduce file size.
So you'll need a way to associate each tip with a control they are anchored too, and that will ensure that regardless of the screen size, the tip will appear in the correct place.
First of all, always give a try before putting questions anywhere because it makes you learn things on your own for long time.
The easiest step for you to do this is to ask your designer to create a complete image just like that & you just have to show it on top.
If you have to show that image in different translations, then you can ask your designer to provide you required translations images.
What I have is an XML feed of data that are basicly like facebook wall posts.
The posts themselves contain text with interspersed images and video links. Now I can parse (using regex) all the links without a problem.
MY question is what is the best way to display this to the user?
Right now I created a tableview and have each row in the table view display a post. It looks great but the images dont display, they are just raw links to an image URL.
Someone suggested to try a webview, and I placed the webview inside of the tableviewrow, but im getting mixed results as for some reason all the webviews (about 20 tableviewrows/webviews) overrun and overlap each other.
Is there a better strategy to display this data in an organized top down way?
Thanks!!
i would extract the content of the xml as follows:
post = this.responseXML;
feed = {
picture: post.getElementsByTag('TagNameOfImage'),
text: post.getElementsByTag('TagNameOfText')
};
then i would use a label for the text
var label = Ti.UI.createLabel({
text: feed.text
});
yourRow.add(label);
and a imageView for the picture:
var iv = Ti.UI.createImageView({
image: feed.picture
});
yourRow.add(iv);
hope i could help you.
putting webviews in a table row is a recipe for disaster.
you need to just add each element to the row view and do the appropriate layout.
take a look here if you are on iOS
corrections to "Using TableViews" from appcelerator wiki to make it work on iOS
or here if on Android
I posted this a week or so ago:
Position simplemodal modal on top of an existing div
and thought that I had solved my problem, but when the window is scrolled, the modal container moves.
I think I need to change it from fixed to absolute positioning, but when I change it in the script, the right side of the container lines up with the left side of the div (but it does stay in the same place vertically).
Here's what I'm doing now:
$('.slider-caption #large-spot-two').click(function (e) {
$('#basic-modal-content-two').modal({appendTo:"#slider1", autoPosition: false});
return false;
});
What's the best way for me to keep the modal container above the div, whether the page is scrolled or not?
Thanks,
Wendy
The plugin was created to be fixed (not move when the page is scrolled, etc.). Changing the CSS position works until the page is resized or scrolled, as you have found.
The code required to change that behavior would require more work that I currently have time for. You might try BlockUI, as it sounds like that would fit your needs better?
I'm using a TabLayoutPanel in a GWT application, attached to the RootLayoutPanel of the page.
Inside each tab I have a ScrollPanel, which is used to display a FlexTable.
Is it possible to make the TabLayoutPanel grow vertically, so the user can scroll the entire page using the browser scroll bar, instead of using the internal ScrollPanel ?
The short answer is: It's not possible with LayoutPanel's. The reason: LayoutPanel's are specific for applications that need to fill the browser client area, or in other words the part that is visible by the user. One of the problems with browsers is to have a widget that has exactly the height of the visible area and also automatically resizes when the browser window is resized. This is one of the problems the LayoutPanels solve.
If you want to use the browser scrollbar and be able to create pages longer than the visible area use the 'normal' Panels.
BTW just FYI you are aware the FlexTable is slow in rendering and if possible better use Grid.
Just add a new style to the TabLayoutPanel:
this.addStyleName("tab-style-content");
And define in your CSS as:
.tab-style-content .gwt-TabLayoutPanelContent
{
overflow: auto;
}
Thus, the property overflow will be overwritten in the gwt-TabLayoutPanelContent and the scrollbar will be shown automatically.
If you make the TabLayoutPanel bigger than the root panel, you will get a browser scroll bar.
If I want to achieve something like this, I always put the TabLayoutPanel in a SimplePanel and add the SimplePanel to the RootPanel. I guess this is not the best way, but it works.
public void onModuleLoad() {
//Create TabPanel
TabPanel tp = new TabPanel();
tp.add(new HTML("Foo"), "foo");
tp.add(new HTML("Bar"), "bar");
tp.add(new HTML("Baz"), "baz");
tp.selectTab(1);
// Create SimplePanel and add TabPanel
SimplePanel sp =new SimplePanel();
sp.add(tp);
// Add SimplePanel to the root panel.
RootPanel.get().add(sp);
}