Choose the number of images to display in gallery

Permalink Browser Info Environment
Hi, is it possible to choose the number of thumbnail images to display in the gallery? Basically I would like only one thumbnail but when you click on it to enlarge it you can then scroll the the other images?

Thanks!

Type: Discussion
Status: Resolved
candydesign
View Replies:
candydesign replied on at Permalink Reply
candydesign
Sorry this isn't a pre sale question, I have already purchased the add on :)
mnakalay replied on at Permalink Reply 1 Attachment
mnakalay
Hello,

I am joining a template that will do just that.
Extract it in your root blocks folder so you have ROOT/blocks/touch_gallery/templates/one_thumb_gallery.php

When that's done, apply the template "One Thumb Gallery" to Touch gallery and you will only have one thumb showing.

May I ask you if you have a website I could visit or if you could provide me with the address of the website you are using Touch Gallery on? I am always curious to see how my work is used.

Let me know if the template worked for you.

Thank you
Nour
candydesign replied on at Permalink Reply
candydesign
Thank you this is just what I need!

Where can I add some css to remove the margins around the single thumb as it's causing it to be off center. I can see this is the line of code affecting it but not sure where to amend it?

.touchgallery-thumbs{
margin:60px auto 35px;
}

I've attached an image for your reference too.

Once I have it published and working I will send you the url to see :)

Thanks!
candydesign replied on at Permalink Reply 1 Attachment
candydesign
Sorry forgot to attach the image!
mnakalay replied on at Permalink Reply
mnakalay
those margins are calculated at the code level so to override them you need to add your css to the file I sent you.

Open it and inside you will see a <style> block.

Inside it write:
#touchgallery-thumbs<?php echo $bID ?> {
    margin-left: xxxpx;
    margin-right: xxxpx;
}

Modify the margins for whatever you want. Save and you should be good to go
candydesign replied on at Permalink Reply
candydesign
I've added that it and set the margin to 0px but there still seems to be a large space above the image and a small space to the left which I can't get rid of?

I've published the page so you can see what I mean.

Thanks so much for your help!
mnakalay replied on at Permalink Reply
mnakalay
ok I see.
The code I first sent you allowed you to deal with the margins around the thumb container.

Now the thumbnail itself is a link <a> and has its own margin.

SO in the file I sent you, inside the <style> block like before, look for this piece of code:
#touchgallery-thumbs<?php      echo $bID ?> a{
  width:<?php      echo $maxThumbWidth ?>px;
  height:<?php      echo $maxThumbHeight ?>px;
  margin: 6px 6px <?php    echo $thumbBottommargin ?>px;
}

You can just remove all the values set for margin and put what you want. SInce you have only 1 thumbnail you probably can just set it to
margin: 0;


I noticed you didn't yet add the first piece of code I sent you. The is required to align your image to the other images.
candydesign replied on at Permalink Reply
candydesign
Still not working? This is what I've adding in.

<style>
#touchgallery-thumbs<?php echo $bID ?> {
    margin-left: 0px;
    margin-right: 0px;
}
#touchgallery-thumbs<?php      echo $bID ?> a{
  width:<?php      echo $maxThumbWidth ?>px;
  height:<?php      echo $maxThumbHeight ?>px;
  margin: 0; <?php    echo $thumbBottommargin ?>px;
}
#touchgallery-thumbs<?php      echo $bID ?> a:after{
    bottom: -<?php      echo intval(($maxThumbHeight * 1.075) + 7) ?>px;
    max-width: <?php      echo intval($maxThumbWidth - 10) ?>px;
    <?php      if ($showTitle == 0) {echo 'display:none;';} ?>
}
mnakalay replied on at Permalink Reply
mnakalay
I looked at the code again and I see what the problem is.

First let's simplify the css and make sure the new margins are taken into account. Rewrite that css code like this:
<style>
#touchgallery-thumbs<?php echo $bID ?> {
    margin-left: 0px!important;
    margin-right: 0px!important;
}
#touchgallery-thumbs<?php      echo $bID ?> a{
  margin: 0!important;
  margin-bottom: <?php    echo $thumbBottommargin ?>px!important;
}
</style>


Second, you are going to delete 2 lines of code that are stopping the css from being applied. At the top of the file, delete:
if ($c->isEditMode() == TRUE) {


Then, right after the closing </style>, delete:
<?php    } ?>
candydesign replied on at Permalink Reply
candydesign
Thank you that all works perfectly now. Just need to sort all the images out now.

