How to Play dynamic video into flowlayer - php

Here is my :
<?php
if($total_count > 0)
{
while($val =$objDB->get_row($rs_member))
{
// $flowplayer = "player".$val['video_id'];
$VideoPath = "uploadedvideo/video/".$val['video'];
?>
<div style="border:#FF0000;">
<div id="video1">
<a href="<?=$VideoPath?>"
style="display:block;width:425px;height:300px;"
id="player">
</a>
<!-- this will install flowplayer inside previous A- tag. -->
<script>
flowplayer("player", "flowplayer-3.2.5.swf", {
clip: {
// these two configuration variables does the trick
url: '<?=$VideoPath?>',
autoPlay: false,
autoBuffering: true // <- do not place a comma here
}
});
</script>
</div>
</div>
<?php
}
}
?>
Instead of this I need to play all video file in a single page serially..how to do this..please help

How about creating an array of all the videos you want to play and then add them to a playlist, like so:
<?php
if($total_count > 0)
{
$Videos = array();
while($val =$objDB->get_row($rs_member))
{
// $flowplayer = "player".$val['video_id'];
$Videos[] = "uploadedvideo/video/".$val['video'];
}
$VideoPlaylist = "'" . implode("', '", $Videos) . "'"; // will look something like : 'vid1.fla', 'vid2.fla'
?>
<div style="border:#FF0000;">
<div id="video1">
<a
style="display:block;width:425px;height:300px;"
id="player">
</a>
<!-- this will install flowplayer inside previous A- tag. -->
<script>
flowplayer("player", "flowplayer-3.2.5.swf", {
clip: {
// these two configuration variables does the trick
autoPlay: false,
autoBuffering: true // <- do not place a comma here
},
playlist: [<?php echo $VideoPlaylist; ?>]
});
</script>
</div>
</div>
<?php
}
?>

Related

How to change the colour of an SVG when at the start/end of slick slider

Sorry if the title sucks, I didn't really know how to word it...
How would I change the colour of the svg arrows if I'm at the start of the slides or at the end of the slides? Maybe I could add class if value equals 0? not sure how to approach adding a class if there are no slides remaining?
The Image below is what I'm trying to achieve.. atm I have two white arrows on both sides. I want to change the colour to that grey when at the start (on the left) and if I'm at the end (on the right).
$(".image_carousel-wrapper").each(function () {
var _this = $(this);
var $status = _this.find('.slide-number');
var $slickElement = _this.find('.image_carousel');
$slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
//currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
if (!slick.$dots) {
return;
}
var i = (currentSlide ? currentSlide : 0) + 1;
$status.text(i + '/' + (slick.$dots[0].children.length));
});
var _this = $(this);
_this.find('.image_carousel').slick({
arrows: true,
dots: true,
pauseOnHover: false,
pauseOnFocus: false,
autoplay: false,
swipeToSlide: true,
fade: true,
draggable: true,
prevArrow: _this.find('.prev-slide'),
nextArrow: _this.find('.next-slide'),
});
});
<div class="image_carousel-wrapper">
<div class="image_carousel">
<?php foreach( $images as $image ): ?>
<div class="slide">
<img class="full-width <?php if($module_alignment == 'left') : ?>left-image<?php endif; ?>" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>">
<?php if( get_sub_field('artists_impression') ): ?>
<p class="artistimp ">Artist Impression</p>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
<div class="slider-directions">
<div class="arrow-wrap">
<div class="prev-slide"></div>
<div class="next-slide"></div>
</div>
<div class="slide-number"></div>
</div>
</div>
Add infinite: false to the carousel options to disable infinite looping.
If you want to further tweak the look of the disabled nav item, you can target .slick-disabled

Autoscroll to bottom then scroll manipulation

