Add slider arrows

Permalink Browser Info Environment
Hello

Is there a way to display a right and a left arrow in the lightbox view? (same one as in your simple slider block:http://addons.market.isitvivid.com/block-examples/simple-slider).... Also a little x in the corner would be nice to close the lightbox. This would only be a help for the visitors of my website to told them: hey, click on the right or left arrow to swip between the images.

thanks a lot.

Type: Pre-Sale
Status: In Progress
Goma
View Replies:
drumrby replied on at Permalink Reply
drumrby
Hello,

I wanted to do the same thing that you have asked about. I have modified and added to the code, to make this work. Below, I have included what I did in case you are still looking for an answer to your question.

NOTE: I chose to edit the original files in the package, however you could chose to override the original files by placing the edited files in the root/application/blocks directory.

All files and folder referenced below will be in this directory: packages/vivid_thumb_gallery/blocks/vivid_thumb_gallery

Open templates/lightbox/view.php

from line 24 to 31, replace

$(".imagelightbox").imageLightbox({
        onStart: function(){
            $("body").append("<div class='blackout'>");
        },
        onEnd: function(){
            $(".blackout").remove();
        }
    });


with

$( function(){
      // ACTIVITY INDICATOR
      var activityIndicatorOn = function()
         {
            $( '<div id="imagelightbox-loading"><div></div></div>' ).appendTo( 'body' );
         },
         activityIndicatorOff = function()
         {
            $( '#imagelightbox-loading' ).remove();
         },
      // CLOSE BUTTON
         closeButtonOn = function( instance )
         {
            $( '<button type="button" id="imagelightbox-close" title="Close"></button>' ).appendTo( 'body' ).on( 'click touchend', function(){ $( this ).remove(); instance.quitImageLightbox(); return false; });
         },


You will then need to create a view.css file in templates/lightbox/

Paste this into that file

#imagelightbox {
   box-shadow: 0 0 3.125em rgba( 0, 0, 0, .75 ); /* 50 */
   -moz-box-shadow: 0 0 3.125em rgba( 0, 0, 0, .75 ); /* 50 */
   -webkit-box-shadow: 0 0 3.125em rgba( 0, 0, 0, .75 ); /* 50 */
}
/* "CLOSE" BUTTON */
      #imagelightbox-close
      {
         width: 2.5em; /* 40 */
         height: 2.5em; /* 40 */
         text-align: left;
         background-color: rgba( 0, 0, 0, .5 );
         border-radius: 50%;
         position: fixed;
         z-index: 10002;


That should be it.

Hat Tip: To Osvaldas Valutis for creating Image Lightbox and providing awesome examples of it's implementation.
Solanum replied on at Permalink Reply
Solanum
Wow! Thank you!!!
Solanum replied on at Permalink Reply
Solanum
Wow! Thank you!!!
joostplas replied on at Permalink Reply
joostplas
Thanks a lot for this. Great!
Goma replied on at Permalink Reply
Goma
Worked perfectly! Thank you very much
ChannelMarkerMedia replied on at Permalink Reply 1 Attachment
ChannelMarkerMedia
I patched this add-on. Along with other fixes, my version includes navigation arrows in the lightbox view.

Modifications:
- Fixed missing asset: featherlight.css
- Included navigation arrows and an X to close the lightbox (THANKS DRUMRBY)
- Lightbox is the default template

The zip file is attached.

I am always available for custom coding and add-on modification. Email me: bobby AT channelmarkermedia.com </shameless_self_promotion>
DevilDiva replied on at Permalink Reply
DevilDiva
I made use of this patch and it did exactly what I hoped. Thanks!!!

concrete5 Environment Information

# concrete5 Version
Core Version - 5.7.3.1
Version Installed - 5.7.3.1
Database Version - 20150109000000

# concrete5 Packages
Fruitful (1.1.1), Thumb Gallery (1.0.2).

# concrete5 Overrides
languages/da_DK, languages/de_DE, languages/el_GR, languages/fi_FI, languages/fr_FR, languages/it_IT, languages/ja_JP, languages/nl_NL, languages/ru_RU, languages/sl_SI, languages/sv_SE, languages/tr_TR

# concrete5 Cache Settings
Block Cache - Off
Overrides Cache - Off
Full Page Caching - Off
Full Page Cache Lifetime - Every 6 hours (default setting).

# Server Software
LiteSpeed

# Server API
litespeed

# PHP Version
5.5.20

# PHP Extensions
bcmath, bz2, calendar, Core, ctype, curl, date, dom, ereg, exif, fileinfo, filter, ftp, gd, gettext, hash, iconv, imap, intl, ionCube Loader, json, libxml, litespeed, mbstring, mcrypt, mhash, mysql, mysqli, mysqlnd, openssl, pcre, PDO, pdo_mysql, pdo_sqlite, Phar, posix, pspell, Reflection, session, SimpleXML, soap, sockets, SPL, sqlite3, standard, tidy, tokenizer, wddx, xml, xmlreader, xmlrpc, xmlwriter, xsl, Zend OPcache, zip, zlib.

# PHP Settings
max_execution_time - 30
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - 60
max_input_vars - 1000
memory_limit - 256M
post_max_size - 16M
sql.safe_mode - Off
upload_max_filesize - 16M
mysql.max_links - Unlimited
mysql.max_persistent - Unlimited
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
session.cache_limiter - <i>no value</i>
session.gc_maxlifetime - 1440
soap.wsdl_cache_limit - 5
opcache.max_accelerated_files - 2000
opcache.max_file_size - 0
opcache.max_wasted_percentage - 5

Browser User-Agent String

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.94 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 have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.