Skip to content
This repository

Allow disabling of some hard-coded styles #239

Open
wants to merge 2 commits into from

2 participants

Jess Telford David Hellsing
Jess Telford

The thumbnails were receiving hard-coded inline styles making it difficult to
overwrite via a theme or normal external CSS stylesheets. This patch allows
disabling of this 'feature' to allow overwritting the styles.

Note that this has been tested with all of the currently available themes.

added some commits
Jess Telford Allow disabling of some hard-coded styles
The thumbnails were receiving hard-coded inline styles making it difficult to
overwrite via a theme or normal external CSS stylesheets. This patch allows
disabling of this 'feature' to allow overwritting the styles.
eba2dfb
Jess Telford Documentation for userThumbStyles option 33c7a1f
David Hellsing

I think you can add !important to your external stylesheet and override the inline styles?

Quite possibly, but that would then mean using !important later is harder (for example, for someone who wants to overwrite my theme's styling with one or two points of their own).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 2 unique commits by 1 author.

Feb 15, 2012
Jess Telford Allow disabling of some hard-coded styles
The thumbnails were receiving hard-coded inline styles making it difficult to
overwrite via a theme or normal external CSS stylesheets. This patch allows
disabling of this 'feature' to allow overwritting the styles.
eba2dfb
Jess Telford Documentation for userThumbStyles option 33c7a1f
This page is out of date. Refresh to see the latest.
2  docs/options/index.rst
Source Rendered
@@ -145,4 +145,6 @@ List of options
145 145
 
146 146
 - :doc:`transitionSpeed` Defines the speed of the transition.
147 147
 
  148
+- :doc:`userThumbStyles` Disable certain inline styles of thumbnails.
  149
+
148 150
 - :doc:`width` Manually set a gallery width.
10  docs/options/userThumbStyles.rst
Source Rendered
... ...
@@ -0,0 +1,10 @@
  1
+========
  2
+userThumbStyles
  3
+========
  4
+
  5
+    | type: **Boolean**
  6
+    | default: **false**
  7
+
  8
+If ``true``, this will disable ``overflow``, ``top``, and ``bottom`` styles
  9
+being applied inline on ``.galleria-thumbnails``, ``.galleria-thumbnails >
  10
+.galleria-images``, and ``.galleria-thumbnails > .galleria-images > img``
125  src/galleria.js
@@ -2115,7 +2115,8 @@ Galleria.prototype = {
2115 2115
             transitionInitial: undef, // legacy, deprecate in 1.3. Use initialTransition instead.
2116 2116
             transitionSpeed: 400,
2117 2117
             useCanvas: false, // 1.2.4
2118  
-            width: 'auto'
  2118
+            width: 'auto',
  2119
+            userThumbStyles: false
2119 2120
         };
2120 2121
 
2121 2122
         // legacy support for transitionInitial
@@ -2333,10 +2334,12 @@ Galleria.prototype = {
2333 2334
             height: '100%'
2334 2335
         });
2335 2336
 
2336  
-        this.$( 'thumbnails, thumbnails-list' ).css({
2337  
-            overflow: 'hidden',
2338  
-            position: 'relative'
2339  
-        });
  2337
+        if ( !options.userThumbStyles ) {
  2338
+            this.$( 'thumbnails, thumbnails-list' ).css({
  2339
+                overflow: 'hidden',
  2340
+                position: 'relative'
  2341
+            });
  2342
+        }
2340 2343
 
2341 2344
         // bind image navigation arrows
