I'm trying to construct a table on the right of the page where I pull out all the videos from the server. I want the users to click a row in the table and it starts to play a video in flowplayer on the left of the page. The video url is something I pull out of the DB.
<?php
for($i=0;$i<$num_videos;$i++)
{
?>
<tr onclick="DoNav('<?php echo $result_videos[$i]["video_url"]; ?>');">
<td>
...
Here's the javascript:
function DoNav(theUrl)
{
flowplayer("player", "flowplayer/flowplayer-3.2.7.swf", document.location.href = theUrl);
}
For whatever reason I can't seem to get flowplayer to work with this div:
<div id="player"><img src="recordings/landscape.jpg" width="320" height="240" /></div>
It will only prompt you to open or save the video instead of playing in the current window. If anyone knows this issue here that would be appreciated. At any rate, I know I can get flowplayer working with a href like so:
<a
href="url"
style="display:block;width:320px;height:240px;"
id="player"><img src="recordings/landscape.jpg" width="320" height="240" />
</a>
But I don't want to put the href in the table as I want that splash image included as well. Any ideas?
Edited to improve clarity.
When the function flowplayer("player", "flowplayer/flowplayer-3.2.7.swf", document.location.href = theUrl); Was called the document.location.href was being evluated and caused the browser to go to the theUrl which prompted for file to be downloaded.
Furthermore we found there is some sort of issue updating a with the as a child DOM object. This was solved by moving the image to the background of the using the inline CSS.
JS Code:
function DoNav(theUrl)
{
flowplayer("player", "flowplayer/flowplayer-3.2.7.swf", theUrl);
}
HTML table:
<div id="player" style="display:block;width:320px;height:240px;background-image:url(recordings/landscape.jpg)"></div>
PHP stayed the same.
Related
i am using the latest version of wordpress , i have around 10000 post right now on my website.
i have a nice plugin that makes my website looks a bit more fancey but i need to ad a simple code to each featured image and each embeded youtube video i have in my posts (if i could pick user who add it too that would be perfect ! ) to get it to work
i know that youtube embed code is
<iframe width="560" height="315" src="//www.youtube.com/embed/NrH9CqnzzRU?list=PLHPcpp4e3JVpXbtgyD-k-nCmwpbbMIHOh" frameborder="0" allowfullscreen></iframe>
what i need to do is to add
<div class="featuredvideo"><iframe width="560" height="315" src="//xxxxxxxxxxxxxxxxxxxxxxxxx" frameborder="0" allowfullscreen></iframe></div>
so i want to add those things before and and after "XXXX" s
i am not a programer so please give me the code
i know that AJAX can search entire folder with code like
<button>AJAX</button>
<br>
<div id = "container"></div>
<script type="text/javascript">
$("button").click(function(){
$.get("sample.html",function(data){
$("#container").html(data);
})
});
which will just get html from a file but that is now what i want to do here.
please help me , give me a plugin or a code to work with
thank you
To wrap the Youtube iframes with the div as required, just use this...
$(function() {
$("iframe[src*=www.youtube.com]").wrap("<div class=\"featuredvideo\" />");
});
That will run when the document has finished loading. It will find all iframes with the string www.youtube.com in the src attribute and wrap them in the required div.
Obviously, if you add any more iframes to the page later and it doesn't reload then you'll need to run that code again. If you did just that then it would wrap the iframes in the div again, which would be wrong. This will handle running the code multiple times...
function wrapYoutubeEmbeds() {
$("iframe[src*=www.youtube.com]").each(function() {
if (!$(this).parent().hasClass("featuredvideo")) {
$(this).wrap("<div class=\"featuredvideo\" />");
}
});
}
$(function() {
wrapYoutubeEmbeds();
});
It simply checks to see if each iframe is inside something with the class featuredvideo and ignores it if it is.
I'm doing a photo gallery for my site and I wanted to have all my added photos in database. I did everything good. Database responses with the "custom link" .. I mean for example that my photo has src like something.php?id=25 .. what I want is to open this image in fancybox (I already have fancybox installed on webpage, it shows normal-src-images well), but I'm not so good in js, etc. So I don't really know what should I do...
Basicly, the problem is that everytime I want to open the image, browser shows me image in his actual src, not in fancybox.
I did this, but It doesn't work:
<script type="text/javascript">
$(document).ready(function() {
$(".selector").fancybox({
'type' : 'image'
});
});
</script>
I found this script content -- $(".selector").fancybox({'type' : 'image'}); -- on the official web page of fancybox (they said it would help when I'm trying to open images from custom links), but It just doesn't work or I inserted it bad. I don't really know what I'm doing in js or jquery or what it is... can you guys help me with it ?
Here is a part of the source code from my gallery.php where I want fancybox to work (all scripts for fancybox are set good):
<div class="images">
<?php
include_once('actions/db_connection.php');
$query = "SELECT * FROM gallery";
$response = mysql_query($query, $connection)
if(!$response)
{
mysql_error();
}
else
{
while($qs = mysql_fetch_array($response))
{
echo '<a class="fancybox" rel="group" href="actions/download_large.php?image_ID='.$qs['image_ID'].'">
<img class="gallery" alt="image" src="actions/download_small.php?image_ID='.$qs['image_ID'].'"></a>';
}
}
?>
</div>
As I told my php "script" is showing my images good, so I think I just need some script to tell the fancybox how to open a link, but If you see something bad in code I'm opened for suggestions. Thank you so much. (Sorry for my english, hope you understand).. I'm running fancybox 2.
Can you try this,
$(".fancybox").fancybox({'type' : 'image'});
instead of
$(".selector").fancybox({'type' : 'image'});
I have a link that recieves a dyanamic image via php, and when you click it, it opens the image in a new window. It looks like this:
Click Here
I want to open the image on a page called red.php, and inside a div with the id=green.
From the sending page I'm thinking of something like this:
Click Here
On red.php the code would possibly be something like this:
<?php
$picture = $_GET['IMAGE_FULL_URL'];
echo ".$picture"
?>
I'm sure I have something wrong above, and I don't know where to begin to add the div id to the url, or if I can simply place the php code inside the div. Can someone please show me the code so this will work? Thanks.
here is an example:
your initial HTML:
Click Here
your Red.php:
<div id="green">
<img src="<?php echo urldecode($_GET['pic']); ?>" alt="" />
</div>
I have a page where in the top middle there is a large youtube player. Below it there are a bunch of youtube thumbnails which are clickable. Clicking them changes the player video to the thumbnail that was clicked. The youtube ID is passed thru the URL.
I wanted to change the shade of the thumbnail background so that the active ("clicked") thumbnail was shaded.
The following code generates the linked thumbnails:
while ($row = mysql_fetch_array($result)) {
$tubeID = $row['videoinfo'];
echo
'<div class="vid"><img src="http://img.youtube.com/vi/' . $tubeID . '/0.jpg" width="225" height="175"/></div>';
}
And the following code uses the clicked thumbnail to display the video:
<iframe id="player" width="640" height="385" src="http://www.youtube.com/embed/<?php echo $_GET['id'] ?>" frameborder="0"></iframe>
I know I need to compare the thumbnail URL to the current URL and if they match and set an ID to that thumbnail which can be assigned properties in CSS... though I'm not sure how to do so. Can someone help?
edit : this sorta explain what BZ suggested.
I kicked out some php to make the answer more concise. Don't forget to add it back.
<div class="vid">
<a href="videos.php?id=$tubeID" id="m+$tubeID" onclick="changeVid(this);return false;">
<img src="http://img.youtube.com/vi/01/0.jpg" width="225" height="175"/>
</a>
</div>
<script type="text/javascript>
function changeVid(obj) {
document.getElementById('player').src = "videos.php?id="+ substr(obj.id,1)
document.getElementById(obj.id).style.visibility='visible'; //or other style
document.getElementById(obj.id).setAttribute("class", newClass); //For Most Browsers
document.getElementById(obj.id).setAttribute("className", newClass); //For IE; harmless to other browsers.
}
</script>
of course, I'd be a lot easier with a JS framework... (ie jquery)
Basically, when you click a link, the function is called, when it's done, return false; disable the page loading (ignoring the href).
The function will change the iframe source and then will add some custom styling to the link you clicked to load the new video.
I've thrown a "m" in the link ID, because id can't start with numbers...
edit : my function changeVid lack some reset function to remove the old thumbnail active state (easy way to solve it : remove the active state from all thumbnail then put the active state on the clicked thumbnail.)
In each link you could put an onclick attribute to do some javascript that would do the highlighting.
So I have found this code here
This basically lets me pull some data from a php file and place it into a div using jQuery. So everything from the tutorial works fine, but because I am thinking of putting together about 9-10 different links via that code, I thought I put all the function code in a js file and just call the function in html. Just to clarify, I have very minimal understanding of javascript, though I've experience with php.
In a new js file called links.js, I have put 2 different functions which I would like to call from my html
function getshow1() {
$('#sidebar').load('show1.php');
}
function getshow2() {
$('#sidebar').load('show2.php');
}
then in my html, I src the links.js and for 2 images, I've put this,
<img src="image1.jpg" />
<img src="image2.jpg" />
and of course #sidebar doesn't display anything. How could I format the js file so I can just use the above html code to link different php files?
also, if there is a better way of pulling html code from a external file into a div, do let me know!
Thanks!
html:
<img src="image1.jpg" />
<img src="image2.jpg" />
jQuery:
$(document).ready(function(){
$('#show1').click(function(){
$('#sidebar').load('show1.php');
});
$('#show2').click(function(){
$('#sidebar').load('show2.php');
});
});
edit: added document ready function