www.webdeveloper.com
Results 1 to 2 of 2

Thread: php and lytebox question

  1. #1
    Join Date
    Oct 2009
    Posts
    67

    php and lytebox question

    Hi, i have this nice script that reads a CSV, it does a pagination, that is coded like this:

    PHP Code:
    <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:

    PHP Code:
    <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 :-(

  2. #2
    Join Date
    Oct 2009
    Posts
    67
    Here is the original script and link to the website.

    PHP Code:
    <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,www.dirkwitte.nl,wwww.dirkwitte.com" />
    <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('http://www.dwmusicstore.com/images/background_top.gif');
    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="http://www.statcounter.com/counter/counter.js"></script><noscript><div
    class="statcounter"><a title="blogger visitor"
    href="http://www.statcounter.com/blogger/"
    target="_blank"><img class="statcounter"
    src="http://c.statcounter.com/4267393/0/90426186/1/"
    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="http://maps.google.nl/maps?q=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="http://maps.google.nl/maps/ms?hl=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: 660px; 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_reportingE_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>

    http://www.dwmusicstore.com/mark

    if you press the downleft cube, the lightbox pops up.

    You can see that it only has 3 pages but when you click inside the lightbox on the next or previous it has more pages

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles