Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Allow disabling of some hard-coded styles #239

Open
wants to merge 2 commits into from

2 participants

@jesstelford

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.

jesstelford added some commits
@jesstelford jesstelford 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
@jesstelford jesstelford Documentation for userThumbStyles option 33c7a1f
@davidhellsing

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
Commits on Feb 15, 2012
  1. @jesstelford

    Allow disabling of some hard-coded styles

    jesstelford authored
    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.
  2. @jesstelford
This page is out of date. Refresh to see the latest.
View
2  docs/options/index.rst
@@ -145,4 +145,6 @@ List of options
- :doc:`transitionSpeed` Defines the speed of the transition.
+- :doc:`userThumbStyles` Disable certain inline styles of thumbnails.
+
- :doc:`width` Manually set a gallery width.
View
10 docs/options/userThumbStyles.rst
@@ -0,0 +1,10 @@
+========
+userThumbStyles
+========
+
+ | type: **Boolean**
+ | default: **false**
+
+If ``true``, this will disable ``overflow``, ``top``, and ``bottom`` styles
+being applied inline on ``.galleria-thumbnails``, ``.galleria-thumbnails >
+.galleria-images``, and ``.galleria-thumbnails > .galleria-images > img``
View
125 src/galleria.js
@@ -2115,7 +2115,8 @@ Galleria.prototype = {
transitionInitial: undef, // legacy, deprecate in 1.3. Use initialTransition instead.
transitionSpeed: 400,
useCanvas: false, // 1.2.4
- width: 'auto'
+ width: 'auto',
+ userThumbStyles: false
};
// legacy support for transitionInitial
@@ -2333,10 +2334,12 @@ Galleria.prototype = {
height: '100%'
});
- this.$( 'thumbnails, thumbnails-list' ).css({
- overflow: 'hidden',
- position: 'relative'
- });
+ if ( !options.userThumbStyles ) {
+ this.$( 'thumbnails, thumbnails-list' ).css({
+ overflow: 'hidden',
+ position: 'relative'
+ });
+ }
// bind image navigation arrows
this.$( 'image-nav-right, image-nav-left' ).bind( 'click', function(e) {
@@ -2626,7 +2629,7 @@ Galleria.prototype = {
if ( o.thumbnails === true ) {
// add a new Picture instance
- thumb = new Galleria.Picture(i);
+ thumb = new Galleria.Picture(i, self._options.userThumbStyles);
// get source from thumb or image
src = data.thumb || data.image;
@@ -4644,7 +4647,7 @@ Galleria.requires = function( version, msg ) {
@param {number} [id] Optional id to keep track of instances
*/
-Galleria.Picture = function( id ) {
+Galleria.Picture = function( id, userThumbStyles ) {
// save the id
this.id = id || null;
@@ -4655,11 +4658,15 @@ Galleria.Picture = function( id ) {
// Create a new container
this.container = Utils.create('galleria-image');
- // add container styles
- $( this.container ).css({
- overflow: 'hidden',
- position: 'relative' // for IE Standards mode
- });
+ this.userThumbStyles = (userThumbStyles === undefined ? false : userThumbStyles);
+
+ // add container styles
+ if (!this.userThumbStyles) {
+ $( this.container ).css({
+ overflow: 'hidden',
+ position: 'relative' // for IE Standards mode
+ });
+ }
// saves the original measurements
this.original = {
@@ -4953,53 +4960,55 @@ Galleria.Picture.prototype = {
}
// calculate image_position
- var pos = {},
- mix = {},
- getPosition = function(value, measure, margin) {
- var result = 0;
- if (/\%/.test(value)) {
- var flt = parseInt( value, 10 ) / 100,
- m = self.image[ measure ] || $( self.image )[ measure ]();
-
- result = Math.ceil( m * -1 * flt + margin * flt );
- } else {
- result = Utils.parseValue( value );
+ if ( !self.userThumbStyles ) {
+ var pos = {},
+ mix = {},
+ getPosition = function(value, measure, margin) {
+ var result = 0;
+ if (/\%/.test(value)) {
+ var flt = parseInt( value, 10 ) / 100,
+ m = self.image[ measure ] || $( self.image )[ measure ]();
+
+ result = Math.ceil( m * -1 * flt + margin * flt );
+ } else {
+ result = Utils.parseValue( value );
+ }
+ return result;
+ },
+ positionMap = {
+ 'top': { top: 0 },
+ 'left': { left: 0 },
+ 'right': { left: '100%' },
+ 'bottom': { top: '100%' }
+ };
+
+ $.each( options.position.toLowerCase().split(' '), function( i, value ) {
+ if ( value === 'center' ) {
+ value = '50%';
}
- return result;
- },
- positionMap = {
- 'top': { top: 0 },
- 'left': { left: 0 },
- 'right': { left: '100%' },
- 'bottom': { top: '100%' }
- };
-
- $.each( options.position.toLowerCase().split(' '), function( i, value ) {
- if ( value === 'center' ) {
- value = '50%';
- }
- pos[i ? 'top' : 'left'] = value;
- });
-
- $.each( pos, function( i, value ) {
- if ( positionMap.hasOwnProperty( value ) ) {
- $.extend( mix, positionMap[ value ] );
- }
- });
-
- pos = pos.top ? $.extend( pos, mix ) : mix;
-
- pos = $.extend({
- top: '50%',
- left: '50%'
- }, pos);
-
- // apply position
- $( self.image ).css({
- position : 'absolute',
- top : getPosition(pos.top, 'height', height),
- left : getPosition(pos.left, 'width', width)
- });
+ pos[i ? 'top' : 'left'] = value;
+ });
+
+ $.each( pos, function( i, value ) {
+ if ( positionMap.hasOwnProperty( value ) ) {
+ $.extend( mix, positionMap[ value ] );
+ }
+ });
+
+ pos = pos.top ? $.extend( pos, mix ) : mix;
+
+ pos = $.extend({
+ top: '50%',
+ left: '50%'
+ }, pos);
+
+ // apply position
+ $( self.image ).css({
+ position : 'absolute',
+ top : getPosition(pos.top, 'height', height),
+ left : getPosition(pos.left, 'width', width)
+ });
+ }
// show the image
self.show();
Something went wrong with that request. Please try again.