Galleria slider from left—right to top—bottom - javascript

I'm tryin to implement the galleria.js (slideshow) on my website.
All I want is to have the slides entering from the top of the screen and going out from the bottom, instead of the classic right—left.
I've tried to rotate the images 90% and it kinds of work but I'm sure there's an easier more correct way.
Thanks.

The isn't any way to do it through the options. here are a list of configurables from the galleria.js site
The only way would be to use extend and create a plugin to do what you need:
Galleria.run('.galleria', {
extend: function() {
// Custom code/functionality goes here
}
});
You can then distribute this to anyone else who needs the same functionality.

Related

Disable touch swipe on fullpage.js

I'm using the fullpage.js plugin for a single page marketing site.
I'm using navigation links to jump to scenes (all horizontal) around the site so I want to disable to the touch/swipe (between scenes) feature as it interferes with other touch elements.
I've been though all the documentation but I can't find out how to achieve this.
Any help is welcome. Thanks, Jack.
Just use the option autoScrolling:false when initializing the plugin. This way the mouse wheel won't swipe and neither the touch events will.
If you want to keep the mouse wheel scrolling (for computers) but disable the touch events (touch devices), then I would recommend you to initialize the plugin in a different way for touch devices.
In order to do so, I recommend you to do something like this.
Update 2016:
You can use the options responsiveWidth or responsiveHeight as well as the class fp-auto-height-responsive.
The options will disable the autoScrolling feature for mobile devices under the specified dimensions. Examples available in the examples folder of fullPage.js or online.
You can also use responsiveSlides and force the transformation of horizontal slides into vertical sections on responsive. This can be done through the Responsive Slides extension.
Update Sep-2014:
A method named $.fn.fullpage.setAllowScrolling can also be used with this same purpose. It will disable both the touch scrolling and the mouse scrolling.
Update Jun-2014:
autoScrolling:false only disables the vertical scrolling.
If you want also to disable the horizontal one, there's no way to do it right now. You would need to modify a bit the plugin.
Inside fullpage.js replaces this:
function removeTouchHandler() {
if (isTablet) {
$(document).off('touchstart MSPointerDown');
$(document).off('touchmove MSPointerMove');
}
}
For this:
$.fn.fullpage.removeTouchHandler = function (){
if (isTablet) {
$(document).off('touchstart MSPointerDown');
$(document).off('touchmove MSPointerMove');
}
};
And then, when you initialize the plugin, call that public function in the afterRender callback like so:
$(document).ready(function() {
$('#fullpage').fullpage({
afterRender: function(){
$.fn.fullpage.removeTouchHandler();
}
});
});
Don't call fullpage twice. Just add the afterRender function inside your initialization.
The setAllowScrolling function also accepts a second argument for directions so the following can be used to disable left/right scrolling/swiping:
$.fn.fullpage.setAllowScrolling(false, 'left, right');
As of June 2017, none of the previous methods worked for me. The simplest way I found to effectively disable touch is as follows.
In jquery.fullPage.js you will find the function setAllowScrolling
function setAllowScrolling(value, directions){
if(typeof directions !== 'undefined'){
directions = directions.replace(/ /g,'').split(',');
$.each(directions, function (index, direction){
setIsScrollAllowed(value, direction, 'm');
});
}
else if(value){
setMouseWheelScrolling(true);
addTouchHandler();
}else{
setMouseWheelScrolling(false);
removeTouchHandler();
}
}
When fullpage is initialized it automatically calls setAllowScrolling(true), triggering the else if(value) condition above. Simply comment out the call to addTouchHandler() to fully disable it, or add some sort of condition for it to be called, eg
var winw = $(window).width();
if (winw > 480){
addTouchHandler();
}
With this method the left and right arrows still work when tapped, so horizontal slides can still be navigated. It should be noted that using $.fn.fullpage.setAllowScrolling(false, 'left, right'); will also disable the arrows.

Jquery - Adding classes to multiple elements at once?

I'm having issues with jquery and bxslider on my site, i've been racking my brain over this for a while but can't seem to find any way to make it work how i'd like,
I'm building a slider using bxslider and basically i want the current slide to have a class of 'active' or an opacity of 1, whereas i'd want all other images on the sliders to have an opacity of 0.7.
i have a potential 'infinite' number of slides on my page and this is where i seem to be running into problems. (it's being used in a wordpress loop, and each post is coded to pull the images from the post into the slider)
you can see what i've got so far at: http://jsfiddle.net/bu5cd/
$(document).ready(function(){
$('.bxslider').bxSlider({
onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
$('img.attachment-thumbnail-size').removeClass('active');
$('img.attachment-thumbnail-size').eq(currentSlideHtmlObject+1).addClass('active')
var current = $('img.attachment-thumbnail-size').attr('id');
}
});
});
you can see it works for the first slider somewhat, but it doesn't carry through to the second slider.
Cheers guys, been racking my brain over this for hours! I'm open to using another slider if that would help achieve the desired result, there doesn't seem to be an awful lot of documentation around for bxslider.
Your first issue is that you have your parameters all wrong in your callback function. The first parameter is a jquery object pointing to the current slide. Then, you are selecting the "n-th" img on the whole page instead of in relation to your current slideshow. Using this current slide jquery object, you can find only the appropriate images instead of affecting all sliders. Try this:
$(document).ready(function () {
$('.bxslider').bxSlider({
onSlideBefore: function ($el) {
/* remove the class from all images of this slider only */
$el.closest(".bxslider")
.find('img.attachment-thumbnail-size')
.removeClass('active');
/* add the class to the image within the current slide */
$el.find('img.attachment-thumbnail-size')
.addClass('active');
}
});
});
http://jsfiddle.net/bu5cd/3/

