#javascript #html #jquery #css
#JavaScript #HTML #jQuery #css
Вопрос:
Я работал над этим некоторое время, но, похоже, я не совсем понимаю, как правильно загрузить страницу с изображением…
<html>
<head>
<script type="text/javascript" language="javascript" src="lytebox.js?version=10-25-2020-2-12" async></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
<style type="text/css">
html,body {
height: 100%;
}
#xoverlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
#xloading {
position: absolute;
top: 5%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
color: #fff;
font: 150% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
}
</style>
<img src="graphics/morebtn_photospagedarker.jpg" style="display: none">
<script type="text/javascript">
function clearOverlayOnLoad() {
var id = "xoverlay";
if (document.getElementById)
var obj = document.getElementById(id);
else if (document.all)
var obj = document.all[id];
else if (document.layers)
var obj = document.layers[id];
obj.style.display = 'none';
//CALL MOST RECENT PAGE HERE!!
page7("true");
document.getElementById("more").innerHTML="<a href='javascript:void(0)' onClick='nextpage();'><img onmouseout='this.src="graphics/morebtn_photospage.jpg"'' onmouseover='this.src="graphics/morebtn_photospagedarker.jpg"' width='60' height='60' src='graphics/morebtn_photospage.jpg' style='border-radius: 100px'></a>"; // Create More Button
resizephotopage();
}
</script>
</head>
<script type="text/javascript">
maxgalleries=100
evenrow=0;
r=0; e=0; buildcode=""; // Call Variables
function makeholders(){
for (l=0;l<=maxgalleries;l )
{
document.write('<div id="' l 'holder"></div>');
document.write('<div id="' l 'hidden"></div>');
}
}
function insertalbum(location, title, totalpics, tf){ // Create Insert Function Used In "photos_list.htm"
if (tf=="true"){
if(r>=maxgalleries){document.getElementById("more").innerHTML="";return} // If MaxGalleries Do Not Show More Button
if (evenrow==0){buildcode='<table border="0" cellpadding="0" style="border-collapse: collapse; vertical-align:top;" width="100%"><tr><td width="320px" align="left" style="vertical-align:top"><a id="CurrentAEvent' location '" href="javascript:void(0)" onClick="document.getElementById(' String.fromCharCode(39) '' location '-01' String.fromCharCode(39) ').click()" ><img id="CurrentImgEvent' location '" src="albums/' location '/01.jpg" style="box-shadow: 2px 2px 2px #D3D3D3; border-radius: 10px 10px 10px 10px; border: 6px solid #800000;" width="320" height="213" align="left"></a><p align="left"><br></td><td width="80%" align="left" style="vertical-align:center"><a href="javascript:void(0)" onClick="document.getElementById(' String.fromCharCode(39) '' location '-01' String.fromCharCode(39) ').click()">' title '<br>(' totalpics ' Photos)</a><p>'} // Create Slideshow Type 1
if (evenrow==1){buildcode='<table border="0" cellpadding="0" style="border-collapse: collapse" width="100%"><tr><td width="20%" align="right"><td width="80%" align="right" style="vertical-align:center"><a href="javascript:void(0)" onClick="document.getElementById(' String.fromCharCode(39) '' location '-01' String.fromCharCode(39) ').click()">' title '<br>(' totalpics ' Photos)</a></td><td width="320px" align="right"><a id="CurrentAEvent' location '" href="javascript:void(0)" onClick="document.getElementById(' String.fromCharCode(39) '' location '-01' String.fromCharCode(39) ').click()" ><img id="CurrentImgEvent' location '" src="albums/' location '/01.jpg" style="box-shadow: 2px 2px 2px #D3D3D3; border-radius: 10px 10px 10px 10px; border: 6px solid #800000;" width="320" height="213" align="right"></a><p align="right"><br><p>'} // Create Slideshow Type 2
buildcode=buildcode '';
if (evenrow==0){buildcode=buildcode '<td width="20%" align="center"></td></tr></table>';} // Separate Tables If They Are Even (gives this a nicer effect)
if (evenrow==1){buildcode=buildcode '</tr></table>'; evenrow=-1;}
document.getElementById(r 'holder').innerHTML=buildcode;
document.getElementById('CurrentAEvent' location '').onmouseover = function(){document.getElementById('CurrentImgEvent' location '').style = "box-shadow: 4px 4px 4px #D3D3D3; border-radius: 10px 10px 10px 10px; border: 6px solid #616161;"}
document.getElementById('CurrentAEvent' location '').onmouseout = function(){document.getElementById('CurrentImgEvent' location '').style = "box-shadow: 2px 2px 2px #D3D3D3; border-radius: 10px 10px 10px 10px; border: 6px solid #800000;"}
evenrow ; r ; buildcode=""
}
else{
if(e>=maxgalleries){return}
for (i=1;i<=totalpics;i )
{
if (i<=9){
buildcode=buildcode '<a href="albums/' location '/0' i '.jpg" class="lytebox" data-lyte-options="group:' location '" data-title="' title '" id="' location '-0' i '"></a>';} // Create The Link To Click
else {
buildcode=buildcode '<a href="albums/' location '/' i '.jpg" class="lytebox" data-lyte-options="group:' location '" data-title="' title '"></a>';} // Create The Link To Click If Slide Count Is Less Than 10
}
e
}
}
function nextpage() {
// SET UP CALL FOR ALL SUCCEEDING PAGES HERE!
if (last==7){
page6("true");
last--;
resizephotopage();
return}
if (last==6){
page5("true");
last--;
resizephotopage();
return}
if (last==5){
page4("true");
last--;
resizephotopage();
return}
if (last==4){
page3("true");
last--;
resizephotopage();
return}
if (last==3){
page2("true");
last--;
resizephotopage();
return}
if (last==2){
page1("true");
last--;
document.getElementById("more").innerHTML=""; // If This Is The Last Page Do Not Show The More Button
resizephotopage();
return}
}
function resizephotopage(){ // Resizes Div To Fit Perfectly Into IFRAME
newheight=document.getElementById('thispage').scrollHeight 50;
if (newheight < 860){newheight=860;}
window.parent.document.getElementById('photoshere').height=newheight 'px';
}
</script>
<body style="background-color:FFFFFF" link="#000000" vlink="#000000" alink="#000000">
<body onload="clearOverlayOnLoad();">
<div id="xoverlay">
<div id="xloading">
Loading, please wait...<br>
<img src="/graphics/xloading.gif" alt="Loading" width=126 height=22>
</div>
</div>
<div id="thispage">
<p>amp;nbsp;</p>
<p align="left"><font size="5" color="#800000" face="Verdana"><b>Click On An Album To See The
Pictures:</font></b></p><p>amp;nbsp;</p>
<div align="center">
<script type="text/javascript">
makeholders();
<?php
$sub_req_url = 'https://www.mywebsite.us/photos_list.htm';
$ch = curl_init($sub_req_url);
$encoded = '';
// include GET as well as POST variables; your needs may vary.
foreach($_GET as $name => $value) {
$encoded .= urlencode($name).'='.urlencode($value).'amp;';
}
foreach($_POST as $name => $value) {
$encoded .= urlencode($name).'='.urlencode($value).'amp;';
}
// chop off last ampersand
$encoded = substr($encoded, 0, strlen($encoded)-1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $encoded);
curl_setopt($ch, CURLOPT_USERAGENT, $_SERVER['HTTP_USER_AGENT']);
curl_setopt($ch, CURLOPT_REFERER, $_SERVER['HTTP_REFERER']);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_POST, 1);
curl_exec($ch);
curl_close($ch);
?>
//INCLUDE ALL PAGES HERE (Marked "false") TO CREATE HOLDERS
last=7;
page7("false");
page6("false");
page5("false");
page4("false");
page3("false");
page2("false");
page1("false");
</script>
</div>
<div id="more" align="center"></div> <!-- Create More Button To Modify -->
<script>document.getElementById(e 'hidden').innerHTML=buildcode;</script>
</div>
</body>
</html>
Это все кодирование, которое у меня есть, которое необходимо учитывать…
Мне нужно иметь функцию, которая проверяет, когда кнопка «Еще» находится на экране, однако это немного сложно, учитывая, что это внутри iframe. Я не уверен, возможно ли это физически, но если бы вы могли мне помочь, я был бы очень признателен.
Комментарии:
1. привет. покажите свой код html и css
2. Содержимое iframe размещено на том же сервере, что и ваше основное веб-приложение, или это сторонний сервер?
Ответ №1:
Итак, я просматривал свой код и думаю, что нет способа решить мою проблему. Я думаю, что в будущем я мог бы переделать свой код, однако пока я оставлю его таким, какой он есть. Спасибо всем, кто потратил время на изучение или изучение моей проблемы.