Hi, i have this nice script that reads a CSV, it does a pagination, that is coded like this (this is only the html code for the previous and next page)
<script language="Javascript">
<!--
if (document.images)
{
image1 = new Image
image2 = new Image
image1.src = 'vorige1.jpg'
image2.src = 'vorige2.jpg'
image3 = new Image
image4 = new Image
image3.src = 'volgende1.jpg'
image4.src = 'volgende2.jpg'
}
-->
</script>
</head>
</body>
<center><a href="hollow.php?offset=-30" onMouseOver="document.mouseover.src=image2.src" onMouseOut="document.mouseover.src=image1.src"><img src="vorige1.jpg" border=0 name="mouseover"></a>
<a href="hollow.php?offset=30"
onMouseOver="document.mouseover2.src=image4.src" onMouseOut="document.mouseover2.src=image3.src"><img src="volgende1.jpg" border=0 name="mouseover2"></a>Also i have a alternate version of the lightbox, called Lytebox...which is actually very cool.
What i want to do is, and i hope i can explain it, is to use the pagination inside the lightbox.
I've tried it but the problem is that my scripts reads a CSV, inside there are products, the amount of these products change daily.
I read like 30 products on one page, and then the offset shows the next 30.
And this goes on and on, even when there are no more products it still goes to the next page, but that's ok.
What is not ok is that for the lytebox to work properly, i have to determine in front, how many pages i am going to make.
And it will end up like this:
<a rel="lyteframe[catalog]" href="hollow2.php" rev="width: 900px; height: 650px; scrolling: auto" target=_blank>
<a rel="lyteframe[catalog]" href="hollow2.php?offset=30" rev="width: 900px; height: 650px; scrolling: auto"</a>
<a rel="lyteframe[catalog]" href="hollow2.php?offset=60" rev="width: 900px; height: 650px; scrolling: auto" </a>
Is there a trick, because the lytebox looks inside the script if there are more <a rel="lyteframe[catalog]" entries, and if i press next, it goes to the next entry...so what i want/need/love is that i do not have to make these entries inside my script but that the lytebox automatically, when i press next, goes to the next offset
I hope i explained it correctly :-(
Here is the original script
<HTML>
<title>
Dirk Witte Muziekinstrumenten
</title>
<head>
<meta name="description" content="Dirk Witte Muziekinstrumenten" />
<meta name="keywords" content="gitaar,drums,toetsen,microfoons,speakers,monitoren,hoofdtelefoons,kabels,snaren,stokken,vellen,marshall,fender,roland,boss,LTD,ESP,taylor,gibson,epiphone,squier, gretsch,ibanez,line6,dirk,witte,muziek,muziekinstrumenten,dwmusicstore,(URL address blocked: See forum rules),w(URL address blocked: See forum rules)" />
<meta name="author" content="M.E.D." />
<meta name="google-site-verification" content="ww1z4tjoXkb-kCvqsxq2STkXyrlRMABIMazPcY2kBUw" />
<link rel="stylesheet" href="scripts/vlightbox.css" type="text/css" />
<style type="text/css">#vlightbox a#vlb{display:none}</style>
<link rel="stylesheet" href="scripts/visuallightbox.css" type="text/css" media="screen" />
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="scripts/lytebox.js"></script>
<link rel="stylesheet" href="scripts/lytebox.css" type="text/css" media="screen" />
<style type="text/css">
iframe {
overflow-x: hidden;
overflow-y: auto;
}
body
{
background-image:url('(URL address blocked: See forum rules));
background-repeat:repeat-x;
}
img {
margin: 0px;
padding: 0px;
}
img
{ border: none;
}
a {
margin: 0px;
padding: 0px;
}
</style>
</head>
<center>
<body link=#D5DF23 vlink=#D5DF23 alink=#D5DF23>
<!-- Start of StatCounter Code -->
<script type="text/javascript">
var sc_project=4267393;
var sc_invisible=1;
var sc_partition=46;
var sc_click_stat=1;
var sc_security="90426186";
</script>
<script type="text/javascript"
src="(URL address blocked: See forum rules)"></script><noscript><div
class="statcounter"><a title="blogger visitor"
href="(URL address blocked: See forum rules)"
target="_blank"><img class="statcounter"
src="(URL address blocked: See forum rules)"
alt="blogger visitor" ></a></div></noscript>
<!-- End of StatCounter Code -->
<TABLE width="950" height="900" align="center" bgcolor="#D5DF23" BORDER=3>
<td valign="top">
<table width="920" height="250" border="0" align="center" border=1 bgcolor="#D5DF23">
<TR>
<TD COLSPAN=3>
<center>
<a href="(URL address blocked: See forum rules)=Dirk+witte+amsterdam&hl=nl&cd=1&ei=cYA_S8yyH9agsgah7s2iAw&ie=UTF8&view=map&cid=16549634945791709695&iwloc=A&ved=0CBgQpQY&sa=X" target=_blank title="Locate Dirk Witte Amsterdam on a map"><img src="logo1.jpg" border="0"></a><a href="index.php" title="Home Again"><img src="logo2.jpg" border="0"></a><a href="(URL address blocked: See forum rules)=nl&source=hp&ie=UTF8&vps=1&jsv=196c&oe=UTF8&msa=0&msid=108039610706462014384.00047c33fffbe3d1a4666" target=_blank title="Locate Dirk Witte Utrecht on a map"><img src="logo3.jpg" border="0"></a>
<center><font face=helvetica><b><marquee>Welkom op de nieuwe website van Dirk Witte, wij wensen u veel plezier met het bekijken van ons assortiment.</marquee></b></font></TD>
</center>
</TD>
</TR>
<tr>
<Td width="300" height="435" background="left.jpg" align=top><center>
<iframe width="250" height="450" src="sidebar.php" name="left" frameborder="0" align=top scrolling="no" ></iframe></center></Td>
<td rowspan=3 width=700 height=700 background="mid.jpg" align=center>
<iframe width="300" height="680" src="midden.php" name="midden" frameborder="0"></iframe></center></td>
<Td width="300" height="435" background="right.jpg"><center>
<iframe width="250" height=70" src="searcher.php" name="left" frameborder="0" align=top scrolling="no"></iframe>
<iframe width="250" height="350" src="sidebar2.php" name="right" frameborder="0" scrolling="no" align=top></iframe></center></Td>
</TR>
<TR>
<TD height="150" bgcolor="#D5DF23"><a rel="lyteframe[catalog]" href="hollow2.php" rev="width: 900px; height: 650px; scrolling: auto" target=_blank><img src="below1.jpg" border=0 width=275 title="Klik hier voor foto's" ></TD>
<div id="vlightbox">
<TD height="150" bgcolor="#D5DF23"><p><a rel="lightbox_utr" href="images/ut/1.jpg" target=_blank><img src="below3.jpg" border=0 width=275 align=right HSPACE=10 title="Klik hier voor foto's" ></TD>
</TR>
</TABLE>
<?PHP
$offset = isset($_GET['offset'])?$_GET['offset']:0;
$LinesToDisplay = 20;
$row = $offset + $LinesToDisplay;
$row2 = $offset - $LinesToDisplay;
$file_handle = fopen("web.txt", "rb");
error_reporting( E_ALL ); // DEBUGGING
while ((($parts = fgetcsv($file_handle,4096,"|")) !== FALSE) && ($LinesToDisplay > 0) && (!feof($file_handle)))
{
//new code
//skip first $offset lines
$num = count($parts[5]);
if ($parts[5] == 4010)
{
if ($offset-- > 0)
{continue;}
$parts[0] = ucwords(strtolower($parts[0]));
$parts[1] = ucwords(strtolower($parts[1]));
$LinesToDisplay--;
}}
fclose($file_handle);
?>
<a rel="lyteframe[catalog]" href="hollow2.php?offset=<?php echo $row;?>" rev="width: 900px; height: 650px; scrolling: auto"</a>
<a rel="lyteframe[catalog]" href="hollow2.php?offset=<?php echo $row+$row;?>" rev="width: 900px; height: 650px; scrolling: auto" </a>
<a rel="lightbox_ams" href="images/am/2.jpg"></a>
<a rel="lightbox_ams" href="images/am/3.jpg"></a>
<a rel="lightbox_ams" href="images/am/4.jpg"></a>
<a rel="lightbox_ams" href="images/am/5.jpg"></a>
<a rel="lightbox_ams" href="images/am/6.jpg"></a>
<a rel="lightbox_ams" href="images/am/7.jpg"></a>
<a rel="lightbox_ams" href="images/am/8.jpg"></a>
<a rel="lightbox_ams" href="images/am/9.jpg"></a>
<a rel="lightbox_ams" href="images/am/a.jpg"></a>
<a rel="lightbox_ams" href="images/am/b.jpg"></a>
<a rel="lightbox_ams" href="images/am/c.jpg"></a>
<a rel="lightbox_ams" href="images/am/d.jpg"></a>
<a rel="lightbox_ams" href="images/am/e.jpg"></a>
<a rel="lightbox_ams" href="images/am/f.jpg"></a>
<a rel="lightbox_ams" href="images/am/g.jpg"></a>
<a rel="lightbox_ams" href="images/am/h.jpg"></a>
<a rel="lightbox_ams" href="images/am/i.jpg"></a>
<a rel="lightbox_utr" href="images/ut/2.jpg"></a>
<a rel="lightbox_utr" href="images/ut/3.jpg"></a>
<a rel="lightbox_utr" href="images/ut/4.jpg"></a>
<a rel="lightbox_utr" href="images/ut/5.jpg"></a>
<a rel="lightbox_utr" href="images/ut/6.jpg"></a>
<a rel="lightbox_utr" href="images/ut/7.jpg"></a>
<a rel="lightbox_utr" href="images/ut/8.jpg"></a>
<a rel="lightbox_utr" href="images/ut/9.jpg"></a>
<a rel="lightbox_utr" href="images/ut/a.jpg"></a>
<a rel="lightbox_utr" href="images/ut/b.jpg"></a>
<a rel="lightbox_utr" href="images/ut/c.jpg"></a>
<a rel="lightbox_utr" href="images/ut/d.jpg"></a>
<a rel="lightbox_utr" href="images/ut/e.jpg"></a>
<a rel="lightbox_utr" href="images/ut/f.jpg"></a>
<a rel="lightbox_utr" href="images/ut/g.jpg"></a>
<a rel="lightbox_utr" href="images/ut/h.jpg"></a>
<a rel="lightbox_utr" href="images/ut/i.jpg"></a>
<a rel="lightbox_utr" href="images/ut/j.jpg"></a>
<a rel="lightbox_utr" href="images/ut/k.jpg"></a>
<a rel="lightbox_utr" href="images/ut/l.jpg"></a>
<script src="scripts/visuallightbox.js" type="text/javascript"></script>
</div>