我安装了一个php库并对其进行了配置，我终于可以让它在iframe中运行了。但是当我点击图片时，我希望它在iframe外面打开该图像弹出视图。{{3 }}
<?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>
此问题与此示例类似：imgGallery 我在iframed页面01的情况下，我想做类似的事情 iframed第02页。
答案 0 :(得分：2)
<iframe>内的页面仅限于iframe的形状。期。
首先我想到的是这个。为了显示比iframe更大的更多，您需要在iframe之外添加一些脚本，然后在iframe内容与iframe页面之间进行一些沟通（很可能是postMessage）。< / p>
其他想法将在您的图库全屏显示FullscreenAPI，然后您将拥有所有屏幕给自己。如果画廊可以产生一些很好的效果。请记住，为了能够做到这一点，显示您的图库的<iframe>必须具有属性allowfullscreen（无需任何值）。
在这两种情况下，您都需要能够在iframe外添加其他JavaScript，或者控制iframe添加到页面的方式。这是安全措施，因此iframe的内容不会绑架父页面。
