coverflowjs/coverflow

A jQueryUI powered CoverFlow component

coverflow's Issues

IE9 Alignment issue

In IE9 the images are not aligned as per other browsers (see screenshot).

I think it has something to do with the transform?

Cheers

Getting started Instructions

Hi, Great work on this. A bit of a struggle to get it working properly and a few questions.

First a note about the files. Even though the versions match, there are differences between the files on the Git page and the package download on the Welcome page http://coverflowjs.github.io/coverflow/ The git build is 2015-09-xx while the Welcome page package is from March 2014. It's probably a pain to keep both those in sync, I'd consider removing the link from the Welcome page.

The getting-started instructions being so minimal led me to look at the source of the demo for help and that leads to the following questions and comments.

Comments: Building the demo with require just removes an easy source view at the demo. Eventually found what require loaded in inspectorTools, and see smartresize.js required. Is this necessary, I don't see it called within coverflow.js rather a function called debounce(). Also would have saved me a couple of hours if I'd found main.js in the source to get some formatting tips, and not had to re-invent the cool #license feature from the demo (which I still haven't mastered to get right. Same goes for compressed css, the developer can do that themselves, and it just makes it harder to understand the project.

Responsiveness: Without your style.css file the project is not responsive at all. And the majority of the css requires a #wrapper div placed around the page to be effective. If it saves anyone some time add the following css to your project in addition to the coverflow.css (don't see any reason to use the #wrapper id). Without that it won't scale to mobile sizes. Don't you think that should be part of coverflow.css?

.ui-coverflow-wrapper{
    height:480px;
    overflow:hidden;
}
@media only screen and (max-width:320px){
  .ui-coverflow-wrapper{
      height:200px;
      }
  }
@media only screen and (min-width:321px) and (max-width:480px){  
    .ui-coverflow-wrapper{
        height:240px;
        }
    }
@media only screen and (min-width:481px) and (max-width:767px){  
    .ui-coverflow-wrapper{
        height:280px;
        }
    }
@media only screen and (min-width:768px) and (max-width:1024px){  
    .ui-coverflow-wrapper{
        height:360px;
        }
    }

.ui-coverflow-wrapper #coverflow{
    min-height:200px;
    max-height:440px;
}
.ui-coverflow-wrapper #coverflow>img{
    width:400px;
    height:400px;
}
@media only screen and (max-width:320px){
  .ui-coverflow-wrapper #coverflow>img{
    width:160px;
    height:160px;
    }
}
@media only screen and (min-width:321px) and (max-width:480px){
  .ui-coverflow-wrapper #coverflow>img{
    width:200px;
    height:200px;
    }
}
@media only screen and (min-width:481px) and (max-width:767px){
  .ui-coverflow-wrapper #coverflow>img{
    width:240px;
    height:240px;
    }
}
@media only screen and (min-width:768px) and (max-width:1024px){
  .ui-coverflow-wrapper #coverflow>img{
    width:320px;
    height:320px;
    }
}

Again thanks for a great tool.

Init transformation broken if there is no image value in JSON data

There is data:

[{ "image": "..." }, { "image": "..." }, { "image": "" }]

The third object in array is broken: there is no valid image value, it's an empty string instead of

In this case transformations of coverflow-hit on initiation are broken

Running "tests" on server or locally gives errors

I may be missing something but running the tests visual_classic.html or visual_3d.html locally or on a server generates errors and fails to run. Seems many jqueryUi files are missing, but even setting up a simple demo using the your html fails to initialize the coverflow (although if I run the same code on the page in the console, it works).

$('.coverflow').coverflow({active : 3});

Simple Demo Error:

TypeError: $(...).coverflow is not a function
http://macosxsupport.com/coverflow-3.0.0/coverflowjs%20%E2%98%85%20welcome.html
Line 33

