Click here to Skip to main content
15,867,956 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I am developing a website. I have downloaded a bootstrap template. However I completely change it for my business. Basically, I am repeating topics. You can think as a blog.

I am trying to develop a user friendly interface. Everything is OK. However, I am working on lightbox for 10 days. I have tried too much solution from google. No solution.

Let me add an image to define my problem better.
[Image]

I tried accordion menu and it worked. Before 10 days, I thought that user shouldn't go outside (youtube) to watch the video. I searched and found light box. But that does not work for my code.
I am adding left side html+php codes. I have database and it works fine. I am in trouble just for that lightbox
HTML
<div id="solbolge">

 <section class="accordionMod">
    <div class= "yardimbaslik">
    <h2 title = "A-K Arasındaki yardım konuları"> Yardım Konuları <span>[A-K]</span></h2>
    </div>
    <?php
   $sql =mysql_query("SELECT * FROM problemler WHERE baslik LIKE 'A%' OR baslik LIKE 'B%' OR baslik LIKE 'C%' OR baslik LIKE 'Ç%' OR baslik LIKE 'D%' OR baslik LIKE 'E%' OR baslik LIKE 'F%' OR baslik LIKE 'G%'OR baslik LIKE 'Ğ%' OR baslik LIKE 'H%' OR baslik LIKE 'I%' OR baslik LIKE 'İ%' OR baslik LIKE 'J%' OR baslik LIKE 'K%' ORDER BY baslik ASC") or die("SORGU HATASI");
    while ($row = mysql_fetch_array($sql)) {
        $baslik = $row['baslik'];
        $icerik = $row['icerik'];
        $youtube_link = $row['youtube_link'];
        $pdf_link = $row['pdf_link'];
        $download_link = $row['download_link'];
        $oy_orani = $row ['oy_orani'];
   ?>
     <div>
        <h3 class="accordion-toggle"><?echo $baslik?><a href=<?php echo $download_link ?>><img src = "themes/images/indir.png"></a><a href=<?php echo $pdf_link ?>><img src = "themes/images/pdf.png"></a><a href=<?php echo $youtube_link ?>><img src = "themes/images/youtube.png"></a></h3>
        <section class="accordion-inner">
           <p><?php echo $icerik?></p>

    </div>
    <?php
}
?>
</div>


I am new at web programming. Trying to develop myself. But that problem finished me. 10 days and no solution. Please help me.

whole code:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
    <title>Zirve Bilgisayar Yardım Sayfası</title>
    <link href="css/stil.css" rel="stylesheet" type="text/css" />
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link id="callCss" rel="stylesheet" href="themes/current/bootstrap.min.css" type="text/css" media="screen"/>
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <link href="css/font-awesome.css" rel="stylesheet" type="text/css">
    <link href="css/base.css" rel="stylesheet" type="text/css">
    <style type="text/css"> 

