1. #1
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    393
    Vote Rating
    16
    digeridoopoo will become famous soon enough

      0  

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

    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

  2. #2
    Sencha User existdissolve's Avatar
    Join Date
    Jan 2010
    Location
    Kansas
    Posts
    522
    Vote Rating
    85
    existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice

      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
    393
    Vote Rating
    16
    digeridoopoo will become famous soon enough

      0  

    Default Thank you...

    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

  4. #4
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    tomalex0 will become famous soon enough

      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
    393
    Vote Rating
    16
    digeridoopoo will become famous soon enough

      0  

    Default Progress...

    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

    :-)

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi