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.
Related
Please, if someone have idea how to do it...
I have created blog where are many post. Each of the post having 'like', 'not like' and 'comments' (as on the many websites of posts).
When I click on 'like'(is in html part inside of element form) of one of the post by the form element I submit POST. Then in php of the same file I increase value of 'like' in database. This value is by echo shown in the proper post updated from database.
The trouble is by doing this update I am not returning to place of increased 'like'. How to go back where I submit POST?
I have seen for example in Instagram when I click 'like' there is no move from the place, staying on the same one where click was made.
Thanks a lot for let me know...
<?php
$conn = mysqli_connect("localhost", "root", "", "amoscaguias_db");
if(!$conn) {
echo "<h3>No connection to database</h3>";
}
if(isset($_POST['increase-btn'])) {
$post_id = $_POST['post_id'];
$value = 0;
$stmt= $conn->prepare("SELECT very_like FROM blog_data WHERE id=? LIMIT 1");
$stmt->bind_param('i', $post_id);
$stmt->execute();
$result = $stmt->get_result();
$row = $result->fetch_assoc();
$result_1 = $row['very_like'];
$result_1 = $result_1 + 1;
$stmt1 = $conn->prepare("UPDATE blog_data SET very_like=$result_1 WHERE id=$post_id");
$stmt1->execute();
header("Location: index.php");
exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>blog_php_mysql</title>
</head>
<body>
<div class="row">
<?php foreach($query as $q) { ?>
<div class="col-12 post">
<div class="card post-card mt-5">
<img class="card-img-top img-thumbnail post-card-image" src="imgs/<?php if(!empty($q['image'])) { echo $q['image']; } ?>" alt="<?php if(!empty($q['image'])) { echo $q['image']; } ?>">
<div class="card-body post-card-body">
<h5 class="card-title"><?php echo $q['title']; ?></h5>
<hr class="mx-auto">
<p class="card-text"><?php echo $q['content']; ?></p>
<hr class="mx-auto">
<div class="row ">
<div class="col-3 post-footer">
<form action="index.php" method="POST">
<button type="submit" id="increase" class="increase_btn" name="increase-btn"><i class="bi bi-hand-thumbs-up"></i></button>
<input type="hidden" name="post_id" value="<?php echo $q['id']; ?>" />
</form>
<span><?php echo $q['very_like'] ?></span>
<form action="index.php" method="POST">
<button type="submit" id="decrease" class="decrease_btn" name="decrease-btn"><i class="bi bi-hand-thumbs-down"></i></button>
<input type="hidden" name="post_id" value="<?php echo $q['id']; ?>" />
</form>
<span><?php echo $q['dont_like'] ?></span>
Comments
</div>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
</script>
<script src="js/myscript.js"></script>
</body>
</html>
There are several ways to do it:
Common and pretty way: Make an XHR request via javascript to the separate action (endpoint) on the backend, where you will extract data from the POST array, update the value in the database and return response in JSON format, which you can parse easily and set a new value. Also, sometimes there is the approach to increment likes via javascript before the backend will send an acknowledgment about the successful update - it's because likes are not so much important data.
Less common and a bit ugly way: you may add an anchor link on each post.
When you hit the 'like' button, you should send additional data, which includes the way to get this anchor link on the backend. After the backend successfully updates the value, you should redirect to the previous page with an anchor point to the liked post, so you will "return to the same place", because the browser will automatically scroll the page to the block with that anchor.
I'm making a website for my school and my website is like a laptop store and the main thing in my webpage is a product filter. I have made the product filter, it works great, but the problem is that I added shortcuts that send you to a single product page by clicking one of the products in the product filter. You can click on a product when you just came in the website and haven't messed with the product filter and it sends you to the single product page, but once you search for something using the filter the filtrated product cant be clicked on and you have to refresh the page to select your product. This is happening, because when you come in the website, you see index.php, but once you use the product filter, you are seeing action.php.
here is a part of my code from index.php:
<?php
$sql="SELECT * FROM Laptop";
$result=$conn->query($sql);
if ($result-> num_rows > 0) {
while($row=$result->fetch_assoc()){
$Laptop_ID = $row['Laptop_ID'];
?>
<?php echo "<a href='single_laptop.php?Laptop=" . $Laptop_ID ."'>" ?>
<div class="col-md-3 mb-2" style="color: blue">
<div class="card-deck">
<div class="card boarder-secondary">
<div class="card-img-overlay">
<h6 class="text-light bg-success text-center rounded p-1">
<?= $row['Nosaukums']; ?></h6>
</div>
<br>
<img src="<?= $row['Bilde']; ?>" class="card-img-top">
<div class="card-body">
<p>
Procesors : <?= $row['Procesors']; ?><br>
Videokarte : <?= $row['Videokarte']; ?><br>
RAM : <?= $row['RAM']; ?><br>
</p>
</div>
</div>
</div>
</div>
<?php }
}else {
echo "nav rezultātu";
}?>
</div>
</div>
</div>
And here is my action.php:
<?php
require 'dataB.php';
if(isset($_POST['action'])){
$sql = "SELECT * FROM Laptop WHERE Modelis !=''";
if(isset($_POST['Modelis'])){
$Modelis = implode("','", $_POST['Modelis']);
$sql .="AND Modelis IN('".$Modelis."')";
}
if(isset($_POST['Tips'])){
$Tips = implode("','", $_POST['Tips']);
$sql .="AND Tips IN('".$Tips."')";
}
if(isset($_POST['RAM'])){
$RAM = implode("','", $_POST['RAM']);
$sql .="AND RAM IN('".$RAM."')";
}
if(isset($_POST['Procesors'])){
$Procesors = implode("','", $_POST['Procesors']);
$sql .="AND Procesors IN('".$Procesors."')";
}
if(isset($_POST['Videokarte'])){
$Videokarte = implode("','", $_POST['Videokarte']);
$sql .="AND Videokarte IN('".$Videokarte."')";
}
$result = $conn->query($sql);
$output='';
if($result->num_rows>0){
while($row=$result->fetch_assoc()){
$output .='
<div class="col-md-3 mb-2" style="color: blue">
<div class="card-deck">
<div class="card boarder-secondary">
<div class="card-img-overlay">
<h6 class="text-light bg-success text-center rounded p-1">
'.$row['Nosaukums'].'</h6>
</div>
<br>
<img src="'.$row['Bilde'].'" class="card-img-top">
<div class="card-body">
<p>
Procesors : '.$row['Procesors'].'<br>
Videokarte : '.$row['Videokarte'].'<br>
RAM : '.$row['RAM'].'<br>
</p>
</div>
</div>
</div>
</div>';
}
} else {
$output = "<h3>No Products Found!<h3>";
}
echo $output;
}
?>
I need to figure out how to properly put the code from index.php, where it makes it possible to redirect me to single.laptop.php, to action.php, so I can redirect to single_laptop.php with no problems using the product filter.
$(document).keydown(function(e){
var keycode=e.keyCode;
if (keycode == 27)
{
$("#change").trigger('click');
}
});
$("#change").click(function() {
//do what you need
if($("#radio:checked").length==0)
{
alert("abc");
return false;
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
Press ESC
</body>
</html>
I am running a localhost website using Flask and python. I have some php files that I want to run when the users click a button. Problem is that Flask isn't recognizing the PHP file as PHP code and the code is showing up as text on the webpage. It's showing the text of all the echo statements, but the words in those statements correspond to variable in the code that allow the user to login and logout of the website. What do I do?
Python Code:
#app.route('/example.php')
def phpexample():
return render_template('example.php')
This shows a html page with text resulting from the echo statements.
The PHP code (example.php):
<?php
require ('steamauth/steamauth.php');
?>
<html>
<head>
<title>Eliminate Phishers! Join Steap now</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-wide.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body>
<!-- Header -->
<div id="header">
<span class="logo icon fa-paper-plane-o"></span>
<h1>Welcome. This is Steap</h1>
<p>A website designed to help eliminate phishers
<br />
and hackers on Steam.</p>
</div>
<!-- Main -->
<div id="main">
<header class="major container small">
<h3>
<?php
if(!isset($_SESSION['steamid'])) {
echo "welcome guest! <br />\n please login ";
steamlogin(); //login button
} else {
include ('steamauth/userInfo.php');
$url = $steamprofile['profileurl'];
if ($steamprofile['personastate'] == 0) {
$state = '<span style="color:#616161";>(Offline)</span>';
$picture = '<span style="color:#616161";><img src="'.$steamprofile['avatarfull'].'" title = "" alt = ""></span>';
} else if ($steamprofile['personastate'] == 1) {
$state = '<span style="color:#006EFF";>(Online)</span>';
$picture = '<span style="border: 10px dotted #006EFF;"><img src="'.$steamprofile['avatarfull'].'" title = "" alt = ""></span>';
} else if ($steamprofile['personastate'] == 2) {
$state = '<span style="color:#006EFF";>(Busy)</span>';
$picture = '<span style="border-color:#006EFF border-style: solid";><img src="'.$steamprofile['avatarfull'].'" title = "" alt = ""></span>';
} else if ($steamprofile['personastate'] == 3) {
$state = '<span style="color:#006EFF";>(Away)</span>';
$picture = '<span style="border-color:#006EFF border-style: solid";><img src="'.$steamprofile['avatarfull'].'" title = "" alt = ""></span>';
} else if ($steamprofile['personastate'] == 4) {
$state = '<span style="color:#006EFF";>(Snooze)</span>';
$picture = '<span style="border-color:#006EFF border-style: solid";><img src="'.$steamprofile['avatarfull'].'" title = "" alt = ""></span>';
} else if ($steamprofile['personastate'] == 5) {
$state = '<span style="color:#006EFF";>(Looking to Trade)</span>';
$picture = '<span style="border-color:#006EFF border-style: solid";><img src="'.$steamprofile['avatarfull'].'" title = "" alt = ""></span>';
} else if ($steamprofile['personastate'] == 6) {
$state = '<span style="color:#006EFF";>(Looking to Play)</span>';
$picture = '<span style="border-color:#006EFF border-style: solid";><img src="'.$steamprofile['avatarfull'].'" title = "" alt = ""></span>';
}
//Protected content
echo "Welcome back" . "</br> </br>" . $picture ."</br>". $steamprofile['personaname'] . "</br>" .$state . "</br>". "Steam ID: ". $steamprofile['steamid'] . "</br>";
echo 'Steam Profile' . "</br> </br>" . "<form action=\"steamauth/logout.php\" method=\"post\"><input value=\"Logout\" type=\"submit\" /></form>"; // Display their avatar!
}
?>
</h3>
</header>
<footer class="major container small">
<ul class="actions">
<li>Get Phishers</li>
</ul>
</footer>
</div>
<!-- Footer -->
<div id="footer">
<div class="container small">
<header class="major last">
<h2>Questions or comments?</h2>
</header>
<p>Program not working? Not detecting the phishers properly? <br \> Send us a message. We'll be sure to back to you as soon as possible.</p>
<form method="post" action="#">
<div class="row collapse-at-2">
<div class="6u">
<input type="text" name="name" placeholder="Name" />
</div>
<div class="6u">
<input type="email" name="email" placeholder="Email" />
</div>
</div>
<div class="row">
<div class="12u">
<textarea name="message" placeholder="Message" rows="6"></textarea>
</div>
</div>
<div class="row">
<div class="12u">
<ul class="actions">
<li><input type="submit" value="Send Message" /></li>
</ul>
</div>
</div>
</form>
<ul class="icons">
<li><span class="label">Twitter</span></li>
<li><span class="label">Facebook</span></li>
<li><span class="label">Instagram</span></li>
<li><span class="label">Github</span></li>
<li><span class="label">Dribbble</span></li>
</ul>
<ul class="copyright">
<li>© Steap 2014 All rights reserved.</li><li>Design: HTML5 UP</li>
</ul>
</div>
</div>
</body>
</html>
Maybe you should run php server (such as Apache or another) on other port (such as 8080) and when you call any php file, make request from your flask server to php server. And result getting from php server show with flask server. I hope, you can find the way how to send request from flask to other server.
render_template() isn't support PHP.
You can use subprocess to run PHP script:
import subprocess as sp
#app.route('/example.php')
def phpexample():
out = sp.run(["php", "example.php"], stdout=sp.PIPE)
return out.stdout
Flask is not compatible with php. So it can't read php code.
Have you considered using JQuery Ajax?
Here's an example:
You have a file called get_name.php witch contains:
<?php echo "Hello, my name is John"; ?>
Using Jquery ajax function I call the get_name.php
$.ajax({
url : 'get_name.php',
success : function(data) {
console.log(data);
}
});
The output in the console would be:
Hello, my name is John
So, with the returned data you can do whatever you want.
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.
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>