Im looking for a solution too open the PhotoSwipe gallery with a
img link. So there is a IMG with a gallery icon. And i want if the
user click on it that the gallery open.
Have someone an idea how i can handel that?
I found this out. But this open on load the gallery.
<script type="text/javascript">
(function(window, PhotoSwipe){
document.addEventListener('DOMContentLoaded', function(){
var
options = {
preventHide: true
},
instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
instance.show(0);
}, false);
}(window, window.Code.PhotoSwipe));
</script>
Best regargs
I just started working with photoSwipe so I am not positive this will work but it seems to me you only have to call instance.show(0) on a click event.
Assuming I have this element on the page: <a id="launch-gallery" href="#">Click to launch gallery</a> I could add this jQuery click event to launch the gallery:
$('#launch-gallery').click(function(evt){
evt.preventDefault(); // prevent regular click action
instance.show(0); // Make sure 'instance' variable is available to this function
});
If you are not using jQuery, you can do the same thing in native JavaScript (but a little more verbose).
I hope this helps.
Note that I use php (ajax) to deliver the image locations and sizes, so you'll still have to define the json data yourself.
This is how I did it with Jquery:
$('.element').off(); //in case it's a dynamically changing element
$('.element').on("click tap", function () {
var dataForPhpScript = $(this).parents('.gallery').attr("data-attr"); //data for php script
$.getJSON('urlToPHPFunction?dataID=' + dataForPhpScript, function (json) {
openPhotoSwipe(json);
});
});
And here is the photoswipe opening function:
function openPhotoSwipe(jsonData) {
var pswpElement = document.querySelectorAll('.pswp')[0];
// define options (if needed)
var options = {
// history & focus options are disabled on CodePen
history: false,
focus: false,
showAnimationDuration: 0,
hideAnimationDuration: 0
};
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, jsonData, options);
gallery.init();
}
note that jsonData is supposed to look somewhat like this:
[
{
src: 'https://placekitten.com/600/400',
w: 600,
h: 400
},
{
src: 'https://placekitten.com/1200/900',
w: 1200,
h: 900
}
];
I realise this answer is late, but since this came on top while just googling something entirely different (but photoswipe related), I thought maybe this would be useful!
Related
I am trying to use fullpage.js for two different sections on one website. Basically, when a slide is clicked on, it reveals a child wrapper div underneath with its own sections to vertically scroll through before the main section continues on.
Here is my code that I am working with. I'm trying to load it in through ajax but I'm wondering if there is an easier way I am overlooking.
$("#wrapper").fullpage({
verticalCentered: true,
resize : true,
anchors: ['section1', 'section2', 'section3', 'about'],
//menu:'#menu',
customScroll:true,
onLeave: function(index, nextIndex, direction){
//console.log(index+'|'+nextIndex+'|'+direction);
if (direction == 'down'){
$('.section:nth-child('+index+')').animate({'top':'0%'},0)
$('.section:nth-child('+nextIndex+')').animate({'top':'100%'},0).animate({'top':'0%'},500);
} else {
$('.section:nth-child('+nextIndex+')').animate({'top':'0%'},0);
$('.section:nth-child('+index+')').animate({'top':'0%'},0).animate({'top':'100%'},500).animate({'top':'500%'},0);
}
}
});
and then the code that removes it and adds a new wrapper:
$(".sub_section").click(function() {
$("#wrapper").fullpage.destroy('all');
if (sub_section_open == false) {
$("#left_border").animate({"borderLeftWidth" : "0px"}, 300);
$("#right_border").animate({"borderRightWidth" : "0px"}, 300);
$("#top_border").animate({"borderTopWidth" : "0px"}, 300, function() {
$("#left_border").hide();
$("#right_border").hide();
$("#top_border").hide();
});
$(".sub_section .letters").slideUp("slow", function(){
$(".sub_section .content").css({'z-index': 1});
});
sub_section_open = true;
$(".btn_sub_section_close").show();
$( "#wrapper" ).load( "section1.html" );
$("#section1").fullpage({
verticalCentered: true,
resize : true,
anchors: ['ssection1', 'ssection2', 'ssection3', 'ssection4'],
menu:'#menu'
});
}
});
Any ideas? Thanks!
fullpage.js only supports one instance.
It is a fullpage plugin and it is not made to support them as it doesn't make sense. It is full page, all the page will be part of one instance of fullpage.
You can easily see evidences of it in the code, for example in this line:
$('.fp-section').each(function(index){
Any section on the page, no matter which container/wrapper it uses, will be treated inside one single instance of fullpage.
On GitHub, Fullpage.js has labeled the issue as enhancement. So there is a chance we get the multiple instances option in a future version :)
I had used Youtube Popup player for video player in my webapplication, iam trying to change the styles of popup window..but iam not able to do it..i had found cssClass property for applying styles.. here is the link for youtube popup player..http://lab.abhinayrathore.com/jquery_youtube/
How can i resolve it..
You can follow Arunkumar answer if you want to change the defaults of the plugin, so that you don't have to set the options everytime you want to initialize the plugin.
Or, you can set specific properties to each element with the plugin assigned, like this:
$(function () {
var options = {
fullscreen : 0,
color : 'red',
width : 500,
height : 300,
overlayOpacity : 0.9
};
$("a.youtube").YouTubePopup(options);
});
DEMO
Or, instead of creating a variable options, you could just do something like this:
$(function () {
$("a.youtube").YouTubePopup({
fullscreen : 0,
color : 'red',
width : 500,
height : 300,
overlayOpacity : 0.9
};);
});
Hope I could make it more understandable to you!
customize Popup using script
like
$(function () {
$.fn.YouTubePopup.defaults.fullscreen = 0;
$.fn.YouTubePopup.defaults.color1 = 'CCCCCC';
$.fn.YouTubePopup.defaults.width='500';
$.fn.YouTubePopup.defaults.height='300';
$.fn.YouTubePopup.defaults.overlayOpacity='0.5';
});
You can able to change popup defaults above way.
Hope it helps:);
I'm using highslide in conjunction with highcharts and I want to modify the close button, more specifically, I want to call an additional function when a user clicks that "X" button.
When I inspect that "X" button, I get this in my console
<span>Close</span>
I want to do something like this
<span>Close</span>
But I am unable to find where the code for that is located.
I have tried adding this to my header in the html file itself, in addition to the highslide.config.js to manually override but it has not worked.
hs.registerOverlay({
html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
position: 'top right',
fade: 2 // fading the semi-transparent overlay looks bad in IE
});
Could somebody give me a helping hand?
////////////////////////////// updated
Thanks to Jeff B, I was able to accomplish the desired task using code that looks like this (although the example shown by Jeff B also works):
cursor: 'pointer',
point: {
events: {
click: function(event) {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: this.ticker,
maincontentText: '<b>Detail:</b> ' + this.info,
width: 250
});
alert('function goes here');
hs.Expander.prototype.onBeforeClose = function(sender) {
alert('function goes here');
}
},
}
},
Why modify the button? Highslide provides an onBeforeClose prototype:
hs.Expander.prototype.onBeforeClose = function (sender) {
myotherfunction();
}
There is also an onAfterClose prototype if you want different timing.
onBeforeClose Documentation
Demo: http://jsfiddle.net/xjKFp/
I want to create an animation to scroll the page smoothly when clicking on anchor links, just like jQuery.ScrollTo plugin (http://demos.flesler.com/jquery/scrollTo/) does it.
I tried making it using YUI 2.x Animation utility, by animating the value of the property document.activeElement.scrollTop. It works on webkit only :'( - on the other browser, nothing happens - not even an error is raised.
goToAnchor = function(e, id) {
var targetToGo = Dom.get(id),
scrollToTarget = new Animation(document.activeElement,
{
scrollTop:
{
from: document.activeElement.scrollTop,
to: targetToGo.offsetTop
}
}, 1, Easing.easeOut
)
Event.preventDefault(e);
scrollToTarget.animate();
}
What I'd like to know is if there's a plugin that does this for YUI 2.x or how to do a cross browser compatible code to do so.
Thanks!
You need to keep in mind that depending on browser you might need to scroll the html or the body element.
(practially, you need to scroll both to be sure)
Also at http://developer.yahoo.com/yui/animation/#scroll i see
var element = document.getElementById('test');
var myAnim = new YAHOO.util.Scroll(element, {
scroll: {
to: [ 500, test.scrollTop ]
}
});
myAnim.animate();
Maybe that is what you are looking for (still you will have to animate both html and body)
<script>
(function() {
var scrollingBody = document.body;
if (YAHOO.env.ua.gecko){
scrollingBody = document.documentElement;
}
(new YAHOO.util.Scroll(
scrollingBody,
{
scroll:
{
to: [0, 50]
}
},
0.7,
YAHOO.util.Easing.easeOut
)).animate();
})();
</script>
I'm just working on my personal website, giving it a bit of a revamp.
I've implemented a sort of 'accordion' menu feature, where if a menu button is clicked, the "non-clicked" buttons disappear, and then the clicked button is moved to the top of the list, where then a panel animates down in which I will be putting text content.
In Firefox this works perfectly, however in IE and Chrome the button jumps to the top of the page and then animates to position, instead of animating from where it started from.
Anyone any ideas how to fix this?
Offending code:
function Accordion(e)
{
var o =
{
init: function()
{
o.button = e;
o.addClickHandler();
},
addClickHandler: function()
{
o.button.click(function(){
o.button.removeClass('unselected');
o.button.addClass('selected');
o.fader();
});
},
fader: function()
{
$j('.unselected').animate({opacity:0}, 1000);
var wait = setInterval(function() {
if(!$j('.unselected').is(":animated") ) {
clearInterval(wait);
o.shifter();
}
}, 100);
},
shifter: function()
{
o.button.css({'position':'absolute'});
o.button.animate({top:91}, 500, o.createInfoBox);
},
createInfoBox: function()
{
var buttonParent = o.button.parent();
buttonParent.append("<div class='infoBox'></div>");
$j('.infoBox').animate({height:390});
}
}
o.init();
return o;
}
}
The issue lies within the shifter function, where I'm setting the position to absolute and then animating so the desired effect can be achieved. I understand why it's doing this (presume it's just resetting itself to top:0 and then animating to top:91) but does anyone have a quick solution? It's late and it's doing my head in.
Much appreciated,
Dave
HAve you tried using the current position of the element when you switch it to absolute... for example:
function() {
var currentp = $(this).offset();
o.button.css({'position':'absolute', top: currentp.top});
o.button.animate({top:91}, 500, o.createInfoBox);
}
Note there are two different offset functions and im not sure which one you want use here so you might want to review the docs on that.
Also you could always just re-theme the jQuery-ui accordian and save yourself the trouble ;-)