Click here to Skip to main content
15,844,155 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello everyone,

I am developing a web site. I used jquery framework for accordion menu. That was the first time using jquery for me. So, I am new at jquery.

The problem is that; I searched on the web and found very usefull thing "lightbox" to display videos, images and etc. However when I apply the codes to my project (yeah, I tried approximately 10+ ways)they don't solve my problem. No lightbox, just directs the user to a new tab and opens youtube in new tab.

One more thing user want to search via textbox(I mean autocomplete). However, this is also not working. I guess, there is a conflict but where, how and why ?

As I mentioned before, I have used many options. The last one is that; http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/[^]

SOURCE CODES:
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" />
    <!-- PrettyPhoto CSS FİLE -->
    <link href="css/prettyPhoto.css" rel="stylesheet" type="text/css" />
    <link href="themes/css/prettyPhoto.css" rel="stylesheet" type="text/css" />
    <!-- Located in the related folder and referenced to the code -->
    <!-- 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">
        <!--HERE İS MY LİGHTBOX CONTENT-->
        <a href="http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel="prettyPhoto" title=""><img src="images/thumbnails/flash-logo.jpg" alt="YouTube" width="60" /></a>       
        <!--FINISHS HERE-->
        <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>
    <!--I rezipped the  prettyphoto3.1.5 and located the js files in my project's js folder-->
    <script src="themes/js/jquery.prettyPhoto.js"></script>
    <script src="themes/js/jquery-1.3.2.min.js"></script>
    <script src="themes/js/jquery-1.4.4.min.js"></script>
    <script src="themes/js/jquery-1.6.1.min.js"></script>
    <script src="themes/js/jquery-1.8.3.min.js"></script>
    <!-- And giving reference them.FINISHS HERE-->



</html>


I shared my source codes and what I wanted to do?

I can't resolve this problem for 2 weeks...

Thank you, have a nice day.
Posted

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