本文介绍了如何通过灯箱显示YouTube视频？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好，
我正在开发一个网站。我用手风琴菜单的jquery框架。这是我第一次使用jquery。所以，我是jquery的新人。
问题在于;我在网上搜索并发现非常有用的东西灯箱来显示视频，图像等。但是当我将代码应用到我的项目时（是的，我尝试了大约10多种方式）他们没有解决我的问题。没有灯箱，只需将用户定向到新标签页，然后在新标签页中打开youtube即可。
用户想要通过文本框搜索的另一件事（我的意思是自动完成）。但是，这也行不通。我想，有冲突但是在哪里，如何以及为什么？
正如我之前提到的，我使用了很多选项。最后一个是那个; []
来源代码：
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:
<!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"> [email protected]</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.
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.
推荐答案
这篇关于如何通过灯箱显示YouTube视频？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！