vanderlee / coverflow Goto Github PK

Hi,

Already solved this issue so I thought I'd share.
The issue was with setting the index.
I have a cover flow that can have up to 200 covers
so it slows the animation considerably.

I used your .coverflow('index', position) method to change
but it was taking a lot time to transition from first to last or vice versa.
There is a workaround however as seen in the following code snippet.
It skips the transitioning and goes straight to the index you want.
you just need to call the index you want, then call the one above it
and finally call the one you want again.

$('.firstPos').click(function() {
    $('.coverflow').coverflow('index', 0);//The index you want to go to
    $('.coverflow').coverflow('index', 1);//The one above it
    $('.coverflow').coverflow('index', 0);//The index you want to go to
});

$('.middlePos').click(function() {
    var middle = Math.floor(($('.cover').length - 1) / 2);
    $('.coverflow').coverflow('index',middle);
    $('.coverflow').coverflow('index',middle);
    $('.coverflow').coverflow('index',middle+1);
});

$('.lastPos').click(function() {
    $('.coverflow').coverflow('index', -1);
    $('.coverflow').coverflow('index', -2);
    $('.coverflow').coverflow('index', -1);

});

Best,

Peader

i can't add next and prev arrow in this slider can you please help me to edit code ? as soon as possible

When doing something like this:

$(".coverflow").coverflow('index', 5);

It would be incredibly awesome to have an event that fires once the newly selected index has completed animating and is visible/in-scope. Right now, as far as I can tell, there isn't a way to do that without resorting to trying to use animateComplete which fires on each frame, and trying to calculate when you are at the new one. Hope that makes sense!

Cheers.

Is there any way to get infinte loop ?

How to add a scroll bar

Very strange issue. Sometimes, only the currently selected index cover will be shown after I init. Once I hover over it and move the mouse wheel, everything is fine, and the other covers appear. Doesn't happen all the time, maybe about half the time.

Any ideas? Thanks - and awesome plugin, btw!

Hi,

I have noticed that the container's height calculation gives 0 when using images and no CSS height: 240px;.

I think it happens because images are loaded in async manner and their dimensions are not known at the time of the calculation. So one of the solutions is to set height in CSS.

There probably is a way to detect that we are using images and recalculate height when they are loaded?

Thank you.

if change the script to the up-to-date version it won't work, any method or function needed to be modfied to make it works?

Swiping up or down at the moment defaults to the same behavior as swipe right, decreasing the index, which could be a big inconvenience to the user.

Hello,

I have a really newbie question. I am using the coverflow in my App and I am appending covers to the end and I want to call the refresh method but I don't seem to be able to do it.

I am calling:

$('#preview-coverflow').coverflow.refresh();

Please can you help me to write the correct command?

Thanks

Hi,

First very great plugin,

my issue is that the coverflow script only show one cover (but in the dom i see all my cover) only when i change the size of the screen manually that all the cover load.

somebody got the same issue ?

Thanks

I have tried a few lightbox scripts with coverflow and I am having an issue with the covers showing thru the opened lightbox image in Safari ( version 9.01). Seems ok in firefox and Chrome.
I have tried setting my lightbox image z-index to a much higher value than the cover with no luck.

Hey,

I'm using coverlfow with a complex object for each cover (an image and a header), and I'd like to have different behavior when clicking on the header and the image.
I noticed that the confirm event passes two arguments - the event and the element. The event.target, however, doesn't contain the original element that was clicked, but the entire cover (the div with the 'current' class). Therefore - no way to differ the clicks on the header and on the image.

Any chance it is possible to pass also the originally clicked element?

Thank you,
Irit.

I found out that animateComplete fires a lot of times, not just once, so there's no reliable way to detect the ending of an animation.

Hi,

Great plugin.

It would be great if you can please explain the role of the dependencies and document it a little.

For example, what jQuery UI features are needed if I would like to download a version from the website?

What are these:

• markdown.converter.min.js
• jquery.interpolate.js

Thank you for your help.

Mr Alexander

nice plugin, but it only starts flowing accross the pics when releasing the mousebutton. i think there is a lot todo in event handling, so the plugin could know if it should flow as long the mouse is pressed or if it should stick with the next pic in the list.

when moving from one cover to another on firefox, the animation transition zooms in to the full screen

Plugin makes subscription on window (keydown, resize) so it must have destroy method in order to unsubscribe. Lack of destroy method leads to memory leak.
It becomes a problem when this plugin is used in single page application, where no page reloads at all.

This coverflow is horribly slow on mobile / WebViews (Android & iOS). Are there any means to accelerate swipe performance?

Hello, would it be possible to add bower.json for this project?

i am trying to change the current card in coverflow to next one programatically, like after a ajax call. How can i do it.

Found that if we remove mouse-wheel js from our page, scrolling above the coverflow in chrome, all items is set to invisible.

A suggestion to add the option to enable/disable mousewheel ( especially) and keyboard navigation.

It is not an event to fire only once and switched timing?

I'll keep posted here.

Scenario: Use coverflow with less then 8 images result in this error. How can we bypass it ?

