Support » Plugin: Photoswipe Masonry Gallery » plugin inline js and css break

  • I’m using the photoswipe plugin with Advanced custom fields.

    WordPress wrappes the code generated in the shortcode with p tags. Some get mixed with the css and js code needed for the gallery.

    WordPress fixes this (check wp-includes/media.php) by not using double newlines, so no p tags get inserted in the code.

    I suggest you remove all double newlines from the code as follows:

    		$output_buffer .= "
    		<style type='text/css'>
    			/* PhotoSwipe Plugin */
    			.psgal {
    				margin: auto;
    				padding-bottom:40px;
    				-webkit-transition: all 0.4s ease;
    				-moz-transition: all 0.4s ease;
    				-o-transition: all 0.4s ease;
    				transition: all 0.4s ease;
    				opacity:0.1;";
    
    				if($options['use_masonry']) $output_buffer .="opacity:1; text-align:center;";
    
    				$output_buffer .= "
    			}
    			.psgal.photoswipe_showme{
    				opacity:1;
    			}
    			.psgal figure {
    				float: left;";
    
    				if($options['use_masonry']) $output_buffer .="float:none; display:inline-block;";
    
    				$output_buffer .= "
    				text-align: center;
    				width: ".$options['thumbnail_width']."px;
    				padding:5px;
    				margin: 0px;
    				box-sizing:border-box;
    			}
    			.psgal a{
    				display:block;
    			}
    			.psgal img {
    				margin:auto;
    				max-width:100%;
    				width: auto;
    				height: auto;
    				border: 0;
    			}
    			.psgal figure figcaption{
    				font-size:13px;
    			}
    			.msnry{
    				margin:auto;
    			}
    			.pswp__caption__center{
    				text-align: center;
    			}";
    
    			if(!$options['show_captions']) $output_buffer .="
    			.photoswipe-gallery-caption{
    				display:none;
    			}
    			";
    
    			$output_buffer .= "
    		</style>";

    for CSS and this for JS:

    <script type='text/javascript'>
    			var container_".$post_id." = document.querySelector('#psgal_".$post_id."');
    			var msnry;
    			// initialize  after all images have loaded
    			imagesLoaded( container_".$post_id.", function() {";
    
    				if(!$options['use_masonry']){
    					 $output_buffer .="
    						// initialize Masonry after all images have loaded
    						new Masonry( container_".$post_id.", {
    						  // options...
    						  itemSelector: '.msnry_item',
    						  //columnWidth: ".$options['thumbnail_width'].",
    						  isFitWidth: true
    						});
    						(container_".$post_id.").className += ' photoswipe_showme';";
    				}
    
    				$output_buffer .="
    			});
    		</script>
Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘plugin inline js and css break’ is closed to new replies.