Thanks again!
mnakalay replied on at Permalink Reply
mnakalay
You're very welcome.

If you are a designer would you mind giving me your website's url?
candydesign replied on at Permalink Reply
candydesign
Hi, me again :)

I've just seen on mobile view that the thumbnail isn't resizing correctly so some of the image is getting cropped? Is it possible to fix this?

You can see what I mean here.

http://www.musicshopdurbannorth.co.za/products/roland-keyboards-dig...

Thanks!
candydesign replied on at Permalink Reply
candydesign
Hi, me again :)

I've just seen on mobile view that the thumbnail isn't resizing correctly so some of the image is getting cropped? Is it possible to fix this?

You can see what I mean here.

http://www.musicshopdurbannorth.co.za/products/roland-keyboards-dig...

Thanks!
mnakalay replied on at Permalink Reply
mnakalay
No that's correct. Touch Gallery is not set to resize thumbnails when the screen size changes. Thumbnails will re-align to fit the screen, but not resize. Full-screen images will resize.

Doing what you want is possible but your template will require some more changes.
candydesign replied on at Permalink Reply
candydesign
Ahh ok I see. Are you able to help me with that please? As I'm using the one thumb gallery template it's important that it displays correctly.
mnakalay replied on at Permalink Reply
mnakalay
could you attach the template you are using now so I can use that and not overwrite anything important?
candydesign replied on at Permalink Reply 1 Attachment
candydesign
Here we go see attached. I had to zip it up as it said 'invalid extension'.
mnakalay replied on at Permalink Reply 1 Attachment
mnakalay
Here, try this one
candydesign replied on at Permalink Reply
candydesign
It doesn't seemed to have made a difference?
mnakalay replied on at Permalink Reply
mnakalay
you probably need to empty your c5 cache
candydesign replied on at Permalink Reply
candydesign
Yes! You are right. Works perfectly now.

Thanks so much for the great support!
mnakalay replied on at Permalink Reply
mnakalay
you are welcome.

If you have some time to leave a review for Touch Gallery, that would be nice. You can do it here:http://www.concrete5.org/marketplace/addons/touch-gallery/reviews...

concrete5 Environment Information

# concrete5 Version
5.6.2.1

# concrete5 Packages
Automatic Email Obfuscator (1.2.3), Dojo Folio Slider (1.5.1), Restore Automated Jobs (1.3), Slate Theme (1.3), Social Icons Reloaded (1.8), Sortable Fancybox Gallery (1.17), Touch Gallery (1.7.2).

# concrete5 Overrides
None

# Server Software
Apache/2.2.24 (Unix) mod_hive/5.0 mod_ssl/2.2.24 OpenSSL/1.0.0-fips mod_auth_passthrough/2.1 mod_fastcgi/2.4.6 mod_bwlimited/1.4 mod_fcgid/2.3.6

# Server API
cgi-fcgi

# PHP Version
5.4.45

# PHP Extensions
bcmath, bz2, bz2_filter, calendar, cgi-fcgi, Core, ctype, curl, date, dba, dom, enchant, ereg, exif, fileinfo, filter, ftp, gd, gettext, hash, http, iconv, imap, intl, ionCube Loader, json, ldap, libxml, mailparse, mbstring, mcrypt, memcache, mhash, mysql, mysqli, openssl, pcntl, pcre, PDO, pdo_mysql, pdo_pgsql, pdo_sqlite, pgsql, Phar, posix, pspell, readline, Reflection, session, shmop, SimpleXML, soap, sockets, SPL, sqlite, sqlite3, ssh2, standard, sysvmsg, sysvsem, tidy, tokenizer, wddx, xml, xmlreader, xmlrpc, xmlwriter, xsl, Zend Guard Loader, zip, zlib.

# PHP Settings
max_execution_time - 45
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - 60
max_input_vars - 2000
memory_limit - 128M
post_max_size - 32M
sql.safe_mode - Off
upload_max_filesize - 24M
http.persistent.handles.limit - -1
ldap.max_links - Unlimited
memcache.max_failover_attempts - 20
mysql.max_links - 60
mysql.max_persistent - Unlimited
mysqli.max_links - 60
mysqli.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
pgsql.max_links - 60
pgsql.max_persistent - Unlimited
session.cache_limiter - nocache
session.gc_maxlifetime - 7200
soap.wsdl_cache_limit - 5

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.