Lightbox fixes

primefaces · Sep 9, 2017 · 6223db0 · 6223db0
1 parent d296d7b
commit 6223db0
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 29 deletions.
diff --git a/src/components/lightbox/Lightbox.css b/src/components/lightbox/Lightbox.css
@@ -11,23 +11,28 @@
     margin: 0;
     padding: 0;
     background-color: #000000;
+    -webkit-transition-property: width, height;
+    -moz-transition-property: width, height;
+    -ms-transition-property: width, height;
+    -o-transition-property: width, height;
+    transition-property: width, height;
 }
 
 .ui-lightbox-nav-right, .ui-lightbox-nav-left {
-    position: absolute;
-    top: 50%;
-    cursor: pointer;
+   position: absolute;
+   top: 50%;
+   cursor: pointer;
 }
 
 .ui-lightbox-nav-left {
-    left: 0;
+   left: 0;
 }
 
 .ui-lightbox-nav-right {
-    right: 0;
+   right: 0;
 }
 
-.ui-lightbox-loading {
+.ui-lightbox-loading .ui-lightbox-content {
     background: url("./images/loading.gif") #000000 center center no-repeat;
 }
 

diff --git a/src/components/lightbox/Lightbox.js b/src/components/lightbox/Lightbox.js
@@ -88,7 +88,6 @@ export class Lightbox extends Component {
     }
 
     hide(event){
-        this.setState({captionText:null});
         this.index = null;
         this.setState({currentImage:null})
         this.panel.style.left = 'auto';
@@ -106,21 +105,21 @@ export class Lightbox extends Component {
     displayImage(image){
         setTimeout(() => {
             this.setState({currentImage: image});
-            this.setState({captionText:image.title});
+            this.center();
         }, 1000);
     }
 
     prev() {
         this.setState({loading:true});
-        this.setState({captionText:null});
+        this.img.style.display = 'none';
         if(this.index > 0) {
             this.displayImage(this.props.images[--this.index]);
         }
     }
 
     next() {
         this.setState({loading:true});
-        this.setState({captionText:null});
+        this.img.style.display = 'none';
         if(this.index <= (this.props.images.length - 1)) {
             this.displayImage(this.props.images[++this.index]);
         }
@@ -155,7 +154,7 @@ export class Lightbox extends Component {
             {'ui-helper-hidden':!(this.props.images && this.props.images.length && this.index !== 0 && this.state.currentImage)} );
         var rightButton=classNames('ui-state-default ui-lightbox-nav-right ui-corner-left',
             {'ui-helper-hidden':!(this.props.images && this.props.images.length && this.index < (this.props.images.length - 1) && this.state.currentImage)} );
-        var contentClass=classNames('ui-lightbox-content ui-corner-all',{'ui-lightbox-loading':this.state.loading})
+        var containerClassName = classNames('ui-lightbox ui-widget ui-helper-hidden ui-corner-all ui-shadow', {'ui-lightbox-loading':this.state.loading});
 
         if(this.props.type==='images'){
             images=<div style={this.props.style} className={this.props.className}>{
@@ -184,16 +183,16 @@ export class Lightbox extends Component {
             <div id={this.props.id}>
                 {images}
                 {contentText}
-                <div className="ui-lightbox ui-widget ui-helper-hidden ui-corner-all ui-shadow"
+                <div className={containerClassName}
                      style={{transitionProperty:'all',transitionDuration:this.props.effectDuration, transitionTimingFunction:this.props.easing, display:this.state.visible?'block':'none',
                                 zIndex:this.zindex }} ref={el=>this.panel=el } onClick={()=>this.preventDocumentClickListener = true}>
                     <div className="ui-lightbox-content-wrapper">
                         <a className={leftButton} style={{zIndex:this.zindex?this.zindex+1:null}} onClick={this.prev.bind(this)}>
                             <span className="fa fa-fw fa-caret-left"></span>
                         </a>
-                        <div className={contentClass} ref={el=>this.content=el}
-                             style={{transitionProperty:"'width,height'",transitionDuration:this.props.effectDuration, transitionTimingFunction:this.props.easing}}>
-                            <img ref={el=>this.img=el} src={this.state.currentImage ? this.state.currentImage.source : ''}
+                        <div className="ui-lightbox-content ui-corner-all" ref={el=>this.content=el}
+                             style={{transitionDuration:this.props.effectDuration, transitionTimingFunction:this.props.easing}}>
+                            <img ref={el => this.img = el} src={this.state.currentImage ? this.state.currentImage.source : ''}
                                  onLoad={this.onImageLoad.bind(this)} alt=""/>
                             {contentFrame}
                         </div>
@@ -202,13 +201,6 @@ export class Lightbox extends Component {
                             <span className="fa fa-fw fa-caret-right"></span>
                         </a>
                     </div>
-                    <div className="ui-lightbox-caption ui-widget-header" style={{display:this.state.captionText ? 'block' : 'none'}}>
-                        <span className="ui-lightbox-caption-text">{this.state.captionText}</span>
-                        <a className="ui-lightbox-close ui-corner-all" href="#" onClick={event=>this.hide(event)}>
-                            <span className="fa fa-fw fa-close"></span>
-                        </a>
-                        <div style={{clear:'both'}}></div>
-                    </div>
                 </div>
             </div>
         );

diff --git a/src/showcase/lightbox/LightboxDemo.js b/src/showcase/lightbox/LightboxDemo.js
@@ -75,14 +75,15 @@ import {Lightbox} from 'primereact/components/lightbox/Lightbox';
 
 `}
                         </CodeHighlight>
-                        <CodeHighlight className="html">
-                            {`
+
+                        <CodeHighlight className="javascript">
+{`
 var images=[
-            {source:'showcase/resources/demo/images/sopranos/sopranos1.jpg', thumbnail:'showcase/resources/demo/images/sopranos/sopranos1_small.jpg', title:'Sopranos 1'},
-            {source:'showcase/resources/demo/images/sopranos/sopranos2.jpg', thumbnail:'showcase/resources/demo/images/sopranos/sopranos2_small.jpg', title:'Sopranos 2'},
-            {source:'showcase/resources/demo/images/sopranos/sopranos3.jpg', thumbnail:'showcase/resources/demo/images/sopranos/sopranos3_small.jpg', title:'Sopranos 3'},
-            {source:'showcase/resources/demo/images/sopranos/sopranos4.jpg', thumbnail:'showcase/resources/demo/images/sopranos/sopranos4_small.jpg', title:'Sopranos 4'}
-        ];
+    {source:'showcase/resources/demo/images/sopranos/sopranos1.jpg', thumbnail:'showcase/resources/demo/images/sopranos/sopranos1_small.jpg', title:'Sopranos 1'},
+    {source:'showcase/resources/demo/images/sopranos/sopranos2.jpg', thumbnail:'showcase/resources/demo/images/sopranos/sopranos2_small.jpg', title:'Sopranos 2'},
+    {source:'showcase/resources/demo/images/sopranos/sopranos3.jpg', thumbnail:'showcase/resources/demo/images/sopranos/sopranos3_small.jpg', title:'Sopranos 3'},
+    {source:'showcase/resources/demo/images/sopranos/sopranos4.jpg', thumbnail:'showcase/resources/demo/images/sopranos/sopranos4_small.jpg', title:'Sopranos 4'}
+];
 
 `}
                         </CodeHighlight>