drien / jquery-flipster Goto Github PK

Hi,

Are there anyways to add carousel indicators like the bootstrap ones?

Thanks.

Hi there,

I'm trying to test out the demos of flipster in safari 5.1.2 and the images don't load.
They work fine in firefox, but not safari. Any way to fix this?

Thanks! Laura

I also noticed an issue with nav button position in IE 9/10/11. The button position is low compared to the "flat" setting and generates vertical scroll bars. I'm using the below CSS to tame it for now. I'll try and investigate to see if there is a better solution and get some screen shots as well.

@media all and (-ms-high-contrast:none)
 {
 .flipster__button { top: 15%; margin-top: -2em; } /* IE10 */
 *::-ms-backdrop, .flipster__button { top: 15% !important; margin-top: -2em; } /* IE11 */
 }

Is it possible to Insert and Remove items from coverflow style? I tried removing the li element removed through JQ and I still see an empty space there, Also I want dynamically add an item into the specified index position. Is it possible? Thanks and appreciate any help on this.

Not really an issue for a seasoned programmer, but I seem to have a problem: First of all, I really like the plug-in and I would like to make it work for me, but I have following issue (possibly a quick fix?)

I use the script as follows: Images loaded with flipster are screen shots of videos we took and I added a class (“cbiFrame”) to the links so that, when the image is clicked, it in turn opens a Colorbox with an iframe to to a given URL… so far so good, however seems I negated the functionality to maneuvering thru the images by clicking on the pref/next image(s) because, as it should, it opens the Colorbox window, displaying the video while moving the carousel in the back ground to the most active image;)

So I wonder: Is there maybe an easy where I could check if the mouse click originated from the front-most image (center image)? Maybe utilize jQuery and add a class to my URL Link (if present) and remove that class from all other images so that I restored your navigation function?

Your help is greatly appreciated,

• Uwe Willenbacher

This slider is not supported in safari but still mention that it supports in safari.

Firstly, what a great implementation of overflow and keep up the good work. Secondly, I have come across a small issue concerning flipster and the bootstrap carousel, the problem is once the flipster js is loaded it stops the bootstrap carousel from working (scrolling stops working entirely).
Would you have any suggestions as to a possible fix?

Regards

I've noticed that under some circumstances the images will stack up on top of each other and not fan out. Noticed seemingly randomly in Chrome 28, Mac. Was immediately fixed by reloading the page. Not sure how to reproduce, but I'll investigate when I can.

Is it possible for the coverflow style to loop like carousel?

It's the easiest way to view what the plugin does

Hi, I have the following issue:

When loading the page for the first time, all images in the carousel display at a very small size. Subsequent loads display images at full size as intended. You can replicate by hard refreshing (holding shift and refreshing the page). Seems to only happen in Firefox. I'm using FF version 32.0.1 on a mac.

I really like this flipster library, and will be using it on the home page of a large site if I can get this resolved. Currently in development so time is of the essence. Thank you!

I have come across a rather interesting bug. I have a website that hides the flipster bit to show a form component, if the page is re-sized while flipster is hidden when you show the flipster bit it collopses. This is a pretty niche bug. Can javascript determine if the page size changes. Would this be worthy of a bug fix? I can have a go at building a fix.

Thanks

I am dynamically loading carousel items. Max is 6 and min is 1. Now, when I have 3 items, there are times when they pile up on a corner. current > prev > past.

I want it to stop using prev and next when I only have 3 items. How do I go about that? Thank you.

Awesome work... not displaying on Android though :/

Any ideas?

Thx,
Jonathan.

Me again :/

Looking to see if it's possible to scroll through the images using a swipe on the track pad and/or on scrolling horizontally in the browser.

This plugin is not working on safari browser, please help as soon as possible .....

Device: Galaxy Note 3
Browser: Default

The first slider don't responds to the swipe gesture, but the sliders change automatically. In other android devices the swipe gesture works just fine.

Does anyone have the same issue, or some advice on how to solve this?

Thanks

Does current flipster support pagination? I'm unable to find pagination property in flipster Options.
Thanks.

All children of .flipster__nav seem to have the class flipster__nav__item--current applied to them even if they are not currently selected.

My config is:

flipContainer.flipster({
    itemContainer: flipItemContainer,
    itemSelector: flipItem,
    loop: true,
    autoplay: 3000,
    style: 'flat',
    spacing: -0.2,
    scrollwheel: false,
    nav: 'after',
    buttons: false,
})

