58370

Start the thumbnails from the left of the slideshow instead of the middle

Question:

In the Fotorama plugin, if there are few images then the thumbnails start from the center. I want the thumbnails to start from the left. How can I do this?

Answer1:

It is simple. The fotorama plugin uses css3 transform property to align thumbnails under the main image. just calculate the parent width and children container width using jQuery and if the parent is wider than children container, make a transform across X axis to shift all thumbnails to the left.

$(document).ready(function() { var pw = $('.fotorama__nav--thumbs').innerWidth(); var cw = $('.fotorama__nav__shaft').innerWidth(); var offset = pw -cw; var negOffset = (-1 * (pw -cw)) / 2; var totalOffset = negOffset + 'px'; if (pw > cw) { $('.fotorama__nav__shaft').css('transform', 'translate3d(' + totalOffset + ', 0, 0)'); } });

Answer2:

To start the thumbnails from left or right, just add the CSS code:

.fotorama__nav { text-align: left; /*for left*/ } .fotorama__nav { text-align: right; /*for right*/ }

Recommend

  • Horizontal Bar extending outer container
  • Webpage with wide iframe is not scrollable on an iPhone with viewport
  • How to increase the size of JScrollPane pane?
  • Botframework - resize bot chat in width [duplicate]
  • How do one only submit click event (div), when using jquery live function?
  • TCPDF's getNumLines() is sometimes wrong
  • How to get or calculate size of Azure File/Share or Service
  • Play Framework nested form errors missing
  • How to model a mixture of finite components from different parametric families with JAGS?
  • IOS > Open URL in Safari with POST
  • SQL Server re-calculate or not?
  • Receive mouse move even cursor is outside control
  • C#: Import/Export Settings into/from a File
  • Syntax error on tokens, AnnotationName expected instead - error on query
  • JSR-330 support in Picocontainer : @Inject … @Named(\"xxx)
  • How can I display the parent menu item's description using Wordpress walkers?
  • Force show.bind execution
  • How can I enlarge video fullscreen without the affected interface project in as3?
  • how to save the state in userdefaults of accessory checkmark-iphone
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Python urlparse: small issue
  • Database structure design with variable amounts of fields
  • Disable Enter in editText android
  • FileReader+canvas image loading problem
  • How do I fake an specific browser client when using Java's Net library?
  • How to get a value (ex: baseURL) in every Karate feature?
  • output of program is not same as passed argument
  • How to show dropdown in excel using jrxml (jasper api)?
  • jQuery tmpl and DataLink beta
  • Akka Routing: Reply's send to router ends up as dead letters
  • How to disable jQuery.jplayer autoplay?
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Linking SubReports Without LinkChild/LinkMaster
  • python draw pie shapes with colour filled
  • unknown Exception android
  • Checking variable from a different class in C#
  • Easiest way to encapsulate a HTML5 webpage into an android app?