Results 1 to 5 of 5

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

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    454
    Vote Rating
    22
      0  

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

    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:

    Code:
    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

    Code:
    // 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
    Attached Images Attached Images

  2. #2
    Sencha User existdissolve's Avatar
    Join Date
    Jan 2010
    Location
    Kansas
    Posts
    522
    Vote Rating
    89
      0  

    Default

    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:
    Code:
    // 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

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    454
    Vote Rating
    22
      0  

    Default Thank you...

    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:

    Code:
    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
    Attached Images Attached Images

  4. #4
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    20
      0  

    Default

    Hey take a look into this implementation also.

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

    IosToggleField Forum - Github
    Form Validation
    Forum - Github
    Iphone Settings Menu
    Forum
    Sqlite Storage & Login Manifest
    Forum
    KitchenSink MVC
    Forum - Github
    SqliteProxy-v1 Forum - Github
    SqliteProxy-v2
    Forum - Github
    Arshaw Fullcalendar Forum - Github






  5. #5
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    454
    Vote Rating
    22
      0  

    Default Progress...

    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:

    Code:
     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':

    Code:
    <?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:

    Code:
     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):

    Code:
    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

    :-)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •