I'm working on a project where I have audio, video and picture files in different directories and want to write a simple web interface for those. I got everything working pretty good so far, pictures are displayed by lightbox, audio and video are played by jPlayer.
I have a directory stucture like this
ARCHIVE/
_RES/
CSS/
JPLAYER/
LIGHTBOX/
index.php #this is the start page with links to the other index.php files
VIDEO/
PICTURES/
ALBUM1/
IMG/
T_IMG/
index.php
ALBUM2/
IMG
T_IMG/
index.php
ALBUMn/
IMG/
T_IMG/
index.php
AUDIO
ALBUM1
index.php
OGG/
SONG#1.ogg
SONG#n.ogg
SONG FUN. ogg
MP3/
SONG#1.mp3
SONG#n.mp3
SONG FUN.mp3
My Problem now is, when I want to change something, for example, in the audio player, I have to edit every index.php in every ALBUMx/ directory inside AUDIO.
I'm sure there is a much simpler way: instead of have many index.php files, just having one index.php file, and when I click on link, AUDIO -> ALBUM1 it automatically loads a .html document that shows the audio player and fills the playlist with the audio files from the Album I choose.
This is example code for my AUDIO ALBUM index.php.
The ones for Pictures and Video look similar, except for having different player option e.g. for video or, in case of pictures, in has a lightbox implemented.
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<link href="/archive/_res/style.css" rel="stylesheet" />
<?php
$parent = dirname(dirname($_SERVER['SCRIPT_NAME'])) . '/';
$dirname = basename(__DIR__);
echo '<title>'.$parent.$dirname.' </title>';
?>
<link href='http://fonts.googleapis.com/css?family=Raleway:100,400' rel='stylesheet' type='text/css'>
<!-- JPLAYER AUDIO VIDEO -->
<!--link type="text/css" href="../../_res/jplayer/skin/pink.flag/jplayer.pink.flag.css" rel="stylesheet" /-->
<link type="text/css" href="../../_res/jplayer/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="../../_res/jplayer/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="../../_res/jplayer/jplayer.playlist.min.js"></script>
<?php
$mp3folder = 'mp3/';
$oggfolder = 'ogg/';
$filetype = '*.*';
$mp3files = glob($mp3folder.'*.mp3');
$oggfiles = glob($oggfolder.'*.ogg');
echo '
<script type="text/javascript">
$(document).ready(function(){
new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
}, [';
for ($i=0; $i<count($mp3files); $i++) {
$namerr[$i] = substr($oggfiles[$i],strlen($oggfolder),strpos($oggfiles[$i], '.')-strlen($oggfolder));
echo '{'."\n";
echo 'title:"'.$namerr[$i].'",'."\n";
echo 'mp3:"'.dirname($mp3files[$i]).'/'.rawurlencode(basename($mp3files[$i])).'",'."\n";
echo 'ogg:"'.dirname($oggfiles[$i]).'/'.rawurlencode(basename($oggfiles[$i])).'",'."\n";
echo 'free: "true"'.','."\n";
echo 'poster:"'.$mp3folder.'cover.png",'."\n";
echo '},'."\n";
}
echo '
], {
swfPath: "../../_res/jplayer",
supplied: "ogg, mp3",
wmode: "window",
size: {
width: "300px",
height: "300px",
cssClass: "jp-video-240p"
},
smoothPlayBar: true,
keyEnabled: true
});
});
</script>';
?>
<!-- JPLAYER AUDIO VIDEO //-->
<script>
function bottop (div_id) {
$('#'+div_id).animate({top:"-=140"},500, 'swing');
}
function topbot (div_id) {
$('#'+div_id).animate({top:"+=140"},500, 'swing');
}
function fade_in (div_id) {
$('#'+div_id).fadeIn(0);
}
function fade_out (div_id) {
$('#'+div_id).fadeOut(0);
}
</script>
</head>
<body>
<div id="shownav" class="shnav">
<span class="thinl4 db" onclick="topbot('topper');fade_out('shownav');">Show Navigation bar!</span>
</div>
<div id="topper">
<div id="hidenav" class="shnav">
<span class="thinl4 db" onclick="bottop('topper');fade_in('shownav');">Hide Navigation bar!</span>
</div>
<div id="backtoarchive" class="fl thinl">
<table id="keks">
<tr>
<td class="bif"><</td>
<td id="bli">Back to Archive</td>
</tr>
</table>
</div>
<?php include '/var/www/webaccount/html/archive/_res/nav.php'; ?>
<?php
$parent = dirname(dirname($_SERVER['SCRIPT_NAME'])) . '/';
$dirname = basename(__DIR__);
echo '<div id="where" class="fl">';
echo 'You are here: <em>'.$parent.$dirname.'</em>';
echo '</div>';
?>
</div>
<div id="jplayer-wrap">
<div id="jp_container_1" class="jp-video jp-video-270p">
<div class="jp-type-playlist">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div class="jp-gui">
<div class="jp-video-play">
play
</div>
<div class="jp-interface">
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<!-- added style below to fix floating issue (default was clear:both by css) -- not important to code function -->
<div class="jp-controls-holder" style="clear:left;">
<ul class="jp-controls">
<li>previous</li>
<li>play</li>
<li>pause</li>
<li>next</li>
<li>stop</li>
<li>mute</li>
<li>unmute</li>
<li>max volume</li>
</ul>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<ul class="jp-toggles">
<li>full screen</li>
<li>restore screen</li>
<li>shuffle</li>
<li>shuffle off</li>
<li>repeat</li>
<li>repeat off</li>
</ul>
</div>
<div class="jp-title">
<ul>
<li></li>
</ul>
</div>
</div>
</div>
<div class="jp-playlist">
<ul>
<!-- The method Playlist.displayPlaylist() uses this unordered list -->
<li></li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your Flash plugin.
</div>
</div>
</div>
</div>
</body>
</html>
I guess I would have to make single "modules" that contain the jplayer/lightbox stuff and <?php include .. ?> those and have it load the correct files.
So when I click on a link for AUDIO -> ALBUM1 the html/php link should load something like
index.php?load=audio,files=audio/album1
If someone has a hint for me, it would be so great!!!
This is my first PHP Project and I'm keen to learn!
Thank you,
vincent.
Related
I have been working on this for so long now, I feel this is my last option, I have a slideshow on a html web page and they can essentially flick through all the way through to the end by scrolling. Essentially I want users to be able to go back to their dashboard and when they click to go back into the slideshow, to re-load the page they were on...
At the top of the page I have this:
<?php
if (!isset($_COOKIE['PageNo'])){
setcookie("PageNo", 1, time() + (86400 * 30), "/"); // 86400 = 1 day, so set the cookie for a month long period
}
?>
I am essentially saying set the cookie at 1 to begin with (the first page in the slideshow = 1, then above the next section I have the below:
<?php
if($_COOKIE['PageNo'] >= 2)
{
?>
<script>
window.location.replace("<?php echo "istudy_university.php#slide=".$_COOKIE['PageNo']; ?> ");
</script>
<?php
}
else
{
?>
<script>
window.location.replace("istudy_university.php#slide=1");
</script>
<?php
}
?>
Above each slide I have the below and just changing the slide=number:
<?php $_COOKIE['PageNo'] = 3; ?>
So I'm saying, if the cookie is more than or equal to 2, then go to the page no'x' else go to page 1. However all it keeps doing is bringing me back constantly to Page 1. Please help!! Am I setting the cookie wrong?
UPDATE: After sliding through some of the slides, the cookie should have changed to 5, however it's still 1?
UPDATED code showing the HTML for page:
<?php
session_start();
require "includes/dbh.inc.php";
?>
<?php
echo $_COOKIE['PageNo'];
//$_COOKIE['PageNo'] = 5; //Commented out, for testing
if (!isset($_COOKIE['PageNo'])){
setcookie("PageNo", 1, time() + (86400 * 30), "/"); // 86400 = 1 day, so set the cookie for a month long period
}
?>
<!doctype html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>iStudy University | Stress & Anxiety</title>
<link rel="stylesheet" type='text/css' media='all' href="webslides.css" rel="stylesheet">
<body>
<script src="static/js/webslides.js"></script>
<!-- BEGINNING OF SLIDES -->
<?php
if($_COOKIE['PageNo'] >= 2)
{
?>
<script>
window.location.replace("<?php echo "istudy_university.php#slide=".$_COOKIE['PageNo']; ?> ");
</script>
<?php
}
else
{
?>
<script>
window.location.replace("istudy_university.php#slide=1");
</script>
<?php
}
?>
<main role="main">
<article id="webslides">
<!-- SLIDE 1 -->
<section class="bg-apple aligncenter">
<span class="background dark" style="background-image: url('istudy_slides_images/abstract.jpg')"/></span>
<div class="wrap" id="slide=1">
<h1 class="text-landing">Stress & Anxiety</h1>
<br>
<br>
<br>
<hr id="hor-rule">
<h1 class="slides-logo">iStudy University <i class="fas fa-graduation-cap"></i></h1>
<h2 class="slogan">Designed by Students <br><span class="iv">IV</span> <br>Students</h2><br><br>
</div>
</section>
<!-- SLIDE 2 -->
<?php $_COOKIE['PageNo'] = 2; ?>
<section class="aligncenter">
<span class="background light" style="background-image: url('istudy_slides_images/mountain.jpg')"/></span>
<div class="wrap" id="slide=2">
<blockquote class="quote">
<p class>"No one can create negativity or stress within you. Only you can do that by virtue of how you process your world"</p>
<p><cite>Wayne Dyer</cite></p>
</blockquote>
</div>
</section>
<!-- SLIDE 3 -->
<?php $_COOKIE['PageNo'] = 3; ?>
<section class="bg-slide3">
<div class="wrap size-80" id="slide=3">
<h3 class="title stessAnx"><strong> Stress & Anxiety</strong></h3><br>
<p>Stress and anxiety are common experiences of students in higher education.<br>This module will introduce you to evidence based techniques for managing stress and anxiety based upon cognitive behavioural therapy (CBT).</p>
</section>
</div>
Include jQuery library in both dashboard and slides page.
Include Scrollify library in the slides page
In the dashboard page, add an id to the slide page navigation link, like:
<a id="home" href="#">Slides</a>
Modify the sections in your slides page as follows:
Add a unique ID and a common class name for all the sections.
Example:
<section class="slides aligncenter" id="b">
<span class="background light" style="background-image: url('istudy_slides_images/mountain.jpg')" /></span>
<div class="wrap" id="slide=2">
<blockquote class="quote">
<p class>"No one can create negativity or stress within you. Only you can do that by virtue of how you process your world"</p>
<p><cite>Wayne Dyer</cite></p>
</blockquote>
</div>
</section>
<!-- SLIDE 3 -->
<section class="slides bg-slide3" id="c">
<div class="wrap size-80" id="slide=3">
<h3 class="title stessAnx"><strong> Stress & Anxiety</strong></h3><br>
<p>Stress and anxiety are common experiences of students in higher education.<br>This module will introduce you to evidence based techniques for managing stress and anxiety based upon cognitive behavioural therapy (CBT).</p>
</section>
** The id for each section is given as 'b', 'c' etc.
** both section contains a common class name - 'slides'.
In the slides page, add the following JavaScript code in the footer.
$.scrollify({
section: ".slides", //Rename the class name with the common class name that you gave for the sections
after: function() {
localStorage.setItem('currentPage', $.scrollify.current()[0].id)
}
});
In the dashboard page, add the below JavaScript code to the footer at the end:
<script>
if(localStorage.getItem('currentPage') != ''){
var newUrl = 'scroll.html#'+localStorage.getItem('currentPage');
$("#home").attr("href", newUrl);
}
</script>
I have attempted to put my script into a page I have created but can't seem to get the script to work correctly. It is a paginate script which links to the "newsblocks" class. Where do I place the script to make it work?
<?php
/*
Template Name: [Newspage]
*/
get_header();?>
<div id="main" class="defaultContentWidth">
<div id="wrapper-row">
<div id="primary">
<div id="content">
<?php the_breadcrumb();?>
<h1 class="entry-title"><?php the_title();?></h1>
<?php if(have_posts()) :
while(have_posts()) : the_post();?>
<div class="newscont"><?php the_content();?></div>
<?php endwhile;
endif;?>
<script type="text/javascript" src="<?php bloginfo('template_directory');?>/javascript/jquery.pajinate.js"></script>
<div class="contnewslist">
<ul class="newsblocks">
<li>
<h2>NEWSLETTER 1</h2>
<i>November 01, 2014</i>
<p>This is the November edition of the newsletter for The Dry Cleaner App. Featuring in this newsletter is ...</p>
<input type="submit" value="Download" id="submit" class="newsdownload">
</li>
For Optimizing the performance of a webpage it's always recommended to put the Javascript file to your footer.
So load your script files in your footer file.
In wordpress you've a footer.php
Change
<script type="text/javascript" src="<?php bloginfo('template_directory');?>/javascript/jquery.pajinate.js"></script>
TO
<script type="text/javascript" src="<?php echo echo get_template_directory(); ?>/javascript/jquery.pajinate.js"></script>
try to add js with get_template_directory_uri()
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/javascript/jquery.pajinate.js"></script>
and add js to your theme footer.php or in same page footer or where you need
also i think typo here :- jquery.pajinate.js should be jquery.paginate.js
I'm thinking <?php bloginfo('template_directory');?> should be changed to <?php echo bloginfo('template_directory');?> but since you didn't gave us the definition of bloginfo() function we can't really do much..
I am using jquery.bxslider.js for sliding my images.
In my html code, I use like this:
<ul class="slide">
<li>
<a href="#">
<img src="../img/pic1.png" id="1" />
</a>
</li>
<li>
<a href="#">
<img src="../img/fish.png" id="2" />
</a>
</li>
<li>
<a href="#">
<img src="../img/dog.jpg" id="3" />
</a>
</li>
By default, I use this three images and then when user click next button, I want to get one more image from database,then I append it into with this ajax request to php file.
function load_image() {
var id=$("ul li img:last-child").attr("id");
var result=$.ajax({
type: "GET",
url: "getImage.php?id="+id,
dataType: "html",
success: function(data){
slider.destroySlider();//clear all old slider structure and then insert one more image in the list
$(".slide").append(data);
loadSlide(); // function to call to bxslider to generate slide
}
});
};
My problem, when I call function loadSlide() , the slider always reload and show the 1st image of the list.
But my purpose is not to reload slide, just show the next image when click on next button and while the slide go to next image, it should load one more image from DB to slider.
Any helps will be appreciated !!!
Best regards,
Sokly
You can use Callback API, for join in new image.
This is an easy way for you to get it done, assuming you want to slide the images by news category id, as implemented below.I simply query using the news category id. just embed your statement between the "bxslider" class. I Guess this help because i just implemented it on a site i am working on and it work fine. you can also fetch the title, or picture description along with the image slide, if you want.
<ul class="bxslider">
<?php
$slider_str="select * from news where newscatid=4";
$i=1;
$result=mysql_query($slider_str);
if(mysql_num_rows($result)>0)
{
while($row=mysql_fetch_assoc($result))
{
if($i%2==1 && $i!=1)
{
}
?>
<li> <div class="slideimagesize"><img src="<?php echo 'extras/'.$row['image'];?>"
width="200" height="150"/></div></li>
<?php
if($i%2==0)
{
}
$i++;
}
}
?>
</ul>
OR You can also achieve this by also using WOWSLIDER, below is the code
//Place this in between the head tag
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
//Closing Head tag
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<?php
$slider_str="select * from news where newscatid=4";
$i=1;
$result=mysql_query($slider_str);
if(mysql_num_rows($result)>0)
{
while($row=mysql_fetch_assoc($result))
{
if($i%2==1 && $i!=1)
{
}
?>
<li><div class="slideimagesize"><a href="news.php?newsid=<?php echo $row['newsid'];?>"><img src="<?php echo 'extras/'.$row['image'];?>" width="350" height="160" alt=" <?php echo $row['subject']; ?>" title="<?php echo $row['subject']; ?>"/>
</a>
</div></li><br>
<?php
if($i%2==0)
{
}
$i++;
}
}
?>
</ul>
</div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>
I need help please. I am developing an application using Jquery Mobile and PHP. I am retrieving data from a MySQL database. I was able to pull the data including images. I need the user to be able to click on any image and the image is enlarged. I used PHP to loop through the rows and create popup divisions for the images to popup. This is working perfectly on a laptop but on a mobile device, it is very slow and the popup images created are very large and much wider than the normal mobile web app width.
Please refer to the code below and thank you for your time:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="css/mystyle.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile.structure-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<section id="main" data-role="page" data-theme="a" data-add-back-btn="true">
<header data-role="header" data-position="fixed" data-id="theHeader">
<h1>Header Title</h1>
Go Back
</header>
<article data-role="content">
<?php
$con = mysql_connect('db','user','password');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("db");
$sql = "select * from table";
$result = mysql_query($sql);
$num_rows = mysql_num_rows($result);
$ii = 0;
while($row = mysql_fetch_array($result))
{
echo('<div class="ui-grid-a">');
echo('<div class="ui-block-a"><h6>'.$row['col1'].'</h6><h6>'.$row['col2'].'</h6><h6>'.$row['col3'].'</h6></div>');
echo('<img class="popphoto" src="http://..../images/' . $row["imageName"] .'" alt="' . $row["imageName"] .'" style="height: 180px; width:130px;">');
echo('<div data-role="popup" id="popup'.$ii.'" data-overlay-theme="a" data-theme="d" data-corners="false">Close<img class="popphoto" src="http://..../images/' . $row["imageName"] .'" style="max-height:512px;" alt="'.$row["imageName"].'"></div>');
echo('</div>');
echo('<hr />');
$ii++;
}
mysql_close($con);
?>
</article>
<footer data-role="footer" data-position="fixed" data-id="theFooter">
<h1>Footer</h1>
</footer>
</section>
</body>
So, you can have small pictures so when the user clics them they are enlarged without quitting the site in Jquery Mobile.
This is what i use, i hope it helps you.
<a href='#popupPic1' data-rel='popup' data-position-to='window' data-transition='fade'><img class='popphoto' src='./img/rest/$pic1' alt='' height='90' width='32%' style='max-width:200px;'></a>
<a href='#popupPic2' data-rel='popup' data-position-to='window' data-transition='fade'><img class='popphoto' src='./img/rest/NO_es.jpg' alt='' height='90' width='32%' style='max-width:200px;'></a>
<a href='#popupPic3' data-rel='popup' data-position-to='window' data-transition='fade'><img class='popphoto' src='./img/rest/NO_es.jpg' alt='' height='90' width='32%' style='max-width:200px;'></a>
<div data-role='popup' id='popupPic1' data-overlay-theme='a' data-theme='d' data-corners='false'>
<a href='#' data-rel='back' data-role='button' data-theme='a' data-icon='delete' data-iconpos='notext' class='ui-btn-right'>Close</a><img class='popphoto' src='./img/rest/$pic1' style='max-height:512px;' alt=''></div>
<div data-role='popup' id='popupPic2' data-overlay-theme='a' data-theme='d' data-corners='false'>
<a href='#' data-rel='back' data-role='button' data-theme='a' data-icon='delete' data-iconpos='notext' class='ui-btn-right'>Close</a><img class='popphoto' src='./img/rest/NO_es.jpg' style='max-height:512px;' alt=''></div>
<div data-role='popup' id='popupPic3' data-overlay-theme='a' data-theme='d' data-corners='false'>
<a href='#' data-rel='back' data-role='button' data-theme='a' data-icon='delete' data-iconpos='notext' class='ui-btn-right'>Close</a><img class='popphoto' src='./img/rest/NO_es.jpg' style='max-height:512px;' alt=''></div>
Obiously just fix the SRC from the IMG you want it to load.
If it helped you, give me Thumbs up.
Thanks
You could use pophoto class. This class is one of the standard popup element classes in jqm.
Perhaps the jquery mobile documention has more useful information which you can use for your project.
The below is my header: the following is my cookie in php
<header>
<div id="first">
<?php
if ($visits > 1)
{
echo "Thanks for coming back for more laughs!!!";
}
else
{
// First visit
echo 'Welcome to my website!';
}
?>
</div>
This is my h1, h2, images, a link, and another image
<h1>The Good Clean Jokes And Riddles Website!</h1>
<h2>Add & Search Jokes or Riddles</h2>
<div>
<img id ="funny" img src="images/funny.jpg" alt="funny"/>
<img id ="dog" img src="images/pet.jpg" alt="dog"/>
</div>
<div id="a">
<a href="?add" >Add New Joke or Riddle</a>
<img id="bell" img src="images/bell1-c.gif" alt="bell">
</div>
</header>
Older versions of IE do not apply CSS rules to elements they don't recognize.
This includes newer HTML5 elements like <header>.
You can use HTML5Shim or Modernizr to fix that.