carousel trigger when continuous scrolling not working

The carousel (caroufredsel) scroll (check this for example) continously to the left. When I hover to an arrow to the right it will stop scrolling then it will reverse it's direction. I tried using custom events but it appears that it's not working. Here's a code of the carousel.
$('#gallery').carouFredSel({
width: "variable",
auto: {
items : 4,
duration :"40000",
easing :"linear",
timeoutDuration :0,
pauseOnHover :"immediate"
},
items: {
visible: 3
}
});
Now my custom event that will cause the carousel to reverse is direction is like this. But it's not working until the whole items where finished scrolling. What I want to achieve is to instantaneously reverse the direction when hovering.
$('a.prev').hover(function()
{
$('#gallery').trigger("pause");
$('#gallery').trigger("configuration",["direction",right]);
$('#gallery').trigger("play");
}
The code above doesn't work and I've tried different events that will simulate the reversal of scrolling but had no luck with it.
If there's no workaround for this. I'm willing to change another plugin that will easily do the work. If you know something that can do it easily please leave your suggestions. Thank you very much!
That totally depends how the carousel is implemented. A possible solution might be to stop the eventPropagation. It may or may not work depending on the implementation of the carousel.
$('a.prev').hover(function(event)
{
event.stopPropagation();
$('#gallery').trigger("pause");
$('#gallery').trigger("configuration",["direction",right]);
$('#gallery').trigger("play");
}

Code from scratch an image cropper AND resizer (at same time) in jQuery/javascript?

We are coding a rather simple Javascript (jQuery) image cropper & resizer. Basically, for now, only features needed are indeed crop and resize.
I have been checking a few jQuery plugins like JCrop etc. and it seems there's no plugins doing both things at same time. Lots of croppers OR resizer, but not the two features on a same "natural" image view at same time. By natural I mean that examples like this (bottom right) are not very nice visually for users :
http://jsfiddle.net/opherv/74Jep/33/
Although I guess this would be a possible way to go to have the two features at same time. Though you can see this example only zooms too currently and it is qualified as using "ugly hacks" by the author himself to do so :
function changeZoom(percent){
var minWidth=viewport.width();
var newWidth= (orgWidth-minWidth)*percent/100+minWidth;
var newHeight= newWidth/orgRatio;
var oldSize=[img.width(),img.height()];
img.css({ width: newWidth+"px", height: newHeight+"px" });
adjustDimensions();
//ugly hack :(
if (img.offset().left+img.width()>dragcontainer.offset().left+dragcontainer.width()){
img.css({ left: dragcontainer.width()-img.width() +"px" });
}
if (img.offset().top+img.height()>dragcontainer.offset().top+dragcontainer.height()){
img.css({ top: dragcontainer.height()-img.height() +"px" });
}
}
We are rather looking for the possibilty to use a cropper frame/zone (as we see the most often on the web) + a zoom/de-zoom option on the image (handles on the border of the image for example)
Since we only need those two features we thought we would code this from scratch or almost as we don't want to add other javascript files/plugins which will be overkill anyway being packed with other features we will not need (at least for now).
The question is: is there a specific difficulty at trying to code the display of an image re-sizable by straightforward handles & croppable by a frame/zone selection (which would also be re-sizable on its own and draggable around so a user can fine tune which part of the image he wants)?
Are we definitely better separating the two features ?
Thanks a lot for your help.
Tried this plugin??
http://code.google.com/p/resize-crop/
It does both crop and resize

Galleriffic and Loupe Magnify Issue

I'm using two plugins which independently work correctly. Galleriffic and Loupe are the two plugins. What I'm trying to do is have the large image in Galleriffic also have a magnify on hover effect, which is what Loupe is for. I've had to add one line of code newSlide.find('a img').addClass('magnifyPic'); to the Galleriffic plugin in order to get a class on the image, which should be used by Loupe to activate the magnify effect. Below are the two calls for the plugins.
jQuery(document).ready(function($) {
var gallery = $('#thumbs').galleriffic({
'imageContainerSel': '#bigPics',
'enableBottomPager': false,
'renderNavControls': false,
'renderSSControls': false,
'enableHistory': false,
});
$('.magnifyPic').loupe({
'default_zoom': 300,
'shape' : 'rounded',
'default_size' : 160,
'glossy' : false,
'drop_shadow' : false
});
});
The problem is that absolutely nothing happens when I hover over the large image. Independently the two plugins function correctly, but don't seem to want to work together. If I understand it correctly, the Galleriffic plugin can take callback, functions, etc. in its options, so I guess my question is: How do I integrate the Loupe call into the Gallerific call? Or is that the correct way to go about making Loupe work with only the large image in a Galleriffic gallery? I've tried removing, adding, modifying lines of code to both plugins, but can't seem to get them to work together.
Search for image.src in jquery.galleriffic.js. It should appear twice (around line # 338 and # 611). Add the following line after image.src = ...:
image.src = ...
$(image).loupe();
Note: I also added this to my CSS. Before this adding this CSS rule, the loupe was causing very minor enlargement (maybe I am using the plugin wrong?):
​.loupe img {
width:800px;
height:800px;
}​
I posted the example on github. You can try it out here http://ted-piotrowski.github.com/example-gallerific/

Categories

Resources