Hi I'm doing a chat script that I've gotten somewhere that needs quite modifications. The function I need to achieve is after successful loading of user to chat with the view should go to bottom directly. I have done things which failed on several occasions, it does automate to bottom but when I tried scrolling the content it still goes back to bottom which should not happen.
This is what I have so far.
<?php
$ctr = 0;
if (is_array($buddies)) {
foreach ($buddies as $buddy) {
?>
<span style="float: right;"><?php echo $buddy->unreadMsgCtr; ?></span>
<b><?php echo humanize($buddy->fullName) ?></b> <br />
<?php
++$ctr;
}
}
?>
<script type="text/javascript">
$(document).ready(function() {
<?php for ($ctrjs = 0; $ctrjs < $ctr; $ctrjs++) {?>
$('#friend' + <?php echo $ctrjs; ?>).live('click', function() {
$('#buddies').hide();
var chattingWith = $(this).attr('chattingID');
startrefresh();
$('#chatroom').show();
$('#chatmessage').html('<img src="<?php echo site_url('/images/ajax-loader.gif');?>" width="16" height="16" />');
$.post("<?php echo site_url('chats/chatbuddy');?>",{
username: $("#friend"+<?php echo $ctrjs; ?>).html(),
recipientID: chattingWith
});
});
<?php } ?>
});
</script>
//chats.php when a particular buddy has been clicked.
<script type="text/javascript">
var autoScrollEnabled = true;
$(document).ready(function() {
toggleAutoScroll();
if(autoScrollEnabled == true) {
$(".messages").animate({ scrollTop: $('.messages')[0].scrollHeight}, 1000);
//return false;
toggleAutoScroll();
}
function toggleAutoScroll() {
autoScrollEnabled = !autoScrollEnabled; //! reverses the value, true becomes false, false becomes true
if (autoScrollEnabled == true) { //scroll down immediately if a.s. is reenabled
$(".messages").animate({ scrollTop: $('.messages')[0].scrollHeight}, 9999999999);
}
}
$('#closechat').live('click', function() {
$('#chatroom').hide();
//scrolled = 0;
stoprefresh();
});
});
</script>
<div class="headerchat" style="width: 217px;"><div class="buddycontainer"> Chatting</div>
<div class="closecontainer">✖ </div>
<br class="breaker" />
</div>
<?php
if (is_array($chat)) {
foreach ($chat as $item){ ?>
<div class="conversation" style="width: 215px;">
<b><span class="username"><?php echo $item['username']; ?></span></b>
<span class="gray" style="float: right;" title="<?php echo date('M d, Y g:i A', $item['time']);?>"> <?php echo date('g:i A', $item['time']);?></span>
<br /><?php echo $item['message']; ?>
</div>
<?php } ?>
<?php }?>
BTW here is the jsfiddle I don't understand it's working properly in jsfiddle. http://jsfiddle.net/STQnH/3/
I'm not sure if I am heading on the right track. I just want to achieve that. Thank you guys.
Try wrapping your code in:
$(document).ready(function(){ //your code here
});
or
$( window ).load(function() {//your code here
});
If it works in jsFiddle but not on the live site this is likely what's missing. jsFiddle adds it for you. You can change this option in the drop down menu indicated by my freehand circle.
jQuery faq for $(document).ready()

Jquery Tools Overlay: php foreach loop not working

I put Jquery Tools's Overlay in my site to show a projects' info in several overlays. This works pretty ok, but I have been trying to 'automate' the code to read new projects and load them in overlays. What happen looks ok, but no matter which project I click, the overlays allways load the content of the first project...
I did a lot of googling around and copy-pasting to get this far, I am not (yet) much of a programmer, I hope the code doesn't scare you guys.. ;-)
Anyway, here's a link: http://www.wgwd.nl/test
If you click 'Projects' a normal div opens that loads all the projects it finds (two, for now). When you click one it opens that content in 3 overlays. As said, unfortunately it allways loads the same content independent of which project you click.
I have tried to assign the JScript a unique function name (generated with php from the project's filename) but that doesn't seem to work.
Any ideas? here's my code :
<?
//reads projectfolder and distills
//a basename out of the project description.txt
$textfiles = glob('content/projects/*.txt', GLOB_BRACE);
foreach ($textfiles as $textfile) { ?>
<div id="details"> <?
$pad = pathinfo ($textfile);
$base_name = basename($textfile,'.'.$pad['extension']);
// the link that opens the overlays. Don't think the "id" tag is nescessary
echo '<a id="'.$base_name.'" href="#" onclick="'.$base_name.'()"><img src="'.$base_name.'/main.jpg"/></a>' ?>
<!-- defines overlay, hidden by default -->
<div id="dragwindow1" class="overlay ol1">
<a class="close"></a>
<?
include ('content/projects/'.$base_name.'/content.txt');
?>
</div>
</div>
<?
// the description of each project
include ($textfile);
?>
<script>
// within the foreach open all overlays with function name $base_name
var <?=$base_name?> = function () {
$("a[rel]").each(function() {
$(this).overlay().load();
});
}
</script>
<hr />
<? } //end foreach ?>
</div>
<!-- somehow, without defining these links, the whole 'open all overlay' thing doesn't work -->
<a rel="div.overlay:eq(0)" type="button" style="display: none">first</an>
<a rel="div.overlay:eq(1)" type="button" style="display: none">second</a>
<a rel="div.overlay:eq(2)" type="button" style="display: none">third</a>
<script type="text/javascript">
$(function projects() {
// positions for each overlay
var positions = [
[120, '15%'], //uppper left, #1
[70, '60%'], // lower left, #2
['60%', '40%'], // lower right, #3
];
// setup triggers
$("a[rel]").each(function(i) {
$(this).overlay({
// common configuration for each overlay
oneInstance: false,
// setup custom finish position
top: positions[i][0],
left: positions[i][1],
});
});
});
</script>
Thx in advance!
EDIT: I edited the code to omit all that's unrelated
The question remains: Javascript only returns the content of the first call in the foreach loop. Is there anyway to generate multiple instances of the javascript for each loop in the PHP?
SOLVED! With big, big, help of a friend, who redefined how multiple Overlays from Jquery Tools could work (and should have worked in the first place...)
Without getting too much into it, here's the code for future reference:
Basically the trick is:
// open all overlays
function openAll(currentOverlays) {
$(currentOverlays).each(function()
{
$(this).overlay().load();
});
}
The complete page is now something like this:
<script type="text/javascript">
$(function () {
// positions for each overlay
var positions = [
['60%', 540], // lower right, #3
[80, '65%'], // lower left, #2
[120, '12%'], //uppper right, #1
];
// setup triggers
$("div.overlay").each(function(i) {
$(this).overlay({
// some configuration for each overlay
// positioning the overlays
top: positions[i % 3][0],
left: positions[i % 3][1]
});
});
});
// open all overlays
function openAll(currentOverlays) {
$(currentOverlays).each(function()
{
$(this).overlay().load();
});
}
// close all overlays
function closeAll(currentOverlays) {
$(currentOverlays).each(function()
{
$(this).overlay().close();
});
}
</script>
<div id="projectstarter">
<h2>Projects</h2>
<div class="maindetails">
<a class="close"></a> <!-- defines a close button for the overlay -->
<?
$textfiles = glob('content/projects/*.txt', GLOB_BRACE);
rsort($textfiles);
foreach ($textfiles as $textfile) {
$pad = pathinfo ($textfile);
$base_name = basename($textfile,'.'.$pad['extension']);
echo '<a href="#" onclick="openAll(\'div.'.$base_name.'\')">';
echo '<img src="./content/projects/'.$base_name.'/projectimage.jpg" class="thumb"/></a></div>';
include '$textfile'; //project description
} // end MAIN foreach ?>
</div>
</div>
<div id="projects">
<?
foreach ($textfiles as $textfile) {
$pad = pathinfo ($textfile);
$base_name = basename($textfile,'.'.$pad['extension']); ?>
<div id="dragwindow3" class="<?=$base_name?> overlay ol3">
<a class="close"></a>
<h2>Media</h2>
<div class="details">
// include media here
</div>
</div>
<div id="dragwindow2" class="<?=$base_name?> overlay ol2">
<a class="close"></a>
<h2>Credits</h2>
<div class="details">
// include credits here
</div>
</div>
<div id="dragwindow1" class="<?=$base_name?> overlay ol1 ">
<a class="close"></a>
<h2>Content</h2>
<div class="details">
// include content here
</div>
</div>
<? } ?>
<script>
$( "#projectstarter" ).overlay();
$( "#projectstarter" ).draggable().resizable({ghost: true});
$( ".ol1" ).draggable().resizable({ghost: true});
$( ".ol2" ).draggable().resizable({ghost: true});
$( ".ol3" ).draggable().resizable({ghost: true});
</script>

post in jquery do not update element

EDIT WITH NEW JAVASCRIPT
I am trying to make a "I like this" kinda function but I have a small problem.
I am using this small javascript
function coolIt(designid) {
$.post('cool.php', {designid:designid}, function(data) {
//alert(data);
$('#cool_'+designid).text(data);
});
}
And this HTML where the "Like" button is
<span class="like"><span id="cool_'.$row["id"].'">('. $row["cools"] .')</span></span>
The cool.php runs through this:
function UpdateCool($design_id) {
$fields_up = array("cools" => 'cools + 1');
$fields_down = array("cools" => 'cools - 1');
$sql = SQLHandling::updateSQL('tdic_designs', 'id = '. $design_id .'', $fields_up);
SQLHandling::SQLquery($sql);
}
and that works perfectly. It updates the cools field with one increasing value.
When I run alert(data) on the javascript it returns nothing and the #cool_1 span element disappears.
Any idea what I might do wrong?
HTML OUTPUT:
<script type="text/javascript">
function coolIt(designid) {
$.post('cool.php', {designid:designid}, function(data) {
alert(data);
$('#cool_'+designid).text(data);
});
}
</script>
</head>
<body>
<div id="allContainer">
<div id="topArea">
<div id="topNaviArea">
<ul id="navi">
<li class="home">Home</li>
<li class="categories">Categories</li>
<li class="about">About</li>
<li class="faq">FAQ</li>
<li class="submit">Submit</li>
<li class="contact">Contact</li>
</ul>
</div>
</div>
<div id="contentBox">
<div id="login">Login // Register</div> <div id="mainContent">
<h1>// Home // Categories // HTML / CSS</h1>
<div id="catMenu">
<ul>
<li>3D</li><li>Graphic</li><li>HTML / CSS</li><li>Paintings</li><li>Photography</li><li>Portals</li><li>Webshops</li>
</ul>
<h2>1 designs<br />in this category</h2>
</div>
<div id="rightContentBox">
<ul id="displays">
<li class="displayWindow"><div class="dpwImage"><figure><img src="/testen/designs/thatdesigniscool.jpg" width="280" height="175" alt="That Design Is Cool" target="_blank"></figure></div><div class="dpwBox"><div class="dpwLeft"><span class="title">That Design Is Cool</span><span class="comments">Comments (1)</span></div><div class="dpwRight"><span class="like"><span id="cool_1">(29)</span></span></div></div> </li>
</ul>
</div>
</div>
</div>
</div>
I guess you are replacing the whole contents of div with just the server response. Why don't you append?
$('.likeIt').livequery("click",function(e){
var designid = $(this).attr('id').replace('design_id-','');
$.post('cool.php?design_id='+designid, {}, function(response){
$('#cool_'+designid).html($('#cool_'+designid).html() + response); // See if this works!
});
});
See if this helps! :)
I got it solved by editing cool.php to the following:
<?php
session_start();
ini_set("display_errors", 1);
define("INCLUDE_DIR", "includes/classes");
/* Autoload classes when used */
function __autoload($class_name) { include(INCLUDE_DIR.'/class.'. strtolower($class_name) . '.php'); }
SQLHandling::SQLconnect();
if($_POST["designid"] != '') {
$alreadyExist = mysql_num_rows(mysql_query('SELECT id FROM tdic_voted WHERE designid="'.(int)$_POST['designid'].'" AND ip="'.$_SERVER['REMOTE_ADDR'].'"'));
if($alreadyExist == 0) {
mysql_query(' UPDATE tdic_designs SET cools = cools+1 WHERE id="'.(int)$_POST['designid'].'"');
$num = mysql_fetch_row(mysql_query(' SELECT cools FROM tdic_designs WHERE id="'.(int)$_POST['designid'].'" LIMIT 1'));
echo $num[0];
mysql_query(' INSERT INTO tdic_voted (designid, ip) VALUES ("'.(int)$_POST['designid'].'","'.$_SERVER['REMOTE_ADDR'].'")');
} else{
echo 'You already think this is a cool design!';
}
}
?>