jquery-coverflow.js:278 Uncaught TypeError: Cannot read property 'offsetWidth' of undefined
    at t.(anonymous function).(anonymous function)._frame (file:///C:/DEV/WIP/HTML5/Components/coverflow-master-reflection/scripts/jquery-coverflow.js:278:83)
    at t.(anonymous function).(anonymous function)._frame (https://code.jquery.com/ui/1.12.1/jquery-ui.min.js:6:4499)
    at t.(anonymous function).(anonymous function)._setIndex (file:///C:/DEV/WIP/HTML5/Components/coverflow-master-reflection/scripts/jquery-coverflow.js:235:10)
    at t.(anonymous function).(anonymous function)._setIndex (https://code.jquery.com/ui/1.12.1/jquery-ui.min.js:6:4499)
    at t.(anonymous function).(anonymous function)._create (file:///C:/DEV/WIP/HTML5/Components/coverflow-master-reflection/scripts/jquery-coverflow.js:194:9)
    at t.(anonymous function).(anonymous function)._create (https://code.jquery.com/ui/1.12.1/jquery-ui.min.js:6:4499)
    at t.(anonymous function).(anonymous function)._createWidget (https://code.jquery.com/ui/1.12.1/jquery-ui.min.js:6:6645)
    at new t.(anonymous function).(anonymous function) (https://code.jquery.com/ui/1.12.1/jquery-ui.min.js:6:4063)
    at HTMLDivElement.<anonymous> (jquery-ui.min.js:6)
    at Function.each (jquery-2.2.4.min.js:2)

For rendering server images atm we can use a loadScript to start coverflow at right time. Looking for ways to bypass that too.

for (let index = 0; index < data.length; index++) {
            $('#preview-coverflow').append("<img class='cover' src='" + data[index] + "' />");

            if (data.length - 1 === index) {
                loadScript("scripts/jquery-coverflow.js", createCoverflow);
            }
        }

/**
 *  Simple node.js style script loader for modern browsers
 **/
function loadScript(src, cb) {
    var script = document.createElement('script');
    script.async = true;
    script.src = src;
    script.onerror = function () {
        cb(new Error("Failed to load" + src));
    };

    script.onload = function () {
        cb();
    };

    document.getElementsByTagName("head")[0].appendChild(script);
}

Hello,
You wrote great plugin. Thanks.

I made small change for calculating maxHeight correctly (line 74):

maxHeight = Math.max.apply(null, covers.map(function(){
    return $(this).height();
}).get()),

Everything works well under IE, except for the click event. I'm just creating a PR which fixes this.

Hi,

Is there a way to display a text in the selected cover? following the demo, a text can be displayed below the cover, possible to display it on top of the cover photo? Thanks.

  select:       function(event, cover) {
              var img = jQuery(cover).children().andSelf().filter('img').last();
              jQuery('#photos-name').text(img.data('name') || 'unknown');
            }

Below the coverflow need to display the dots/ to select by click like pagination. How can i set it up ?

I have been using this for changing picture displays without reloading the page but just destroying coverflow, rebuilding the image list and reapplying coverflow. I saw the effect of reduced height on the outer coverflow-div some time cutting off images.
After extending the _destroy function with this one line everything works flawlessly.
" this.element.height(''); "

I haven't checked to see if anything else needs to be unset/removed on destroy, but so far everything works fine.
Love your function. Didn't want to fork for this simple fix.

Hi,

Firstly thanks for the great widget.

I was wondering if it would be possible to slightly improve the 3D CSS fallback support. For an example view this page in IE9: http://www.jqueryscript.net/demo/Powerful-jQuery-Plugin-For-Cover-Flow-Effect-Vanderlee-Coverflow/ .

Perhaps just by giving the selected element a greater margin on the sides and reducing the overall horizontal width?

Thanks again!

Is it possible to focus the coverflow component on page load? Arrow keys do not seem to work unless I click on the component first.

I tried coverflow in desktop browser and it work ok. "confirm" event is triggered when click on selected img, but i cannot triggered this event on mobile with fingers.

Hi.

In the docs you mention that refresh method should be ran when adding/removing items.

It seems that the items that are added after initial widget creation are not displayed and function properly.

Here is a jsFiddle that showcases the problem:

http://jsfiddle.net/mickeyvip/29yna57h/

Click add button a couple of times to see it.

Thank you.

.

In Firefox, Safari and Chrome on Mac 10.8.5, clicking on images does not move that image to focus, nothing happens, only moves with trackpad and arrow keys. On Safari, images disappear one by one as they are scrolled with the keyboard leaving just one showing at the end.

$(function() {
if ($.fn.reflect) {
$('.coverflow .cover').reflect(); // only possible in very specific situations
}

    $('.coverflow').coverflow({
        index:          6,
        density:        2,
        innerOffset:    50,
        innerScale:     .7,
        animateStep:    function(event, cover, offset, isVisible, isMiddle, sin, cos) {
            if (isVisible) {
                if (isMiddle) {
                    $(cover).css({
                        'filter':           'none',
                        '-webkit-filter':   'none'
                    });
                } else {
                    var brightness  = 1 + Math.abs(sin),
                        contrast    = 1 - Math.abs(sin),
                        filter      = 'contrast('+contrast+') brightness('+brightness+')';
                    $(cover).css({
                        'filter':           filter,
                        '-webkit-filter':   filter
                    });
                }
            }
        }
    });
    $('.coverflow').coverflow({index:1});
});

I tried above code but still the selected index is 6.Please help me how to modify the individual options are declaration of coverflow call.

Is there / will there be a function to set a timer, to automatically skip to the next picture?

I am using ionic, and my init code is basically :

                        $('.collection-repeat-container').coverflow({
                            easing: 'easeOutElastic',
                            duration: 'slow',
                            width: 300,
                            height: 600,
                            visible: 'density',
                            selectedCss: {
                                opacity: 1
                            },
                            outerCss: {
                                opacity: .1
                            },
                            confirm: function() {
                                console.log('confirm?');
                            },
                            change: function(event, cover) {
                                var img = $(cover).children().andSelf().filter('img').last();
                                $('#coverflow-title').text(img.data('name') || 'unknown');
                            }
                        });

but I only see one cover, if I scroll - it sort of "flips" left and right for others but you can only ever see one. How can I get it to show all covers in the background?