Resulting HTML:

[...]
<ul class="flipster__nav" role="navigation">
    <li class="flipster__nav__item flipster__nav__item--current">
        <a href="#" class="flipster__nav__link">0</a>
    </li>
    <li class="flipster__nav__item flipster__nav__item--current">
        <a href="#" class="flipster__nav__link">1</a>
    </li>
    <li class="flipster__nav__item flipster__nav__item--current">
        <a href="#" class="flipster__nav__link">2</a>
    </li>
    [...]
</ul>

How do I enable the reflection in the slider

How can we refresh flipster plugin ? Lets say we initialized plugin and it works fine, now if onchange event of some dropdown i have to re-initialize li items under ul container which is defined for the flipster. How should be refresh control so images are shown properly ?

I've had fun playing around with this plugin. Would be great if parameters were passed on the onItemSwitch event. My suggestion would be to pass the previous and current item elements.

I'm noticing that after Flipster is initialized, I can no longer use my keyboard for anything. Even basic things like refreshing the page or brining up the code inspector become impossible. Happy to investigate this, but can't really work with the .min files.

The nav buttons position on top of some items depending on screen width.

Hi Adrien,

I'm using Flipster Coverflow. Looks/works great in Safari. But in Chrome, the reflection doesn't display–unless I toggle -webkit-box-reflect rule off and on in Inspector. OR, I can just turn off on of the transition rules and then the reflection magically displays. So add, b/c the Flipster demo displays fine in Chrome.

I'm using it in a WordPress theme. I've also overridden some CSS. Can't figure if it's something not quite right in my code, or a weird Chrome bug.

Any Ideas?

Thanks,
Catherine

is that intended? shouldn't it be a different callback like onResize?
is there a way to detect the difference?

Hello, is possible display in vertical?

we need display the carousel in vertical.

Thanks :)

Images are superimposed on each other
Opera 12.16
Windows 7

When testing flipster on iOS (iphone5/ipad), It is difficult to scroll vertically when the screen is filled with the flipster widget.

You need to find an area not used by the flipster widget to scroll down.

Is there any way to force flipster not to capture vertical swipes?

Many Thanks

Hello,

This script is exactly what i'm looking for...just one more detail and it's perfect!!

Instead of showing 2 images on left and right (to centered one), i would really need to be 3 on left, 3 on right and one centered.