Tests Errors:
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (jquery.ui.core.css, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (jquery.ui.core.js, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (jquery-1.10.2.js, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (jquery.ui.widget.js, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (jquery.ui.effect.js, line 0)
[Error] ReferenceError: Can't find variable: jQuery (support.core.js, line 124)
[Error] ReferenceError: Can't find variable: jQuery (support.transform3d.js, line 148)
[Error] ReferenceError: Can't find variable: $
global code (renderer.3d.js, line 152)
[Error] ReferenceError: Can't find variable: $ (renderer.classic.js, line 150)
[Error] ReferenceError: Can't find variable: jQuery (coverflow.js, line 621)
[Error] ReferenceError: Can't find variable: $
global code (visual_classic.html, line 52)

Lack of documentation

Love the problem this project solves and I'm keen to use it on a current project but the documentation doesn't clearly explain what the dependencies are. The main.js (require file) illustrates exactly which UI files are required but the statement "This minimal implementation should already work" seems misleading as the only two items listed in the checklist are JQuery and the coverflow files.

Similarly, I can't find anything about which browsers are supported and which ones it has been tested.

Also, when I run the basic demo using the code supplied on the Getting Started page it looks pretty terrible and nothing like the screen shot featured on the github homepage.

Hope these comments help

select Event seems to fire once when the page loads, but never when its supposed to. [Bootstrap Conflict]

select Event seems to fire once when the page loads, but never when an item is clicked or when the select(), prev() or next() methods are used.

Am I the only one experiencing this?

$(document).ready(function() {
$('#coverflow').coverflow(
{
select : function(event ,ui){
$('#coverflow a').removeClass('active');
$(ui.active[0]).addClass('active');
console.log(ui.active[0]);
}
}
);
});

Pre-release

@basti1253 how would you feel about us tagging and doing that pre-release we had discussed? I think the list of things we would need to do to get that off the ground would be minimal.

I see us needing: some more code examples in the README, further testing and tagging.

Is there anything else implementation wise you felt we needed to address before doing this? Would love to get a few more folks involved to help rock this :)

Add example on how to implement swipe support with coverflowjs

I searched through the docs and couldn't find an example on how to integrate swipe support with coverflow and hammerjs/jquery-mobile. Please provide an example demo

Unit tests for "beforeselect" event

The "beforeselect" event is not currently tested and was found to not be transmitting the item being selected but instead hardcoded to this.activeItem.

I have code to change the event, but no test yet.

A few ideas

A few ideas, but feel free to shoot down :)

• I imagine a few developers will be wondering if you can use the left/right keys to navigate the coverflow. Is it worth us including a separate demos page which showcases this? In the future it might also give us a place to show things like the horizontal scrollbar navigation of the coverflow which we had in an earlier version (though that was super-coupled!).
• Pretty much all versions of the coverflow have relied on UA testing to detect IE. Is there a better way of us doing this where we can rely on feature detection instead?
• Would you mind if we used album artwork for the demo imagery? (e.g like this) to showcase? These images tend to really 'pop' and might look good.

I'm happy to help with some of these but just checking what your thoughts might be.

AJAX Reload

How do I reload coverflow when dynamically adding elements?

Don't have any options for looping

#feature: Integration with knockout

Hi guys,

I'm trying to integrate this wonderfull coverflow plugin with knockout but am failing to do so.

I created a stackoverflow question here: http://stackoverflow.com/questions/25893562/coverflowjs-and-knockout

You can find a jsfiddle inside the question. I am using rawgit as the cdn for this fiddle.

Scrollbar and image alt ?

I couldn't find it in the options, is there a way to add text under every image (the alt text for example) like on itunes?
http://www.stepbystep.com/wp-content/uploads/2013/04/How-to-Set-iTunes-to-Automatically-Update-Songs-on-an-iPod.jpg
If not is it planned ?

Unit tests for widget.destroy()

Additionally to #11 we need a unit test covering that issue.

Issue with dynamic loading

I’m using latest version.. It works fine with static images. But when i load the images from database and append whole with images to tag its not working. I’m using backbone.js MV* concept. Doesn’t it support dynamic loading?? I’ve searched lot about this but dint get any useful result

Reflection on Firefox/IE ?

Hi there,

I just implemented coverflowjs in my website, and found that reflection relies only on -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(black), color-stop(.7, black), to(transparent)); which clearly does not work on Firefox/IE.
Is it possible to make it work on those browsers ?
Just read you were making some modifications about that kind of stuff.

Thanks for your answer.

How to change the left of element whose class name is coverflow ?

Hello,
when selected the image, the left of element whose class name is coverflow changed ,but i can't find the code,where is it in source code? Thanks!

Finally move to org

@basti1253 doing this now :)

https://github.com/coverflowjs

license?

Hi Addy,

thanks for your great work on a crossbrowser coverflow solution. May I ask you what license this code has (and what licenses Paul Baukus used initially)? May I use it on commerical projects?

If it's open source I'd like to port it for jQuery 1.8 and jQueryUI 1.9. Would love to see it MIT or dual licensed like jQuery - if not, no problem. Your work, your choice ;)

Best regards

Sebastian

publish bower dependency

add bower.json
set main to the standalone css and js files
set ignore to only deliver needed runtime files

Newest Code is broken

I set up the demo from both here and the archived link and both would result in

"Uncaught TypeError: undefined is not a function"

I grabbed the coverflow code that was working on the website from the source tab and put that in place of the coverflow.js that I got from github/the archive link and it started working. I don't know what the issue is but I figured it useful to bring it up.

cocos2djs able can use?

cocos2djs able can use?

adding more gap/space to side of .ui-state-active

Hi,
I'm trying to make the "space" on .ui-state-active wider, while the rest kept the same width for all.
Am stuck trying to induce space while keeping it at the center.
Appreciate your help if you can take a look at this.

http://jsfiddle.net/7q8eapr2/756/
line 294 - commented code

Really appreciate your work here, it works pretty nicely as compared to other plugins out there.

