Home XtGem- Templates- XtScript-

bottom

Translate this pageMicrosoft® Translator

XTSCRIPT GALLERY

Single page thumbnail gallery filelist with descriptions and individual xtgem polls for rating the images

hot rolls

hot rolls

Name hot_rolls.jpg

Type image/jpeg

Size 34.35KB

Date 2013-06-05 10:14:54

Download hot rolls

Xtscript image gallery

See http://syntax.xtgem.com/gallery
The script creates a paged display of css resized thumbnails
when images are clicked the landing page shows the image plus name type file size and date with open and download buttons a description and a xtgem poll for rating the image
As the actual filelist is not in the xtscript the problem with timeouts for large folders should not occur.

Created at 9:15am 14-12-5

29 Rate up

Star

Back to posts

Comments:

[3:01am 18-2-3] Yadispn positif thingking :

Reply / View thread Report spam

Am new in here plish suport me oke may frend tenks you somad

[11:48pm 18-1-24]

neohouses :

Reply / View thread Report spam

Good jod . pleas follow me http://thiet-ke-nha-pho.xtgem.com/

[1:53am 17-5-16]

DeLavega :

Reply / View thread Report spam

Cool

[7:34am 17-2-21]

aprintID :

Reply / View thread Report spam

nice pictures

[4:05am 16-10-21]

buddley :

Reply / View thread Report spam

ahhhhh,itz someaw hard ooo

SCRIPT

All the settings are at the top of the xtscript.

The descriptions use the xtscript "source" function the default setting looks for the descriptions folder in the same folder or directory as the gallery page
You can set your own path and descriptions folder name in the settings the path must be relative to the page containing the script not the root directory.
There is also a setting to convert newlines into <br /> tags otherwise they will be ignored.
The description file can be plain text or html and must have the same name as the image without any extension
The descriptions can contain any normal html or javascript and most xt functions and xt widgets.
They cannot contain xtscript
If the description is a html page only the content between the body tags is used (including the container) and newlines are ignored except in text blocks
If there is no description file for an image no description block will be shown.

Unique polls for each image are created by using part of a md5 hash of the url + the filename so if the url is changed so are the polls.
Some javascript is used in the xtscript to change some of the classes and the submit button text in the poll xtfunction.

As the actual filelist function is outside of the xtscript the timeout for large folders should not happen.

Copy the script to a code block or copy it to a plaintext file and include it on the page.
You can also "remote server" upload it fromAnd then include it on your page
Suggest more features in the comments above or on the forum post sensible and possible ones will be added

# Filelist settings
var $folder=/my_images
var $per_page=16
var $sort_type=name
var $sort_dir=asc
var $thumb_size=56px

# Landing page
var $name_title=Name
var $type_title=Type
var $size_title=Size
var $date_title=Date
var $open_title=Open
var $download_title=Download
var $descriptions_folder=/descriptions
var $descriptions_nl2br=1
var $back_button_text=Back

# Poll settings
var $question=Rate this image
var $voted_text=Thank you for voting!
var $show_results=always
var $a1=Best
var $a2=Good
var $a3=Medium
var $a4=Poor
var $rate_button_text=Rate image

# Gallery script
get listfile
get __filelist_page
get listpage
var $this=<xt:url noquery="1" />
if $listfile 
goto @item
endif
var $div=<div class="list">
var $div_close=</div>
var $tmplt= <span class="list_item"><a href="$this?listfile=.file_name.
if $__filelist_page > 1
var $tmplt=$tmplt&listpage=$__filelist_page
endif
var $tmplt=$tmplt#gallery" title=".file_name_base_parsed."><img class="list_item_image" style="max-width:$thumb_size" src=".file_url." alt=".file_name_base_parsed." /></a></span>
goto @end
@item  
var $tmplt= <div class="item_holder"><div class="item"><div class="item_title">.file_name_base_parsed.</div><img src=".file_url." alt=".file_name_base_parsed." /></div><div class="item_meta"><div class="meta_entry">$name_title&nbsp;&nbsp;<span>.file_name.</span></div><div class="meta_entry">$type_title&nbsp;&nbsp;<span>.file_mime.</span></div><div class="meta_entry">$size_title&nbsp;&nbsp;<span>.file_size.</span></div><div class="meta_entry">$date_title&nbsp;&nbsp;<span>.file_datetime.</span></div><div class="meta_entry">$open_title&nbsp;&nbsp;<a class="meta_button" href=".file_url." title=".file_name_base_parsed."><span>.file_name_base_parsed.</span></a></div><div class="meta_entry">$download_title&nbsp;&nbsp;<a class="meta_button" href=".file_url.?__xt_download=1" title=".file_name_base_parsed."><span>.file_name_base_parsed.</span></a></div>
var $d1=call strpos $haystack=$listfile;$needle=.;$offset=0
var $d2= call substr $val=$listfile;$start=0;$length=$d1
var $description= call source $file=$descriptions_folder/$d2;$nl2br=$descriptions_nl2br
if not $description
var $tmplt=$tmplt</div></div>
goto @skip
endif
var $description_content_offset=call strpos $haystack=$description;$needle=<body;
if $description_content_offset
var $description= call source $file=$descriptions_folder/$d2
var $description_content_offset=call strpos $haystack=$description;$needle=<body;
var $description_content_start=call strpos $haystack=$description;$needle=>;$offset=$description_content_offset
var $description_content_end=call strpos $haystack=$description;$needle=</body;$offset=$description_content_offset
var $description=call substr $val=$description;$start=($description_content_start+1);$length=($description_content_end-$description_content_start-1) 
endif
var $description=<div class="meta_description">$description</div></div></div>
@skip
var $poll=call md5 $val=$this$listfile
var $poll=call substr $val=$poll;$start=24
var $poll=xt:poll id="$poll" voted_text="$voted_text" question="$question" show_results="$show_results" answer1="$a1" answer2="$a2" answer3="$a3" answer4="$a4"
var $poll_js=<script type="text/javascript">a=document.getElementById("poll");b=a.getElementsByTagName("div");b[0].className="image_poll";c=a.getElementsByTagName("h3");if (b[2].className=="answer"){c[0].className="question";b[b.length-1].className="poll_submit";b[b.length-1].firstChild.className="poll_button";b[b.length-1].firstChild.value="$rate_button_text";}else {c[0].className="voted";}</script><noscript>Javascript is required for this page to run correctly</noscript>
var $back_button= <div class="back"><a class="back_button" href="$this
if $listpage
var $back_button=$back_button?__filelist_page=$listpage
endif
var $back_button=$back_button"><span>$back_button_text</span></a></div>
@end
var $tmplt=call htmlspecialchars $val=$tmplt

  <div class="list_holder" id="gallery">{_$$div|}<xt:filelist sort_type="{_$$sort_type|}" sort_dir="{_$$sort_dir|}" folder="{_$$folder|}" template="{_$$tmplt|}" per_page="{_$$per_page|}" filter="{_$$listfile|*.*}" />{_$$description|}{_$$div_close|}<div id="poll"><{_$$poll|!----}></div>{_$$poll_js|}{_$$back_button|}</div>

