How to display youtube videos via lightbox ?

Question

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 12-Aug-13 21:08pm

FoxRoot

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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