|
|
| Line 27: |
Line 27: |
| $('.datepicker').datepicker(); | | $('.datepicker').datepicker(); |
| $('.update-cache').click(LITTLED.updateCache); | | $('.update-cache').click(LITTLED.updateCache); |
| </syntaxhighlight>
| |
|
| |
| ===image rollovers===
| |
| *Requires “poshytip” JavaScript library in addition to the JQuery libraries.
| |
| *JQuery handlers
| |
| **<code>LITTLED.Gallery.bindAlbumListingsHandlers()</code>:
| |
| <syntaxhighlight lang="javascript">
| |
| $('.album-tn', $p).poshytip(LITTLED.Gallery.preview_tt_properties);
| |
| </syntaxhighlight>
| |
| **Surround IMG element in ANCHOR tags.
| |
| **IMG class="album-tn". This is the hook for JQuery handler.
| |
| **<code>href="javascript:void(0)"</code>
| |
| **When no thumbnail is available for the record:
| |
| <syntaxhighlight lang="html4strict"><div class="error" style="text-align:center;">no thumbnail</div>
| |
| </syntaxhighlight>
| |
| **Follow the thumbnail IMG element with an IMG element containing the medium or full-sized image wrapped in SPAN tags, depending on which size should appear on rollover.
| |
| **SPAN <code>class="tooltip-content"</code>
| |
| **The <code>tooltip-content</code> class will hide the full-sized image until a rollover event is captured by the thumbnail.
| |
| **The IMG element doesn’t require any class attributes.
| |
| ===image lightbox===
| |
| *Surround IMG element in <A> tags.
| |
| **<A> <code>class="img-details-link"</code>. This is the hook for JQuery handlers.
| |
| **<code>href="javascript:void(0)"</code>
| |
| **<A> attribute <code>data-id</code> stores the image_link record id
| |
| **<A> attribute <code>data-tid</code> Content type id. Make sure this is for the image and not its parent’s (the album record) content type.
| |
| *Requires a handler to be set in the Content Sections CMS:
| |
| **Details URI: <code>/_ajax/images/image_details.php</code>
| |
| **<code>$('.img-details-link')</code> handler
| |
| <syntaxhighlight lang="javascript">
| |
| $('.img-details-link', $p).click(LITTLED.Gallery.detailsDialog('gallery-dialog'));
| |
| </syntaxhighlight>
| |
| **The <code>$('.img-details-link')</code> handler is rolled into <code>LITTLED.Gallery.bindAlbumListingsHandlers()</code>
| |
|
| |
| ===inserting an "add image" button===
| |
| ====HTML====
| |
| <syntaxhighlight lang="html4strict" enclose="div">
| |
| <a class="add-img-btn" href="javascript:void(0)" rel="nofollow" data-id="<?=$img->id->value?>" data-pid="<?=$input->id->value?>" data-tid="<?=$img->type_id->value ?>" title="add image">add image</a>
| |
| </syntaxhighlight>
| |
| ====JavaScript====
| |
| <syntaxhighlight lang="javascript">
| |
| $('.add-img-btn', $p)
| |
| .button({
| |
| icons: {primary: 'ui-icon-addchild'},
| |
| text: false
| |
| })
| |
| .click(LITTLED.Gallery.dialogEdit);
| |
| </syntaxhighlight>
| |
| The <code>$('.add-img-btn')</code> handler is rolled into <code>LITTLED.Gallery.bindGalleryHandlers()</code>.
| |
| ====AJAX handler script====
| |
| The handler script is determined by <code>section_properties.upload_uri</code>. If no value is found in that column, the code falls back on <code>section_properties.edit_uri</code>.
| |
|
| |
| That page will expect a combination of values to be passed in via the <code>id</code>, <code>pid</code>, and <code>tid</code> arguments. Only <code>tid</code> (type id) is strictly required. <code>pid</code> (parent id) can be null in cases when creating a new parent record and uploading images simultaneously. <code>id</code> (image link record id) can be null in cases when uploading a new image.
| |
|
| |
| ===Refreshing content===
| |
|
| |
| The default container for gallery listings has <code>id="pages-[PARENT_ID]"</code>.
| |
|
| |
| This is the selector used to locate the gallery listings in the DOM after an AJAX content edit has been performed.
| |
|
| |
| The AJAX handler script will pass back the DOM selector of the gallery listings in the <code>container_id</code> field of the JSON data. The default image upload and edit scripts will pass back <code>pages-[PARENT_ID]</code> as the selector if it's determined that the control that invoked the AJAX handler script resided within gallery listings.
| |
|
| |
|
| |
| <syntaxhighlight lang="html4strict">
| |
| <div id="pages-34">
| |
| <div><!--// GALLERY LISTINGS CONTENT GOES HERE //--></div>
| |
| </div>
| |
| </syntaxhighlight>
| |
|
| |
|
| |
| The actual content used to refresh the content container is determined in the PHP routine <code>cache_cache::refresh_content_after_image_edit()</code>. The content type id determines which content template is selected. By default the include file <code>[COMMON_TEMPLATE_DIR]content/albums/gallery_listings.php</code> is used. Other cases can be added to select other templates.
| |
|
| |
|
| |
| <syntaxhighlight lang="php">
| |
| /* defaults to image listings */
| |
| $json->container_id->value = "pages-{$content->parent_id->value}";
| |
| $filters = new gallery_filters_class($content->site_section->id->value);
| |
| $filters->parse_filters();
| |
|
| |
| ob_start();
| |
| include (COMMON_TEMPLATE_DIR."content/albums/gallery_listings.php");
| |
| $json->content->value = ob_get_contents();
| |
| ob_end_clean();
| |
| </syntaxhighlight> | | </syntaxhighlight> |
|
| |
|
AJAX
When adding a new album-based CMS section, the following files may need to be updated with the new content type:
/_classes/content/cache_class.php
/_classes/content/resort_class.php
Obviously if a file includes the cache_class then the new content type will be available to that file.
PHP Classes
Classes derived from album_class and album_xpost_class that don’t have the same columns as those tables should set the db_field property value for those fields to FALSE in their class constructors.
$this->layout->db_field = false;
Listings
JavaScript/JQuery handlers
LITTLED.Gallery.bindAlbumListingsHandlers()
The routine above doesn’t handle content refreshes. The code below adds that, along with some filtering utilities. This can be rolled up into a routine available through the LITTLED.CMS library.
LITTLED.init({ setSortables: LITTLED.Gallery.bindAlbumListingsHandlers });
LITTLED.Gallery.keywordAutocomplete();
LITTLED.setSortables();
$('.datepicker').datepicker();
$('.update-cache').click(LITTLED.updateCache);
See Also