I really need this for an important project, please help :(

Not sure how it can be implemented, but an infinite loop feature might be nice on this.

Dear all,

It is possible to retrieve the index of the selected image on Flipster?

Best regards,

Flavio

Hi,

I discovered Flipster with this demo example:
http://a.drien.com/jquery-flipster/

I prefer the utilisation of Touch Navigation on this old example, that is possible to have the same effect by changing the configuration of the current version of the plugin ?

Thanks.

If i have 3 items, i always want the clicked image on the center & 1 item on each side. Currently i am using 'carousel' style & when i am on the last item there is 2 items on the left & none on the right. So i need a looping style. ????

Is it possible to make the items sortables?

I've made destructor function and seems to be working, not sure on how to implement sortables system though.

function destroy() {
      // Basic setup
      _flipster.removeClass("flipster flipster-active flipster-"+settings.style);


      if (settings.disableRotation)
        _flipster.removeClass('no-rotate');

      _flipItemsOuter = _flipster.find(settings.itemContainer).removeClass("flip-items");
      _flipItems = _flipItemsOuter.find(settings.itemSelector).removeClass("flip-item flip-hidden");

      //Browsers that don't support CSS3 transforms get compatibility:
      var isIEmax8 = ('\v' === 'v'); //IE <= 8
      var checkIE = document.createElement("b");
      checkIE.innerHTML = "<!--[if IE 9]><i></i><![endif]-->"; //IE 9
      var isIE9 = checkIE.getElementsByTagName("i").length === 1;
      if (isIEmax8 || isIE9) {
        compatibility = true;
        _flipItemsOuter.removeClass("compatibility");
      }

      _flipItems.each(function() {
        $(this).html($(this).find('.flip-content').html());
      });
      // Remove navigation if enabled.
      _flipster.find('.flipster-nav').remove();
      _flipster.find(".flipto-prev, .flipto-next").remove();

      _center = 0;     

      // Remove all inline style
      _flipItemsOuter.removeAttr('style');


      // Navigate directly to an item by clicking
      _flipItems.off("click");
      win.off("keydown.flipster");
      win.off("keyup.flipster");
      _flipster
        .off("mousewheel.flipster")
        .off("touchstart.flipster")
        .off("touchmove.flipster")
        .off("touchend.flipster");
}

When we have multiple flipster on the page and use keyboard to navigate through the first flipster, the successive flipsters are getting updated as well.

On investigation, I noticed that you are registering the keyboard events on the body, without checking the target of the event.

My suggestion would be to check if ".flip-content" from the present flipster is present in the "parents" tree of the event's target and only then call the jump function.

Hi,

I am using flipster in Carousel mode, but sometimes the images only appear refreshing the page.
It is not always, but sometimes it happens...

Anybody knows how to solve it?

Best regards,

Flavio

Hi!

How can i change Width and Height of flipster? It is occupying half of the screen...

Best regards,

Flavio

Would be great if there was a way to either vertically center the images or anchor them to the bottom of the current image - more like Apple native coverflow - so that it could better handle having vertical and horizontal images in the same coverflow.

Thanks!!!

@drien,

I'm finally getting back to Flipster since I have another project that can use it. I'm sure you've seen a few small changes pushed to 0.4, but I've got some much bigger changes coming that should help Flipster run much faster and fix a lot of the outstanding issues. I'll push everything to the 0.4 branch once I've done more testing, unless you want me to start another branch.

Lately, I've adopted BEM syntax for most everything. Are you opposed to updating the Flipster classes to be BEM style?

Here's a quick example:

.flipster {}
.flipster--active {}
.flipster--no-rotate {}
.flipster--carousel {}
.flipster--coverflow {}

.flipster__container {}

.flipster__item {}
.flipster__item--past {}
.flipster__item--future {}
.flipster__item--current {}

It makes the classes a little more verbose, but it should help clarify each class's purpose better. Any objections? If not, I'll implement that in my upcoming changes.

Hi,
I have encounter issue that on mobile if in landscape mode, flipster is fit to the whole screen.
Issue that unable to scroll the content because flipster already cover up the whole screen size.

Hi, is it possible to make this plug in autorotate in caurusel stile? please post me where to put code and what i need to write to do this? thanks.

dear,

is it possible to use this plugin as responsive carousel (need to resize images when resizing windows)

• carousel mode like in old version (so no jump to first item as its now)
  i mean this style http://brokensquare.com/Code/jquery-flipster/demo/

I'm using your flipster on a Nexus 7 and I find the responsiveness to be a bit slow when sliding/scrolling. I've hacked around a bit and implemented a touch sensitivity option (basically just implementing a variable to hold the 1.75 divisor used in touch navigation).

I'm also interested in looking if it is possible to adjust the number of "jumps" made based on how fast the user has swiped/scrolled. This would be some kind of speed option.

Would you be interested in merging such options if I created a pull request?

Stumbled across the entry for jQuery Flipster on the jQuery plugin site and noticed it's still on 0.3.2.

Any idea how to update it?

I found this, but since I don't have the original jquery.json file, I'm not sure if it'll work: http://blog.npmjs.org/post/111475741445/publishing-your-jquery-plugin-to-npm-the-quick Doesn't look like jQuery Flipster is on NPM yet.

I am loading the items via ajax and it returns HTML. I then insert that HTML into the container. Then initialize flipster. First call works just fine but the succeeding calls are breaking. It gives me stacked images after.

Anyone out there who can help?

Bower is awsome, and adding this package to their repository is pretty simple, and would also be awesome.
http://bower.io/docs/creating-packages/

Hi there,

This might not be a bug, but I wanted to ask if anybody else had an issue with the past & future items not being vertically positioned the same? I haven't made any changes to the javascript or to the CSS file, but on my project, the "future" items are located about 50px closer to the top of the container than the "past" items are. I can sort of fix it by playing with the transformation and scale, but then they look uneven in a different way.

Was just wondering if anybody else was having this issue and had any suggestions for a solution? Thanks!

Is it possible to force a timed autoplay with this plugin? I've got it up and running, but autoplay could end up being a dealbreaker on the client side.

Cannot read property 'length' of undefined // flipster.js:267