2342 2345
         this.$( 'image-nav-right, image-nav-left' ).bind( 'click', function(e) {
@@ -2626,7 +2629,7 @@ Galleria.prototype = {
2626 2629
             if ( o.thumbnails === true ) {
2627 2630
 
2628 2631
                 // add a new Picture instance
2629  
-                thumb = new Galleria.Picture(i);
  2632
+                thumb = new Galleria.Picture(i, self._options.userThumbStyles);
2630 2633
 
2631 2634
                 // get source from thumb or image
2632 2635
                 src = data.thumb || data.image;
@@ -4644,7 +4647,7 @@ Galleria.requires = function( version, msg ) {
4644 4647
     @param {number} [id] Optional id to keep track of instances
4645 4648
 */
4646 4649
 
4647  
-Galleria.Picture = function( id ) {
  4650
+Galleria.Picture = function( id, userThumbStyles ) {
4648 4651
 
4649 4652
     // save the id
4650 4653
     this.id = id || null;
@@ -4655,11 +4658,15 @@ Galleria.Picture = function( id ) {
4655 4658
     // Create a new container
4656 4659
     this.container = Utils.create('galleria-image');
4657 4660
 
4658  
-    // add container styles
4659  
-    $( this.container ).css({
4660  
-        overflow: 'hidden',
4661  
-        position: 'relative' // for IE Standards mode
4662  
-    });
  4661
+    this.userThumbStyles = (userThumbStyles === undefined ? false : userThumbStyles);
  4662
+
  4663
+	// add container styles
  4664
+    if (!this.userThumbStyles) {
  4665
+        $( this.container ).css({
  4666
+            overflow: 'hidden',
  4667
+            position: 'relative' // for IE Standards mode
  4668
+        });
  4669
+    }
4663 4670
 
4664 4671
     // saves the original measurements
4665 4672
     this.original = {
@@ -4953,53 +4960,55 @@ Galleria.Picture.prototype = {
4953 4960
                 }
4954 4961
 
4955 4962
                 // calculate image_position
4956  
-                var pos = {},
4957  
-                    mix = {},
4958  
-                    getPosition = function(value, measure, margin) {
4959  
-                        var result = 0;
4960  
-                        if (/\%/.test(value)) {
4961  
-                            var flt = parseInt( value, 10 ) / 100,
4962  
-                                m = self.image[ measure ] || $( self.image )[ measure ]();
4963  
-
4964  
-                            result = Math.ceil( m * -1 * flt + margin * flt );
4965  
-                        } else {
4966  
-                            result = Utils.parseValue( value );
  4963
+                if ( !self.userThumbStyles ) {
  4964
+                    var pos = {},
  4965
+                        mix = {},
  4966
+                        getPosition = function(value, measure, margin) {
  4967
+                            var result = 0;
  4968
+                            if (/\%/.test(value)) {
  4969
+                                var flt = parseInt( value, 10 ) / 100,
  4970
+                                    m = self.image[ measure ] || $( self.image )[ measure ]();
  4971
+ 
  4972
+                                result = Math.ceil( m * -1 * flt + margin * flt );
  4973
+                            } else {
  4974
+                                result = Utils.parseValue( value );
  4975
+                            }
  4976
+                            return result;
  4977
+                        },
  4978
+                        positionMap = {
  4979
+                            'top': { top: 0 },
  4980
+                            'left': { left: 0 },
  4981
+                            'right': { left: '100%' },
  4982
+                            'bottom': { top: '100%' }
  4983
+                        };
  4984
+ 
  4985
+                    $.each( options.position.toLowerCase().split(' '), function( i, value ) {
  4986
+                        if ( value === 'center' ) {
  4987
+                            value = '50%';
4967 4988
                         }
4968  
-                        return result;
4969  
-                    },
4970  
-                    positionMap = {
4971  
-                        'top': { top: 0 },
4972  
-                        'left': { left: 0 },
4973  
-                        'right': { left: '100%' },
4974  
-                        'bottom': { top: '100%' }
4975  
-                    };
4976  
-
4977  
-                $.each( options.position.toLowerCase().split(' '), function( i, value ) {
4978  
-                    if ( value === 'center' ) {
4979  
-                        value = '50%';
4980  
-                    }
4981  
-                    pos[i ? 'top' : 'left'] = value;
4982  
-                });
4983  
-
4984  
-                $.each( pos, function( i, value ) {
4985  
-                    if ( positionMap.hasOwnProperty( value ) ) {
4986  
-                        $.extend( mix, positionMap[ value ] );
4987  
-                    }
4988  
-                });
4989  
-
4990  
-                pos = pos.top ? $.extend( pos, mix ) : mix;
4991  
-
4992  
-                pos = $.extend({
4993  
-                    top: '50%',
4994  
-                    left: '50%'
4995  
-                }, pos);
4996  
-
4997  
-                // apply position
4998  
-                $( self.image ).css({
4999  
-                    position : 'absolute',
5000  
-                    top :  getPosition(pos.top, 'height', height),
5001  
-                    left : getPosition(pos.left, 'width', width)
5002  
-                });
  4989
+                        pos[i ? 'top' : 'left'] = value;
  4990
+                    });
  4991
+ 
  4992
+                    $.each( pos, function( i, value ) {
  4993
+                        if ( positionMap.hasOwnProperty( value ) ) {
  4994
+                            $.extend( mix, positionMap[ value ] );
  4995
+                        }
  4996
+                    });
  4997
+ 
  4998
+                    pos = pos.top ? $.extend( pos, mix ) : mix;
  4999
+ 
  5000
+                    pos = $.extend({
  5001
+                        top: '50%',
  5002
+                        left: '50%'
  5003
+                    }, pos);
  5004
+ 
  5005
+                    // apply position
  5006
+                    $( self.image ).css({
  5007
+                        position : 'absolute',
  5008
+                        top :  getPosition(pos.top, 'height', height),
  5009
+                        left : getPosition(pos.left, 'width', width)
  5010
+                    });
  5011
+                }
5003 5012
 
5004 5013
                 // show the image
5005 5014
                 self.show();
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.