.accordion-group {border-radius:0; border-none; margin:1px 0 0 0;}
.accordionMod .accordion-heading {background-color:#6CCB17; border-radius:0;height: 40px;}
.accordionMod .accordion-heading .accordion-toggle img{ float:right; height:25px; width:25px;}
.accordionMod .accordion-heading .accordion-toggle {margin:0; font-size:14px; line-height:normal; padding:7px 30px; position:relative;height: 40px;}
.accordionMod .accordion-heading .accordion-toggle .icon {background:url('http://dl.dropbox.com/u/1681897/img/glyphicons-halflings.png') no-repeat 0 -96px; display:block; width:14px; height:14px; position:absolute; left:0px; top:7px;}
.accordionMod .accordion-heading .accordion-toggle .iconActive {background:url('http://dl.dropbox.com/u/1681897/img/glyphicons-halflings-white.png') no-repeat -24px -96px;}
.accordionMod .accordion-heading .current {background-color:; color:#fff;}
.accordionMod .accordion-inner {background-color:red; padding-left:40px; border-top:0; margin:0;}
</style>
<?php
mysql_connect('localhost','root','25612327')or die("Sorgu hatasi:");
mysql_select_db('destekzirvedb')or die("Veritabanı hatasi: ");
mysql_query("SET NAMES 'utf8'  ");
mysql_query("SET CHARACTER SET utf8");
mysql_query("SET COLLATION_CONNECTION = 'utf8_turkish_ci' ");
?>
</head>
<body>

    <div class="anagovde">
        <div class="icgovde">
            <div class="header">
              
                <div>
                    <img style ="border: 10px solid gray;" src="images/logo.jpg" />
                </div>
                <div class="satirmenu">
                    <center><h2 style = "padding-removed10px;">Size Nasıl Yardımcı Olabiliriz ?</h2><input class ="search_text" type= "text" name ="tag" id = "tag"style="font-family: 'comic Sans MS'; font-size: large; font-weight: bold"title="Bu kutuya yazarak yardım konularına erişebilirsiniz" /><img src = "images/kb.png"></center>
                </div>
            </div>
            <div class="govde">
                <div id="solbolge">
                 
 <section class="accordionMod">
    <div class= "yardimbaslik">
    <h2 title = "A-K Arasındaki yardım konuları"> Yardım Konuları <span>[A-K]</span></h2>
    </div>
    <?php
   $sql =mysql_query("SELECT * FROM problemler WHERE baslik LIKE 'A%' OR baslik LIKE 'B%' OR baslik LIKE 'C%' OR baslik LIKE 'Ç%' OR baslik LIKE 'D%' OR baslik LIKE 'E%' OR baslik LIKE 'F%' OR baslik LIKE 'G%'OR baslik LIKE 'Ğ%' OR baslik LIKE 'H%' OR baslik LIKE 'I%' OR baslik LIKE 'İ%' OR baslik LIKE 'J%' OR baslik LIKE 'K%' ORDER BY baslik ASC") or die("SORGU HATASI");
    while ($row = mysql_fetch_array($sql)) {
        $baslik = $row['baslik'];
        $icerik = $row['icerik'];
        $youtube_link = $row['youtube_link'];
        $pdf_link = $row['pdf_link'];
        $download_link = $row['download_link'];
        $oy_orani = $row ['oy_orani'];
   ?>
     <div>
        <h3 class="accordion-toggle"><?echo $baslik?><a href=<?php echo $download_link ?>><img src = "themes/images/indir.png"></a><a href=<?php echo $pdf_link ?>><img src = "themes/images/pdf.png"></a><a href=<?php echo $youtube_link ?>><img src = "themes/images/youtube.png"></a></h3>
        <section class="accordion-inner">
           <p><?php echo $icerik?></p>

    </div>  
    <?php
}
?>
</div>
 <div id="sagbolge">

 <section class="accordionMod">
    <div class= "yardimbaslik">
    <h2 title ="L-Z Arasındaki yardım konuları"> Yardım Konuları <span>[L-Z]</span></h2>
    </div>
    <?php
    $sql =mysql_query("SELECT * FROM problemler WHERE baslik LIKE 'L%' OR baslik LIKE 'M%' OR baslik LIKE 'N%' OR baslik LIKE 'O%' OR baslik LIKE 'Ö%' OR baslik LIKE 'P%' OR baslik LIKE 'Q%' OR baslik LIKE 'R%'OR baslik LIKE 'S%' OR baslik LIKE 'Ş%' OR baslik LIKE 'T%' OR baslik LIKE 'U%' OR baslik LIKE 'Ü%' OR baslik LIKE 'V%' OR baslik LIKE 'Y%' OR baslik LIKE 'Z%' ORDER BY baslik ASC") or die("SORGU HATASI");
    while ($row = mysql_fetch_array($sql)) {
        $baslik = $row['baslik'];
        $icerik = $row['icerik'];
        $youtube_link = $row['youtube_link'];
        $pdf_link = $row['pdf_link'];
        $download_link = $row['download_link'];
        $oy_orani = $row ['oy_orani'];
   ?>
     <div>
        <h3 class="accordion-toggle"><?echo $baslik?><a href=<?php echo $youtube_link ?> class="lightbox"><img src = "images/indir.png"><a href ="http://www.youtube.com"><img src= "images/youtube.png"> <a href ="http://www.google.com"><img src= "images/pdf.png"></a></h3>
        <section class="accordion-inner">
           <p><?php echo $icerik?></p>
       
    </div>  
    <?php
}
?>
</section>

</div>
            </div>
            <div class="footer">
            <div class="email">
           <p><img  style = "height: 16px; width:10px;"src ="images/tabrepeat.png"> Email:<span class ="yardim_link"> yardim@icrapro.com</span></p>
             <p><img  style = "height: 16px; width:10px;"src ="images/tabrepeat.png"> Web: <a href="http://www.zirve-bilgisayar.com" title="Web Adresimiz"><span class ="yardim_link">Zirve Bilgisayar</span></a></p>
            </div>
               <div class="kopirayt">
            <h4 style = "color:red;">© 2013, Zirve Bilgisayar. Tüm Hakları Saklıdır. </h4>
            </div>
               <div class="sosyal">
        <a href="https://www.facebook.com/ZirveBilgisayarLtd.Sti"><img style ="heiht:40px;width:40px;" src ="images/facebook.png"></a> 
        <a href="http://www.youtube.com/user/zirveicrapro"><img style ="heiht:40px;width:40px;" src ="images/youtube.png"></a> 
        <a href="https://twitter.com/icrapro"><img style ="heiht:40px;width:40px;" src ="images/twitter.png"></a> 
        <a href="https://twitter.com/davapro1"><img style ="heiht:40px;width:40px;" src ="images/twitter.png"></a> 
        <a href="http://www.zirve-bilgisayar.com"><img style ="heiht:40px;width:40px;" src ="images/zirve.png"></a>      
            </div>
        </div>
    </div>

</body>
   <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    <script src="themes/js/jquery-1.8.3.min.js"></script>
    <script src="themes/js/bootstrap.min.js"></script>
    <script src="themes/js/bootstrap-tooltip.js"></script>
    <script src="themes/js/bootstrap-popover.js"></script>
    <script src="themes/js/business_ltd_1.0.js"></script>
    <script src="themes/js/accordion.js"></script>
</html>
Posted
v3
Comments
Check the FireBug console tab of FireFox, if you see any errors or not?
FoxRoot 12-Aug-13 10:35am    
No errors. It's just waiting. I tried to add a autocomplete from database stil same. It is just waiting. I am copying the codes(ie autocomplete or lightbox), work outside the project.

Namely, when I moved the related files into the project folder either acordion menu or lightbox(and for now autocomplete) does not work.

That made me crazy.

Thank you for your consideration.
FoxRoot 12-Aug-13 10:41am    
http://m1308.hizliresim.com/1d/d/rdm5j.jpg that is what I am actually talking about.
Akinmade Bond 25-Sep-13 12:46pm    
I can't see where you referenced lightbox.js in your code. Are you sure you referenced it?
FoxRoot 28-Sep-13 7:58am    
Thanks Akinmade, I am not sure, I have referenced it.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900