如何打开fanybox弹出视图图像外的iframe有一个图片库在php

How to open fancybox pop-up view images outside of an iframe which has an image gallery made in php?

本文关键字:iframe 有一个 图片库 php 图像 fanybox 何打开 视图      更新时间:2023-09-26

我安装了一个php图库并对其进行了配置,最后我可以使它在iframe内运行。但现在,当我点击图像时,我希望它能在iframe。imggallery

外打开图像弹出视图

<?php
if (isset($this->vars['file_list']))
		{
			$thumb_code['file'] = $this->getThumbCode("file");
			
			foreach ($this->vars['file_list'] as $file)
			{	
				$output = '';
				
				$img_url = $this->genThumbURL($request, $file);
				
				if ($this->settings['use_popup_image_viewer'] == true) {
					$url = "?image=" . $request . $file['file'];
					if ($this->settings['show_thumbs_under_viewer'] == true) {
						$fancy_class = "fancybox-thumbs";
						$fancy_attr = "data-fancybox-group='"thumb'"";
					} else {
						$fancy_class = "fancybox";
						$fancy_attr = "data-fancybox-group='"gallery'"";
					}
				} else {
					$url = '?view=' . $request . $file['file'];
					$fancy_class = "";
					$fancy_attr = "";
                }
				
				//<<URL>> = $url = ?view=folder/image.jpg
				//<<FANCY_CLASS>> = $fancy_class = fancybox-thumbs (If left out fancybox will not work. Use inside class attribute on A tag)
				//<<FANCY_ATTR>> = $fancy_attr = data-fancybox-group="gallery" (If left out fancybox will not work. Use on A tag)
				//<<TITLE>> = $file['file'] = image.jpg
				//<<THUMB_WIDTH>> = $this->settings['thumb_size_' . $this->vars['thumb_size']] = 125 (autodetect thumb size also)
				//<<THUMB_HEIGHT>> = $this->settings['thumb_size_' . $this->vars['thumb_size']] = 125 (autodetect thumb size also)
				//<<THUMB_LOCATION>> = $this->escapeString($img_url) = phppi/cache/folder/image_small.jpg (may also set to phppi/themes/gallery/themename/images/no_images.png if no image)
				//<<THEME_LOCATION>> = $this->showThemeURL(1) = phppi/themes/gallery/themename
				
				$replace_codes = array("<<URL>>",
					"<<FANCY_CLASS>>",
					"<<FANCY_ATTR>>",
					"<<TITLE>>", 
					"<<THUMB_WIDTH>>", 
					"<<THUMB_HEIGHT>>", 
					"<<THUMB_LOCATION>>", 
					"<<THEME_LOCATION>>"
				);
				
				$replace_values = array($url,
					$fancy_class,
					$fancy_attr,
					$file['file'], 
					$this->settings['thumb_size_' . $this->vars['thumb_size']], 
					$this->settings['thumb_size_' . $this->vars['thumb_size']], 
					$this->escapeString($img_url), 
					$this->showThemeURL(1)
				);
				echo str_replace($replace_codes, $replace_values, $thumb_code['file']);
			}
		}
		
		echo "<div style='"clear: both;'"></div>'n";
	}
	
	function showPrevFolderURL($format = 0)
	{
		//0 = Output url
		//1 = Return url as string	
		if ($format == 0)
		{
			echo '?' . $this->vars['dir']['req']['parent'];
		} else if ($format == 1) {
			return '?' . $this->vars['dir']['req']['parent'];
		}
	}
	
	function showPrevImageURL($format = 0)
	{
		//0 = Output url
		//1 = Return url as string	
		if ($format == 0)
		{
			if ($this->settings['use_javascript_navigation'] == true)
			{
				echo 'javascript: phppi.go_prev_image();';
			} else {
				if (isset($this->vars['file_list'][$this->vars['previous_image_id']]['full_path']))
				{
					echo '?view=' . $this->vars['file_list'][$this->vars['previous_image_id']]['full_path'];
				} else {
					echo '';
				}
			}
		} else if ($format == 1) {
			if ($this->settings['use_javascript_navigation'] == true)
			{
				return 'javascript: phppi.go_prev_image();';
			} else {
				if (isset($this->vars['file_list'][$this->vars['previous_image_id']]['full_path']))
				{
					return '?view=' . $this->vars['file_list'][$this->vars['previous_image_id']]['full_path'];
				} else {
					return '';
				}
			}
		}
	}
	
	function showNextImageURL($format = 0)
	{
		//0 = Output url
		//1 = Return url as string	
		if ($format == 0)
		{
			if ($this->settings['use_javascript_navigation'] == true)
			{
				echo 'javascript: phppi.go_next_image();';
			} else {
				if (isset($this->vars['file_list'][$this->vars['next_image_id']]['full_path']))
				{
					echo '?view=' . $this->vars['file_list'][$this->vars['next_image_id']]['full_path'];
				} else {
					echo '';
				}
			}
		} else if ($format == 1) {
			if ($this->settings['use_javascript_navigation'] == true)
			{
				return 'javascript: phppi.go_next_image();';
			} else {
				if (isset($this->vars['file_list'][$this->vars['next_image_id']]['full_path']))
				{
					return '?view=' . $this->vars['file_list'][$this->vars['next_image_id']]['full_path'];
				} else {
					return '';
				}
			}
		}
	}
	
	function showUpFolderURL($format = 0)
	{
		//0 = Output url
		//1 = Return url as string	
		if ($format == 0)
		{
			echo '?' . $this->pathInfo($_GET['view'], 'dir_path');
		} else if ($format == 1) {
			return '?' . $this->pathInfo($_GET['view'], 'dir_path');
		}
	}
	
	function showThemeURL($format = 0)
	{
		//0 = Output url
		//1 = Return url as string	
		if ($format == 0)
		{
			echo 'phppi/themes/gallery/' . $this->settings['theme'] . '/' . $this->vars['theme_mode'] . '/';
		} else if ($format == 1) {
			return 'phppi/themes/gallery/' . $this->settings['theme'] . '/' . $this->vars['theme_mode'] . '/';
		}
	}
	
	function showTitle($format = 0)
	{
		//0 = Output url
		//1 = Return url as string
		if ($format == 0)
		{
			echo $this->vars['page_title'];
		} else if ($format == 1) {
			return $this->vars['page_title'];
		}
	}
	
	function showSiteName($format = 0)
	{
		//0 = Output name
		//1 = Return name as string
		if ($format == 0)
		{
			echo $this->settings['site_name'];
		} else if ($format == 1) {
			return $this->settings['site_name'];
		}
	}
	
	function showLogo($format = 0)
	{
		//0 = Output img tag
		//1 = Return img tag as string		
		if ($format == 0)
		{
			echo "<img id='"page-logo'" src='"" . $this->settings['page_title_logo'] . "'" alt='"" . $this->settings['site_name'] . "'">";
		} else if ($format == 1) {
			return "<img id='"page-logo'" src='"" . $this->settings['page_title_logo'] . "'" alt='"" . $this->settings['site_name'] . "'">";
		}
	}
	
	function showNav($format = 0, $home = "", $prev = "", $sep = "", $mode = "") 
	{	
		//Mode:
		//classic = Only show title and previous button
		//new = Breadcrumb style, may take up most of the page if using a large folder tree
		//auto = Depending on theme it may switch between the two depending on the screen size
		//left empty = Set based on user settings
		
		//$home = HTML to insert for home button
		//$prev = HTML to insert for prev button
		//$sep = HTML to insert for seperator
		
		$output = "";
		
		if ($mode == "") {
			$mode = $this->settings['nav_menu_style'];
		}
	
		if ($mode == "auto" || $mode == "new") {
			$new_output = "<ul><li class='"nav-home'"><a href='"?'">" . $home . "</a></li>";
			$url = "?";
			
			if ($this->vars['dir']['req']['full'] !== "") {
				$new_output .= "<li class='"nav-sep'">" . $sep . "</li>";
			
				$i = 1;
				foreach ($this->vars['dir']['req']['split'] as $value) {
					if ($i < (count($this->vars['dir']['req']['split']))) {
						$url .= $value . "/";
						$new_output .= "<li><a href='"" . substr($url, 0, -1) . "'">" . $value . "</a></li>";
						$new_output .= "<li class='"nav-sep'">" . $sep . "</li>";
					} else {
						$new_output .= "<li class='"nav-curr'"><div class='"title'">" . $value . "</div></li>";
					}
					
					$i++;
				}
			}
			
			$new_output .= "</ul>";
		}
		
		if ($mode == "auto" || $mode == "classic") 
		{
			$url = "?";
			
			if ($this->vars['dir']['req']['parent'] !== "") {			
				$i = 1;
				foreach ($this->vars['dir']['req']['split'] as $value) {
					if ($i < (count($this->vars['dir']['req']['split']))) {
						$url .= $value . "/";
					}
					
					$i++;
				}
				
				$url = substr($url, 0, -1);
			}
			
			$classic_output = "<ul><li class='"nav-prev'"><a href='"" . $url . "'">" . $prev . "</a></li>";
			if ($this->vars['dir']['req']['curr'] !== "") {
				$classic_output .= "<li class='"nav-sep'">" . $sep . "</li>";
				$classic_output .= "<li class='"nav-curr'"><div class='"title'">" . $this->vars['dir']['req']['curr'] . "</div></li>";
			}
			$classic_output .= "</ul>";
		}
		
		if ($mode == "auto") {
			$output .= "<div class='"nav-menu-new'">" . $new_output . "</div>";
			$output .= "<div class='"nav-menu-classic'">" . $classic_output . "</div>";
		} else if ($mode == "new") {
			$output = $new_output;
		} else if ($mode == "classic") {
			$output = $classic_output;
		}
		
		//0 = Output nav
		//1 = Return nav as string		
		if ($format == 0)
		{
			echo $output;
		} else if ($format == 1) {
			return $output;
		}
	}
	
	function showPage()
	{
		require($this->showThemeURL(1) . 'pages/' . $this->vars['page_requested'] . '.php');
	}
	
	function resizedSize($width, $height, $return = 2)
	{
		//Returns width, height or an array of width and height for the thumbnail size of a full sized image		
		if ($width > $height)
		{
			$new_height = $this->settings['thumb_size_' . $this->vars['thumb_size']];
			$new_width = $width * ($this->settings['thumb_size_' . $this->vars['thumb_size']] / $height);
		} else if ($width < $height) {
			$new_height = $height * ($this->settings['thumb_size_' . $this->vars['thumb_size']] / $width);
			$new_width = $this->settings['thumb_size_' . $this->vars['thumb_size']];
		} else if ($width == $height) {
			$new_width = $this->settings['thumb_size_' . $this->vars['thumb_size']];
			$new_height = $this->settings['thumb_size_' . $this->vars['thumb_size']];
		}
		
		if ($return == 0)
		{
			//Return width
			return floor($new_width);
		} else if ($return == 1) {
			//Return height
			return floor($new_height);
		} else if ($return == 2) {
			//Return array with width and height
			return array(floor($new_width), floor($new_height));
		}
	}
	
	function insertHeadInfo()
	{
		echo "
<!-- 
PHP Picture Index " . $this->vars['version'] . "
Created by: Brendan Ryan (http://www.pixelizm.com/)
Site: http://phppi.pixelizm.com/
Licence: GNU General Public License v3                   		 
http://www.gnu.org/licenses/                
-->'n'n";
		echo "<meta name='"viewport'" content='"width=device-width; initial-scale=1.0; user-scalable = no; maximum-scale=1.0;'">'n";
		if (isset($_GET['view']) && !isset($this->vars['error'])) {
			echo "<script type='"text/javascript'" src='"phppi/scripts/jquery/jquery.js'"></script>";
		} elseif ($this->settings['use_popup_image_viewer'] == true) {
			echo "<script type='"text/javascript'" src='"phppi/scripts/jquery/jquery.js'"></script>'n";
		}
		
		if (isset($_GET['view']) && !isset($this->vars['error']))
		{					
			if ($this->settings['page_title_show_full_path'] == true) { $temp_title_full_path = '1'; } else { $temp_title_full_path = '0'; }
			if ($this->settings['enable_hotkeys']) { $enable_hotkeys = 1; } else { $enable_hotkeys = 0; }
			if ($this->settings['enable_up_hotkey']) { $enable_up_hotkey = 1; } else { $enable_up_hotkey = 0; }
			
			echo "
<script type='"text/javascript'" src='"phppi/scripts/phppi_js.js'"></script>			
<script type='"text/javascript'">
	$(document).ready(function() { phppi.initialize(); });
	
	phppi.image_width = " . $this->vars['file_list'][$this->vars['current_image_id']]['data'][0] . ";
	phppi.image_height = " . $this->vars['file_list'][$this->vars['current_image_id']]['data'][1] . ";
	phppi.up_folder = '" . $this->escapeString($this->showUpFolderURL(1)) . "';
	phppi.prev_image = '" . $this->escapeString($this->showPrevImageURL(1)) . "';
	phppi.next_image = '" . $this->escapeString($this->showNextImageURL(1)) . "';
	phppi.title_full_path = " . $temp_title_full_path . ";
	phppi.enable_hotkeys = " . $enable_hotkeys . ";
	phppi.enable_up_hotkey = " . $enable_up_hotkey . ";";
			
			if ($this->settings['use_javascript_navigation'] == true)
			{
				$file_list = "";
				$x = 0;
				
				$dir = $this->pathInfo($_GET['view'], 'dir_path');
				
				foreach($this->vars['file_list'] as $file) {
					$file_list .= "['" . $this->escapeString($dir) . "/" . $this->escapeString($file['file']) . "', '" . $this->escapeString($file['file']) . "', " . $file['data'][0] . ", " . $file['data'][1] . "]";
					
					if ($x < (count($this->vars['file_list']) - 1)) { $file_list .= ","; }
					
					$x++;
				}
				
				echo "
	phppi.site_name = '" . $this->settings['site_name'] . "';
	phppi.page_title = '" . $this->vars['page_title'] . "';
	phppi.current_file = " . $this->vars['current_image_id'] . ";
	phppi.files = [" . $file_list . "];";
			}
			
			echo "</script>'n";
		}
		
		if ($this->settings['use_popup_image_viewer'] == true)
		{
			echo "<script type='"text/javascript'" src='"phppi/scripts/fancybox/jquery.fancybox.js'"></script>'n";
			if ($this->settings['show_thumbs_under_viewer'] == true) { echo "<script type='"text/javascript'" src='"phppi/scripts/fancybox/jquery.fancybox-thumbs.js'"></script>'n"; }
			if ($this->settings['enable_mousewheel'] == true) { echo "<script type='"text/javascript'" src='"phppi/scripts/fancybox/jquery.mousewheel-3.0.6.pack.js'"></script>'n"; }
			
			if ($this->settings['show_thumbs_under_viewer'] == true) {
				//Thumb Helper Version
				echo "<script type='"text/javascript'">
	$(document).ready(function() {
		$('.fancybox-thumbs').fancybox({
			openEffect: '" . $this->settings['open_image_animation'] . "',
			closeEffect: '" . $this->settings['close_image_animation'] . "',
			prevEffect: '" . $this->settings['nextprev_image_animation'] . "',
			nextEffect: '" . $this->settings['nextprev_image_animation'] . "',
	
			closeBtn: false,
			arrows: false,
			nextClick: true,
	
			helpers: {
				thumbs: {
					width: " . $this->settings['popup_thumb_size'] . ",
					height: " . $this->settings['popup_thumb_size'] . "
				}
			}
		});
	});
</script>'n";
			} else {
				//Normal Version
				echo "<script type='"text/javascript'">
	$(document).ready(function() {
		$('.fancybox').fancybox({
			openEffect: '" . $this->settings['open_image_animation'] . "',
			closeEffect: '" . $this->settings['close_image_animation'] . "',
			prevEffect: '" . $this->settings['nextprev_image_animation'] . "',
			nextEffect: '" . $this->settings['nextprev_image_animation'] . "'
		});
	});
</script>'n";
			}
			echo "<link rel='"stylesheet'" type='"text/css'" href='"phppi/scripts/fancybox/jquery.fancybox.css'">'n";
			if ($this->settings['show_thumbs_under_viewer'] == true) { echo "<link rel='"stylesheet'" type='"text/css'" href='"phppi/scripts/fancybox/jquery.fancybox-thumbs.css'">'n"; }
		}
		
		echo "<link rel='"stylesheet'" type='"text/css'" href='"phppi/css/global.css'">'n";
		echo "<link rel='"stylesheet'" type='"text/css'" href='"phppi/themes/thumbnail/" . $this->settings['thumbnail_theme'] . "/style.css'">'n";
		echo "<link rel='"stylesheet'" type='"text/css'" href='"" . $this->showThemeURL(1) . "style.css'">'n";
	}
	
	function initialize()
	{		
		//Debug Mode		
		if ($this->settings['debug_mode'] == true)
		{
			error_reporting(E_ALL);
			ini_set('display_errors', '1');
		}
		
		ini_set('memory_limit', $this->settings['php_memory'] . 'M');
		
		//Set Thumb Size if changed
		if (isset($_POST['thumb_size'])) {
			if ($_POST['thumb_size'] == 0) { 
				$this->setThumbSize('small');
			} else if ($_POST['thumb_size'] == 1) { 
				$this->setThumbSize('medium');
			} else if ($_POST['thumb_size'] == 2) { 
				$this->setThumbSize('large');
			}
		} else {
			$this->setThumbSize(NULL);
		}
		
		//GZIP Compression
		ini_set('zlib.output_compression', $this->settings['use_gzip_compression']);
		ini_set('zlib.output_compression_level', $this->settings['gzip_compression_level']);
		
		//Theme Mode
		$this->setThemeMode();
		
		if ($this->settings['allow_mobile_theme'] == true)
		{
			if (!is_file('phppi/themes/gallery/' . $this->settings['theme'] . '/' . $this->vars['theme_mode'] . '/template.php'))
			{
				$this->vars['theme_mode'] = 'standard';
			}
		} else {
			$this->vars['theme_mode'] = 'standard';
		}
		
		//Load Variables
		$this->loadVars();
		
		//Load Blacklists/Whitelists
		$this->loadLists();
		
		//Display Content
		if (isset($_GET['thumb'])) 
		{
			//Show thumbnail only
			$this->genThumbnail($_GET['thumb']);
			
			exit;
		} else if (isset($_GET['image'])) {
			//Show image
			if ($this->checkExploit('/' . $_GET['image']) == true) {
				$file_ext = strtolower($this->pathInfo($_GET['image'], 'file_ext'));
				
				if ($file_ext == 'jpg' or $file_ext == 'jpeg')
				{
					$format = 'jpeg';
				} else if ($file_ext == 'png') {
					$format = 'png';
				} else if ($file_ext == 'gif') {
					$format = 'gif';
				}
				
				header("Content-length: " . filesize($this->vars['dir']['gallery'] . '/' . $_GET['image']));
				header("Content-type: image/" . $format);
				readfile($this->vars['dir']['gallery'] . '/' . $_GET['image']);
			} else {
				echo "File doesn't exist.";
			}
			
			exit;
		} else if (isset($_GET['view'])) {
			//Show full image view
			$req_path = $this->pathInfo($_GET['view'], 'dir_path');
			
			if ($req_path !== "") { $req_path = "/" . $req_path; }
			
			if ($this->checkExploit($req_path) == true) {
				if (!$this->getDir($req_path . '/'))
				{
					$this->vars['error'] = 'Folder doesn''t exist';
					$this->vars['page_title'] = 'Error';
					$this->vars['page_requested'] = 'error';
					$this->logs("access", "add", "Folder not found (/" . $_GET['view'] . ")");
				} else if (!is_file($this->vars['dir']['gallery'] . '/' . $_GET['view'])) {
					$this->vars['error'] = 'File doesn''t exist';
					$this->vars['page_title'] = 'Error';
					$this->vars['page_requested'] = 'error';
					
					$this->logs("access", "add", "File not found (/" . $_GET['view'] . ")");
				} else {
					for($i = 0; $i < count($this->vars['file_list']); $i++)
					{
						if ($this->vars['file_list'][$i]['file'] == $this->pathInfo($_GET['view'], 'full_file_name'))
						{
							$this->vars['current_image_id'] = $i;
							$this->vars['previous_image_id'] = NULL;
							$this->vars['next_image_id'] = NULL;
							
							if ($i > 0)
							{
								$this->vars['previous_image_id'] = $i - 1;
							}
							if ($i < (count($this->vars['file_list']) - 1))
							{
								$this->vars['next_image_id'] = $i + 1;
							}
							
							break;
						}
					}
					
					if ($this->settings['page_title_show_full_path'] == true) {
						$this->vars['page_title'] = $this->settings['site_name'] . " - " . str_replace("/", " ' ", $_GET['view']);
					} else {
						$this->vars['page_title'] = $this->settings['site_name'] . " - " . $this->pathInfo($_GET['view'], 'full_file_name');
					}
					$this->vars['page_requested'] = 'image';
					
					$this->logs("access", "add", "Viewed image (/" . $_GET['view'] . ")");
				}
			} else {
				$this->vars['error'] = 'File doesn''t exist';
				$this->vars['page_title'] = 'Error';
				$this->vars['page_requested'] = 'error';
				
				$this->logs("access", "add", "Possible exploit attempt, blocked access (/" . $_GET['view'] . ")");
			}
			
			require('phppi/themes/gallery/' . $this->settings['theme'] . '/' . $this->vars['theme_mode'] . '/template.php');
			
			if ($this->settings['debug_show_vars'] == true)	{ $this->outputVarsArray();	}
			if ($this->settings['debug_show_settings'] == true)	{ $this->outputSettingsArray();	}
		} else {
			//Show folder view	
			if ($this->vars['dir']['req']['full'] == '')
			{
				$dir_req = "";
			} else {
				$dir_req = $this->vars['dir']['req']['full'] . '/';
			}
			
			if ($this->vars['dir']['req']['full'] == '' || $this->checkExploit('/' . $this->vars['dir']['req']['full']) == true) {
				
				if (!$this->getDir($dir_req))
				{
					$this->vars['error'] = 'Folder doesn''t exist';
					$this->vars['page_title'] = 'Error';
					$this->vars['page_requested'] = 'error';
					
					$this->logs("access", "add", "Folder not found (/" . $dir_req . ")");
				} else {
					if ($this->settings['page_title_show_full_path'] == true) {
						if ($this->vars['dir']['req']['full'] == "") { $sep = ""; } else { $sep = " - "; }
						$this->vars['page_title'] = $this->settings['site_name'] . $sep . str_replace("/", " ' ", $this->vars['dir']['req']['full']);
					} else {
						if ($this->vars['dir']['req']['full'] == "") { $sep = ""; } else { $sep = " - "; }
						$this->vars['page_title'] = $this->settings['site_name'] . $sep . $this->vars['dir']['req']['curr'];
					}
					$this->vars['page_requested'] = 'folder';
					
					$this->logs("access", "add", "Viewed folder (/" . $dir_req . ")");
				}
			} else {
				$this->vars['error'] = 'Folder doesn''t exist';
				$this->vars['page_title'] = 'Error';
				$this->vars['page_requested'] = 'error';
				
				$this->logs("access", "add", "Folder not found or exploit attempt, blocked access (/" . $dir_req . ")");
			}
			
			require('phppi/themes/gallery/' . $this->settings['theme'] . '/' . $this->vars['theme_mode'] . '/template.php');
			
			if ($this->settings['debug_show_vars'] == true)	{ $this->outputVarsArray();	}
			if ($this->settings['debug_show_settings'] == true)	{ $this->outputSettingsArray();	}
		}
	}
}
?>

如何添加或将此jQuery或Javascript代码转换为php来修改此fancybox以打开iframe外的图像?

<script>
/* <![CDATA[ */
$(document).ready(function() {
	$('.imagen').click(function(e){
		e.preventDefault();
parent.$.fancybox([
{href:'img/sample-9.jpg', title: '01'},
{href:'img/sample-9.jpg', title: '02'},
{href:'img/sample-9.jpg', title: '03'}
],{
//			href: this.href,
			helpers: {
				overlay: {
				opacity: 0.3
				} // overlay
				//, buttons: {}
			} // helpers
		}); // fancybox
	}); // click
	
   //or in this way using another way or option
    $('.image').click(function(e){
		e.preventDefault();
		parent.$.fancybox({
			href: this.href,
			width: 560,
			height: 315,
			type: 'iframe',
			helpers: {
				overlay: {
				opacity: 0.3
				} // overlay
			} // helpers
		}); // fancybox
	}); // click
beforeClose: function() {
$(".fancybox-inner").unwrap();
},
			helpers: {
				overlay: {
				opacity: 0.3
				} // overlay
			}
}); //fancybox
return false;
}); //click	
}); // ready
/* ]]> */
</script>

这个问题类似于这个例子:示例演示我在框架页01的情况下,我想做一些类似的框架页02。

您在<iframe>内的页面仅限于iframe的形状。时期。

我首先想到的是这个。为了显示比iframe更大的,您必须在iframe之外使用一些脚本,然后在iframe内容和页面之间使用iframe(最有可能使用postMessage)进行一些通信。

其他的想法将与您的画廊全屏与FullscreenAPI,然后你会有所有的屏幕自己。万一画廊能带来一些不错的效果。请记住,为了能够做到这一点,显示您的画廊的<iframe>必须具有属性allowfullscreen(不需要值)。

在这两种情况下,你都需要能够在iframe之外添加额外的JavaScript,或者控制iframe如何添加到页面。这是一种安全措施,因此iframe的内容不会占用父页面

相关文章: