I'd like to replace the current share icon on photoswipe by a picture of a Facebook like/share button. How could I do that? Is it difficult? (I don't have any knowledge in JS).
Alternatively is it possible to always display the social share floating box?
Many thanks,
photoswipe uses a single image "sprite"-fashion for it's icons, so you would have to edit the file dist/default-skin/default-skin.png and replace the section of the graphic that is the share icon.
Unfortunately you can't have the social actions menu always visible - it's behaviour is too embedded and would require some serious hacking.
There is currently an open issue around this - https://github.com/dimsemenov/PhotoSwipe/issues/802 - you could add your voice to the issue if it's important to you.
Related
I am in way over my head, new to S/O and need to get this done as soon as possible. If I am doing this wrong I apologize in advance.
I purchased an extension that was simple enough to install but I need to extend the function just a but. I reached out to the developer to no avail.
Anyway I need to add a close button to the pop ups featured on the home page of this website (http://www.juanlafontalaw.com) Click on one of the hotspots (Red) and the pop up will appear. I simply need to add a close button or X that will allow the user to close the pop up without touching the main screen.
The site is Wordpress based. Plug-in: Visual Composer. The Extension: Visual Composer Add-on Image Hotspot with Tooltip (This is the focal point of my question)
I have no idea where to begin and did not expect to be in this position. And I did not think the develop -who does offer support to totally ignore my
Make a button in html, and use jquery click function to make display none in the pop up
$("#btn-id").click(function(){
$("pop-up").css("display","none");
})
I do apologize for the title if it is inaccurate. (feel free to offer me suggestions on the proper wording if needed.)
My question is for my web page, I would like to do something where you click on a link (or image), and instead of opening a new tab or browser window, you get a box that hovers over your page displaying the image of the link (or smaller image you clicked on). I am not sure if the correct term for this is a pop-up or pop-over window.
The best example of what I would like to do, is if you were to go to amazon.com and you see a product and it says "click here for a larger image". when you do that, a sort of window will display itself over the current page and show you the larger image.
Would anyone be able to give an example of code to see how this would be done as well? I am very thankful for any and all recommendations.
You could use a solution like fancybox, I believe this is what are you looking for http://fancybox.net
If I've understood what you mean, there are tons of jquery plugins to do that, for example http://lokeshdhakar.com/projects/lightbox2/
Here is a link, he has an explanation and code snippets for ya, works great.
http://www.htmlgoodies.com/beyond/javascript/article.php/3881276
I noticed today that if I am logged in to facebook, and have selected one of my alternate business profiles (under the *, use facebook as) then it tries to put my original profile picture and a red box that says "switch" up on my pages that have the like button included using the javascript sdk, in place of the normal like button.
Here is an example of a page on which this happens: http://www.infolists.com/Arts/Painting/000000000128.php
Because I only leave enough space for the like button, it completely blows up my page layout. So that everything in that layer falls behind the layer for the next line.
Unfortunately, you have to be logged in to facebook AND using it as an alternate profile (such as a business or fan page) to see the issue. Which I admit is rare and the reason I never noticed it before.
But there has got to be a workaround for this. I've tried searching but couldn't find anyone else with the same problem.
Any help would be appreciated.
As far as I am aware, fan pages can only like objects within Facebook. The like button on websites are meant for personal profiles only.
Your only option to maintain the same layout would be to fix the div container of the like iFrame to a fixed height. The overflow hidden should also help (already set).
I am working on a project where it would be easier for users to quickly add transactions.
I am very much interested to do something similar to what gmail compose pop up does on the single page
I have no idea how to implement such a thing. Please give me directions about how to do such things
I am interested in building it using AngularJS
P.S Sorry for a broad question, but I really don't know what this is called and don't know what to Google for either
You can construct a popup like that very easily using a regular div element and some CSS. In particular, the position: fixed CSS property will let you put something at a position on the window, no matter how it scrolls.
Here is a simple JSFiddle that demonstrates the technique: http://jsfiddle.net/BinaryMuse/ndr2Q/
You can click the titles of the books to expand their description, which will hopefully make the preview window tall enough to scroll. (If not, just resize the window.) No matter where in the document you scroll, the "popup" window (which is just a regular element with an ng-show and some CSS) stays at the bottom-right of the screen.
You can find libraries, like Bootstrap, that present jQuery plugins to allow you to do popups on the page, but in general they're designed to prevent the user from interacting with the page behind the modal in any useful way. A technique like this allows you to scroll around and use the page in the background similar to Gmail's interface.
Dockmodal is a Gmail like dockable modal plugin that has the option to minimize and restore opened modal dialogs.
Check out these angular JS alerts based on bootstrap:
http://mgcrea.github.io/angular-strap/#/alerts
You can use the provided $modal service that takes a template URL as well :
var modal = $modal({template: '/js/app/views/elements/modal-welcome.html', show: true, backdrop: 'static'});
And shows it up as a popup.
I'm a huge newb when it comes to javascript/jQuery/Ajax. I'm looking to learn how to add a close button to content on my site similar to facebook's wall or youtube's experimental homepage.
Where is the starting point to do this? jQuery UI? Any other packaged solutions?
You just need to have a list of links to the function that you want to execute and hide them.
Then, when you click on the close button, it makes that list appear.
Here's a simple example
http://www.jsfiddle.net/9scYR/