DEMO CSS

This css stylesheet is just a demo
It contains most of the classes you will need
copy it to a plain text file named gallery.css
and link to it in your page header using something likeYou can also "remote server" upload it from

.list_holder
  {
    border:1px solid #000;
    border-radius:3px;
    background:#aaa;
    margin:1px;
    padding:1px;
  }
  /* Thumbnail list */
  .list
  {
    border:1px solid #000;
    border-radius:3px;
    text-align:center;
    background:#bbb;
    color:#123;
    max-width:568px;
    padding:1px
  }
  .list_item
  {
    display:inline-block;
    border:1px solid #000;
    border-radius:3px;
    padding:2px;
    margin:1px;
  }
  .list_item_image
  {
    vertical-align:bottom;
  }
  /* Pagination */
  .filelist_paging
  {
    margin:1px;
    padding:1px;
  }
    .filelist_paging span
  {
    display:inline-block;
    border:1px solid #000;
    border-radius:3px;
    background:#aaa;
    color:#555;
    margin:1px;
    padding:0 1px;
  }
    .filelist_paging a
  {
    display:inline-block;
    border:1px solid #000;
    border-radius:3px;
    background:#ccc;
    color:#000 !important;
    margin:1px;
    padding:0 1px;
    text-decoration:none;
  }
  /* Landing page */
  
  .item_holder
  {
    border:1px solid #000;
    border-radius:3px;
    margin:1px;
    padding:1px;
  }
  .item
  {
    border:1px solid #000;
    border-radius:3px;
    background:#ccc;
    margin:1px;
    padding:2px 1px;
    text-align:center;
  }
  .item_title
  {
    font-weight:bold;
    font-size:1.5em;
    color:#123;
  }
  .item img
  {
    max-width:99%;
  }

.item_meta
  {
    border:1px solid #000;
    border-radius:3px;
    margin:1px;
    padding:1px;
  }
  .item_meta .meta_entry
  {
    border:1px solid #000;
    border-radius:3px;
    background:#bbb;
    color:#123;
    margin:1px;
    padding:2px;
  }
  .item_meta .meta_entry span
  {
    color:#555;
    vertical-align:middle;
    padding:1px 2px;
  }
  .item_meta .meta_entry .meta_button
  {
    display:inline-block;
    border:1px solid #000;
    border-radius:3px;
    background:#ccc;
    margin:1px;
    padding:0 2px;
    text-decoration:none;
  }
  .item_meta .meta_entry .meta_button span
  {
    vertical-align:middle;
    color:#000 !important;
  }
.item_meta .meta_description
  {
    border:1px solid #000;
    border-radius:3px;
    background:#bbb;
    margin:1px;
    padding:2px;
  }
  /* Poll */
  .image_poll
  {
    border:1px solid #000;
    border-radius:3px;
    margin:1px;
    padding:2px;
    text-align:center;
  }
  .xtpoll
  {
  }
  .question
  {
    margin:0;
    color:#555 !important;
  }
  .answer
  { 
    display:inline-block;
    border:1px solid #000;
    border-radius:3px;
    background:#ccc;
    color:#123;
    margin:1px;
    padding:1px;
  }
  .answer input[type="radio"]
  { 
    vertical-align:middle;
  }
  .poll_submit
  { 
    margin:2px;
  }
  .poll_button
  { 
    display:inline-block;
    border:1px solid #000;
    border-radius:3px;
    background:#ccc;
    color:#000 !important;
    margin:1px;
    padding:2px;
    text-decoration:none;
  }
  .voted
  {
    margin:0;
    color:#555 !important;
  }
  .result
  {
    display:inline-block;
    border:1px solid #000;
    border-radius:3px;
    background:#ccc;
    color:#123;
    margin:1px;
    padding:1px;
  }
  .back
  {
    display:inline-block;
    border:1px solid #000;
    border-radius:3px;
    margin:1px;
    padding:2px;
  }
  .back_button
  {
    display:inline-block;
    border:1px solid #000;
    border-radius:3px;
    background:#ccc;
    color:#000 !important;
    margin:1px;
    padding:0 2px;
    text-decoration:none;
  }
  .back_button span
  {
    vertical-align:middle;
  }

Powered by XtGem

About us Contact Forum

top