Cannot move to next coverflow item on jquery click event

This is a little strange. When I enter "$('#coverflow' ).coverflow( 'next' );" into the Chrome Console, it works perfectly and when I mapped the arrow keys to $('#coverflow' ).coverflow( 'next' ), that also worked fine. However, when I place $('#coverflow' ).coverflow( 'next' ) into the jquery click event of a child element, it does not move to the next image...

adding active event causes last embedded video to be hidden

coverflow.coverflow({}); yields four videos showing up in the cover flow.

coverflow.coverflow({
active:1
});
yields only three videos showing up.

latest version of chrome.
code is in a .net MVC project with umbraco CMS.
using JQuery 2.1.1 .

> <div>
>             <h2 style="color: gold; text-align: center;">@child.Name</h2>
>             <div data-coverflow>
>                 @foreach (var typedVideo in child.GetPropertyValue<YouTube>("videoPicker"))
>                 {
>                     var embed = string.Concat("https://www.youtube.com/embed/", typedVideo.Id);
>                     <div class="video panel panel-default">
>                         <h3>@typedVideo.Snippet.Title</h3>
>                         <a href="@embed" class="fancy" data-fancybox-type="iframe">
>                             <img src="@typedVideo.Snippet.Thumbnails.High.Url" class="img-responsive">
>                         </a>
>                     </div>
>                 }
>             </div>
>         </div>
>         <div id="coverflow-slider"></div>
> 
> <script>
>     $(function () {
>         $('[data-coverflow]').each(
>             function () {
>                 var coverflow = $(this)
>                 coverflow.coverflow({
>                 });
>             });
>     });
> </script>
> 
> <style>
>     .ui-coverflow-wrapper {
>         height:400px;
>         margin-top: 100px;
>     }
> 
>     .ui-state-active {
>         border: 0px;
>     }
> </style>

Delete images

How can you delete images from the coverflow without messing things up. Example case: there is an close button on an image and it needs to be hidden. I tried to use "hide", but it seems like everything becomes off center and unusable.

Move to a new org?

@basti1253 How would you feel about us creating a new org for this project and merging in the updates you made a few months ago into that work and getting out a release? I've continued to get a lot of weekly mail about the project and I'd love to give folks a single place where they can go to for updates (even if that means us getting more maintainers involved).

Update to 3D transforms?

In order to make this look more like Apple's version of CoverFlow, I created a new branch and implemented 3D transformations instead of matrix transformations. The code allows the caller to specify the angle at which to rotate the item, a scale factor to apply to the non-active items (active item is scaled to 1x in my version), and an overlap factor to determine how closely the items stack. Additionally, it will (somewhat) gracefully fall back to matrix transforms for unsupported browsers (tested in IE8 successfully).

I have not yet updated the tests since I don't have my test suite set up, but I figured you might like to take a look in case you'd like to merge this into the master in the future, too.

I had to remove the reflection because it was displaying strangely and may have been related to my use of perspective and 3D transformations.

Image sizes can cause it to break

The styling can completely fall over if the height of the images aren't set correctly. for instance in one case i have to change the height of the images to max-height 60% of the container anything greater will cause it to fail. is there anyway to work this out? Is it dependent on any ratio with the width of the container?

I feel like I'm configuring something in correctly for this to be an issue. and advice? #

requiring dependancies

Can someone explain to me what order I have to include the various .js file please, atm it always throws an error saying that something isnt defined.

Passing active option breaks the flow

When I create a coverflow widget using:

$(function(){
        $('#coverflow').coverflow({ active: 6, duration: 600, easing: 'easeOutQuint' });
    });

This is the result I get after any event which shifts the covers (e.g. mouse scroll):

Now this type of result was what happened when one set center/recenter option in the older release to false.
Also, another random thing I noticed is that the mouse scroll appears to work opposite to the way it behaved in older versions (i.e. opposite scroll direction).

Testing and cut a release?

@basti1253 I think we should do a little rendering performance testing on the component (DevTools Timeline style) just to make sure we can't optimize further and cut a release if it all looks good.

How does that sound?

How can I add mousewheel throttle/debounce?

Macbook trackpad speed is so fast that coverflow just scrolls from the start to end in one swipe.

A little display issue.

Hi Addy,

I'm a friend from China.I really love your coverflow project.But I find a little issue: When you choose the current CD picture,the reflection will be unsymmetrical.It happened very soon.You should watch it carefully.And here are two screenshots display the change:

May I know how to fix it?

Thanks,
Cheris Shen

Blank page ?

Using ionic, I've tried to set an ion-list collection-repeat as a coverflow however I seem to just get a blank page.

Has anyone come across something similar?

syntax typo

Lines 140-143:

if( $.browser != null ) {
// old jQuery versions and jQuery migrate plugin users
return $.browser.msie &amp;&amp; ( ( ~~$.msie.version ) < 10 );
}