Dynamic Carousel - how to push thumbnails 12 per page? Examples included

[digeridoopoo]

EDITED. You can see an example so far here:

http://www.motion-creative.com/testi...ery/index.html

The problem I am having is all items of the carousel are on 1 page. I would like 12 items per page.

I successfully managed to achieve this in my static carousel by using this line of code to push items on my carousel onto 3 pages:

var data = [];
        for(var i = 0; i < 40; ++i){
            data.push('Line ' + i);
        }

For more complete code please see this file:

http://www.motion-creative.com/testi...rouselcode.txt

...and I have seen other examples of pushing carousel items here:

http://www.whitefox.no/plugins/iPhoneDesktop/

and here:

http://www.netmagazine.com/tutorials...p-sencha-touch

// Create pages for the carousel
    var pages = [];
    for (var i=0; i<numberOfPages; i++) {
    pages.push(new Ext.Component({
    id: 'page'+i,
    cls: 'page',
    tpl: [
    '<tpl for=".">',
    '<div id="summary{data.id}" class="summary {data.
    watched} {data.available}">',
    '<img src="{data.thumbnail_medium}" />',
    '<h3>{data.title}</h3>',
    '</div>',
    '</tpl>'
    ]
    }));
    }

I get a bit confused where I can add the above.

You can download a copy of my modified version here (you will need MAMP installed if on a Mac or WAMP on a PC as it uses PHP and requires a PHP server to be running):

http://www.motion-creative.com/testi...agegallery.zip

Can anyone explain step-by-step the process of pushing items onto several pages?

Thanks,


Si

[existdissolve]

Hi digeridoopoo--

If you want to go the route of create the pages of the carousel (last code snippet in your post), here's something that seems to work:

// set page size
var itemsPerPage = 4;
// get number of pages...round up in case a page has less than the page size
var totalPages = Math.ceil(mystore.getCount()/itemsPerPage);
// create array for our variable number of carousel pages
var carouselPages = [];
// loop over number of pages
for(var i=1;i<=totalPages;i++) {
     // get start and end records, based on page
     var startRecord= (i*itemsPerPage)-itemsPerPage;
     var endRecord = i==totalRages ? myStore.getCount() : (i*itemsPerPage)-1;
     // extract records for the current carousel page from the store
     var recordsForPage = myStore.getRange(startRecord,endRecord)
     
     // create a new component which will use the paged data
     var carouselPage = new Ext.Component({
          data: recordsForPage,
          fullscreen: true,
          tpl: ['<tpl for="."><div class="person">{data.firstName} {data.lastName}</div></tpl>']
      })
      // add our new page to array to add to the carousel
      carouselPages.push(carouselPage)
}
// create the carousel
var carousel = new Ext.Carousel({items:carouselPages});
// create a panel to hold the carousel
var panel = new Ext.Panel({
      fullscreen: true,
      layout: "fit",
      dockedItems: [{xtype:"toolbar",title: "Carousel Example"}],
      items: [carousel]
})

Here's a live example if you want to see the store behind it:
http://beta.cfgloss.com/mobile/carousel.html

[digeridoopoo]

Thanks a lot, I'll try this now :-). There seem to be several examples but I could never quite adapt them for a dynamic carousel!

I have several other goals for my gallery, such as sorting the thumbnails, having modal popups and having a toolbar at the bottom that will contain the menu as well.

Today I managed to get a toolbar at the bottom but am yet to get it working as the menu.

To get this bottom toolbar I replaced the Gallery.Viewport = Ext.extend)Ext.Panel in the Viewport.js file with the one below:

Gallery.Viewport = Ext.extend(Ext.Panel, {
    id        : 'viewport',
    layout    : 'card',
    fullscreen: true,
    dockedItems: [{
                overlay: true,
                dock: 'bottom',
                xtype: 'toolbar',
                style: 'opacity: 1;',
                items: [{ 
                itemId: 'helpButton',
                iconCls: 'list',
                iconMask: true,
                handler: function() {
                    new Ext.Panel({
                        floating: true,
                        centered: true,
                        modal: true, 
                        html: '<div class="helpbox">' + 
                                '<div style="margin: 0;">Menu List</div>' +
                                '<div></div>' + 
                                '<div class="credit">Hopefully This will eventually be a menu</a></div>' +
                               '</div>'
                    }).showBy(this);
                }
            }]
            }],
});

More to come soon...

Digeridoopoo

[tomalex0]

Hey take a look into this implementation also.

http://www.netmagazine.com/tutorials/build-ipad-app-sencha-touch

[digeridoopoo]

OK my aim of building a truly dynamic carousel is getting closer...I've managed to get it automatically loading the carousel with images from a folder. At the moment, it is 1 image per page maybe someone can help me get 12 images per page.

I have achieved 12 images per page on a static and semi-dynamic version, but not on this one so far.

I used the Carousel 2 example on the Sencha site as a starting point, and then modified it by adding the code below.

A model is defined that stores the name of the file, the path, and the thumbnail:

 Ext.regModel("Card", {
        fields: [
            {name: "name", type: "string"},
            {name: "path", type: "string"},
            {name: "last_modified", type: "string"},
            {name: "thumb", type: "string"}
    ],  
});

The store contains a reference to a php file which grabs the contents of a folder and stores the information mentioned in the model (name, path, last_modified, and thumb).

Here's the php file, which grabs the contents of the folder 'public/img/Carousel/thumbs':

<?php


$path = 'public/img/Carousel/thumbs';


if ($handle = opendir($path)) {
    $dir = array();
    while (false !== ($file = readdir($handle))) {
        if ($file != '.' & $file != '..') {
            $album_path = $path . '/' . $file;
            $dir[] = array(
                'name' => preg_replace('/-/', ' ', $file),
                'path' => $album_path,
                'last_modified' => date("F d Y H:i:s", filemtime($album_path))
            );
        }            
    }
    closedir($handle);
}


echo json_encode(array('albums' => $dir));
?>

Here's the store, which uses the PHP file:

 var store = new Ext.data.Store({
            model: 'Card',
            proxy: {
                type: 'ajax',
                url: '/carousel2store/Carousel 2_files/get-album.php',
                reader: {
                    type: 'json',
                    root: 'albums'
                }
            },

It then pushes the image onto the carousel with this bit (you'll have to change the img src to your own):

var items = [];   
store.each(function(rec){
                        items.push({
                            html: '<img src="http://localhost:8888/carousel2store/Carousel 2_files/' + rec.get('path') + '"/>',
                            cls: 'card ' + rec.get('cls')
                        });
                    });

I've tried updating the above to something like:


var items = []; for(var i = 0; i < 40; ++i){ items.push('Line ' + i); }
...but I'm not having much luck at the moment. Can anyone help?


Thanks

:-)