Jquery qtip ajax issue

I am trying to post the value of an input box (In this case a imdb link) to my imdbgrabber.php page and have it return the info of that movie into a qtip box.
EDIT: View here http://movieo.no-ip.org/ Hover the images and you will see the error.
Everything works fine until i try and post the variable to the imdbgrabber page. This is the code.
Javascript:
var link = $("#link").val();
var imdbLink = 'link='+ link;
$(".moviebox").qtip({
style: { name: 'cream' },
content: {
method: 'GET',
data: imdbLink,
url: '/includes/imdbgrabber.php',
text: '<img class="throbber" src="/images/loading.gif" alt="Loading..." />'
},
position: {
corner: {
target: 'bottomright',
tooltip: 'bottomleft'
}
}
});
HTML:
<!--start moviebox-->
<div class="moviebox">
<a href="#">
<img src="http://1.bp.blogspot.com/_mySxtRcQIag/S6deHcoChaI/AAAAAAAAObc/Z1Xg3aB_wkU/s200/rising_sun.jpg" />
<form method="get" action="">
<input type="text" name="link" id="link" style="display:none" value="http://www.imdb.com/title/tt0367882"/>
</form>
</a>
</div>
<!--end moviebox-->
and finally the php:
<?php
$url=$_GET['link'];
//$url = 'http://www.imdb.com/title/tt0367882/';
//get the page content
$imdb_content = get_data($url);
//parse for product name
$name = get_match('/<title>(.*)<\/title>/isU',$imdb_content);
$director = strip_tags(get_match('/<h5[^>]*>Director:<\/h5>(.*)<\/div>/isU',$imdb_content));
$plot = get_match('/<h5[^>]*>Plot:<\/h5>(.*)<\/div>/isU',$imdb_content);
$release_date = get_match('/<h5[^>]*>Release Date:<\/h5>(.*)<\/div>/isU',$imdb_content);
$mpaa = get_match('/<a href="\/mpaa">MPAA<\/a>:<\/h5>(.*)<\/div>/isU',$imdb_content);
$run_time = get_match('/Runtime:<\/h5>(.*)<\/div>/isU',$imdb_content);
$rating = get_match('/<div class="starbar-meta">(.*)<\/div>/isU',$imdb_content);
////build content
//$content = '<h2>Film</h2><p>'.$name.'</p>'
// . '<h2>Director</h2><p>'.$director.'</p>'
// . '<h2>Plot</h2><p>'.substr($plot,0,strpos($plot,'<a')).'</p>'
// . '<h2>Release Date</h2><p>'.substr($release_date,0,strpos($release_date,'<a')).'</p>'
// . '<h2>MPAA</h2><p>'.$mpaa.'</p>'
// . '<h2>Run Time</h2><p>'.$run_time.'</p>'
// . '<h2>Full Details</h2><p>'.$url.'</p>';
//gets the match content
function get_match($regex,$content)
{
preg_match($regex,$content,$matches);
return $matches[1];
}
//gets the data from a URL
function get_data($url)
{
$ch = curl_init();
$timeout = 5;
curl_setopt($ch,CURLOPT_URL,$url);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout);
$data = curl_exec($ch);
curl_close($ch);
return $data;
}
?>
<!--start infobox-->
<div class="info">
<span>
<?php echo '<strong>'.$name.'</strong>' ?>
</span>
<img src="http://1.bp.blogspot.com/_mySxtRcQIag/S6deHcoChaI/AAAAAAAAObc/Z1Xg3aB_wkU/s200/rising_sun.jpg" />
<div class="plot">
<?php echo ''.substr($plot,0,strpos($plot,'<a')).'</div>' ?>
</div>
<div class="runtime">
<?php echo'<strong>Run Time</strong><br />'.$run_time.'</div>' ?>
</div>
<div class="releasedate">
<?php echo '<strong>Release Date</strong><br />'.substr($release_date,0,strpos($release_date,'<a')).'</div>' ?>
</div>
<div class="director">
<?php echo '<strong>Director</strong><br />'.$director.'' ?>
</div>
<div class="rating">
<?php echo '<strong>Rating</strong><br />'.$rating.'' ?>
</div>
</div>
<!--end infobox-->
I am sure it is a simple mistake somewhere but after hours of looking i thought i would ask the experts.
According to the documentation, the data for qtip when fetching via AJAX needs to be key-value pairs. Try this:
var link = $("#link").val();
var imdbLink = { "link" : link }; // note change to data...
$(".moviebox").qtip({
style: { name: 'cream' },
content: {
method: 'GET',
data: imdbLink, // you could make this { "link" : link }
url: '/includes/imdbgrabber.php',
text: '<img class="throbber" src="/images/loading.gif" alt="Loading..." />'
},
position: {
corner: {
target: 'bottomright',
tooltip: 'bottomleft'
}
}
});
Also it appears that your get_match routine is improperly indexing into the matches array. Arrays are zero-based, so the first match is the match at index 0, not one. In fact, you can only ever have a single match given your regular expressions since you only have one grouping expression.
Try changing it to this:
//gets the match content
function get_match($regex,$content)
{
preg_match($regex,$content,$matches);
return $matches[0];
}

Categories