Coverflow layout for list?

ionic-v1
1

I am trying to integrate CoverflowJs from : http://coverflowjs.github.io/coverflow

I have included jQuery, Coverflow JS and CSS.

However for: <ion-list collection-repeat="file in vm.files"><div><img><p></p></div></ion-list> - I get just a blank page.

Has anyone used Coverflow in Ionic?

2

Can you create a working example of what you have done so far and I will make it work (or at least try :smile: ).

3

In head :

<link rel="stylesheet" href="lib/coverflow/dist/coverflow.css">

<!-- jQuery -->
<script src="lib/jquery/dist/jquery.min.js"></script>

<!-- Coverflow -->
<script src="lib/coverflow/dist/coverflow.min.js"></script>

In Pdf.html :

<ion-content title="Pdf">
    <ion-list>
        <ion-item collection-repeat="file in vm.files" collection-item-height="35%" collection-item-width="100%" style="text-align: center">
            <div class="center" ng-class-odd="'ion-list-odd'" ng-class-even="'ion-list-even'" ng-click="vm.load('{{vm.pdf}}' + file.pdf, '{{file.year}}')">
                <img ng-src="{{vm.thumb}}{{file.thumb}}" class="center pdf-image" ng-if="file.thumb != ''">
                <img ng-src="img/photo_place_holder.png" class="center pdf-image" ng-if="file.thumb == ''">

                <p style="padding-top: 1em;">{{file.year}}</p>
            </div>
        </ion-item>
    </ion-list>
</ion-content>

In pdfController :

        vm.coverflow = '';
        ionic.Platform.ready(function() {
            if (vm.coverflow === '') {
                console.log('init coverflow');
                vm.coverflow = $('.collection-repeat-container').coverflow();
            }
        });

There’s around 200 images/pdf for the files :

 var data = [
        {
            year: 2014,
            pdf: '2014.pdf',
            thumb: '2014.jpg'
        },
        {
            year: 2015,
            pdf: '2015.pdf',
            thumb: '2015.jpg'
        }
     ];
4

It seems I have to add a bunch of CSS changes to make it work. ion-list items need to be a smaller width etc. to try and re-create the same coverflow found at :
http://coverflowjs.github.io/coverflow/

5

@Gajotres I tried with http://vanderlee.github.io/coverflow but it only shows one cover and the rest are hidden behind instead of being shown to the left/right (and taking up the whole 100% of the screen width)…