I have a combobox with filled info (filled by mysql_query) i want to add autocomplete.
$urun_bul="";
$sorgug = mysql_query("SELECT x FROM y order by z asc");
while( $yyy = mysql_fetch_array($sorgug))
{
$urun_bul.='<option value="'.$yyy["urun_id"].'">'.$yyy["urun_kodu"].' - '.$yyy["urun_adi"].'</option>';
}
Then prints $urun_bul
just try
click here
you will bind your option tag with mysql using this example...
OR
Example:
index.php file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="chosen.css">
<style type="text/css" media="all">
/* fix rtl for demo */
.chosen-rtl .chosen-drop { left: -9000px; }
</style>
</head>
<body>
<form>
<div id="container">
<div id="content">
<div class="side-by-side clearfix">
<?php mysql_connect("hostname","username","password"); mysql_select_db("database_name"); ?>
<div>
<em>Select option with DB using autocomplete</em>
<select data-placeholder="Choose a Country..." class="chosen-select" style="width:350px;" tabindex="2">
<option value=""></option>
<?php $sorgug = mysql_query("SELECT x FROM y order by z asc");
while( $yyy = mysql_fetch_array($sorgug)){
?>
<option value="<?php echo $yyy["urun_id"]; ?>"><?php echo $yyy["urun_kodu"].' - '.$yyy["urun_adi"]; ?></option>
<?php } ?>
</select>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="chosen.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var config = {
'.chosen-select' : {},
'.chosen-select-deselect' : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
'.chosen-select-width' : {width:"95%"}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
</script>
</form>
</body>
</html>
please copy chosen.css and chosen.jquery.js files from downloaded code from above link and past into your folder where your index.php file is locate.
Related
I created a table as company_list. This table consists of following fields
1)Company Name 2) Country 3) Vertical
So, lets assume there are 5 companies as following
Company Name: Water, Earth, Sun, Moon, Star
Countries: Water= UK, Earth=UK, Sun=Australia, Moon, =India, Star=Germany
Vertical:Water, Earth, Sun = WWF and Moon, Star=Social Welfare
First HTML is a select option to filter by
1st Country 2nd Vertical
So, if I chose UK country, vertical should auto select WWF (exclude AUS country company name)
Now, post this I have button to FETCH single COMPANY DETAILS first that matches the above condition.
Code, I have designed is not adding a filter and does fetch every company.
Kindly help with this.
1) index page
<?php
$conn = mysqli_connect("localhost","root","","accounts");
$sql = "SELECT * FROM company_list";
$res= mysqli_query($conn,$sql);
$res1=mysqli_query($conn,$sql);
?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
<!-- DataTables -->
<link rel="stylesheet" href="bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
<style media="screen">
.navbar-inverse {
background-color: #4a8cbb;
border-color: #4a8cbb;
}
#row1{
margin-left: 100px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<select class="form-control">
<?php while ($row=mysqli_fetch_array($res)):; ?>
<option value="">SELECT COUNTRY</option>
<option value=""><?php echo $row['country']; ?></option>
<?php endwhile; ?>
</select>
</div>
<div class="navbar-header" id="row1">
<select class="form-control">
<?php while ($row1=mysqli_fetch_array($res1)):; ?>
<option value="">SELECT VERTICAL</option>
<option value=""><?php echo $row1['vertical']; ?></option>
<?php endwhile; ?>
</select>
</div>
<div class="navbar-header" id="row1">
<button id="fetch_company" class="btn btn-success btn-lg btn-block btn-huge">FETCH COMPANY DETAILS</button>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-3">
Company Name:<span id="com_get_data"></span>
</div>
</div>
</body>
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var count = 0;
$("#fetch_company").click(function(){
//alert("Working");
count = count + 1;
$("#com_get_data").load("get_data.php",{countNew:count});
});
});
</script>
</html>
2)Get_data.php
<?php
$conn = mysqli_connect("localhost","root","","accounts");
$countNew = $_POST['countNew'];
$sql = "SELECT * FROM company_list LIMIT $countNew";
$res = mysqli_query($conn,$sql);
if (mysqli_num_rows($res) > 0) {
while ($row = mysqli_fetch_array($res)) {
echo $row['company_name'];
}
}
?>
Please check using $.ajax
Jquery Code
<script type="text/javascript">
$(document).ready(function(){
var count = 0;
$("#fetch_company").click(function(){
//alert("Working");
count = count + 1;
$.ajax({
type:"POST",
url: "get_data.php",
data:{countNew:count},
cache: false,
success: function(result){
$("#com_get_data").html(result);
}
});
});
});
</script>
Php Code
<?php
$conn = mysqli_connect("localhost","root","","accounts");
$countNew = $_POST['countNew'];
$sql = "SELECT * FROM company_list LIMIT $countNew";
$res = mysqli_query($conn,$sql);
if (mysqli_num_rows($res) > 0) {
while ($row = mysqli_fetch_array($res)) {
echo $row['company_name'];
}
}
else
{
echo 'No result found';
}
?>
Note: here you loop trough fetch data you need to add data in string array after that return data in JSON
Please check here for more details Click Here
In multi select dropdown Select all option should be displayed at last after displaying all other options...
Ex : Select All
Black
Red
What i want is
Ex : Black
Red
Select All
i am referring below link
https://github.com/davidstutz/bootstrap-multiselect
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<meta name='viewport' content='width=device-width'>
<link href="<?php echo base_url();?>assets/css/fonts.css" rel="stylesheet" type="text/css" />
<script src="<?php echo base_url();?>assets/js/anglr/library/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="<?php echo base_url();?>assets/css/bootstrap.min.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="<?php echo base_url();?>assets/css/bootstrap-multiselect.css"
rel="stylesheet" type="text/css" />
<script src="<?php echo base_url();?>assets/js/anglr/controller/bootstrap_multiselect.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#lstFruits').multiselect({
includeSelectAllOption: true,
selectedBottom:true
});
});
</script>
<script type="text/javascript">
var web_link2="<?php echo base_url();?>";
$(function () {
$('#btnSelected2').click(function () {
var selected = $("#lstFruits option:selected");
var message = "";
selected.each(function () {
message += $(this).val() + "\n";
});
var array_split=message.split(',');
var document_array = document.getElementById('selectedtoken').value;
window.location.href = web_link2+"campaign/confirm_unsubscribe/"+document_array+'-'+message;
});
});
</script>
</head>
<body>
<div class="subscribe-Container">
<header class="subscribe-Header">
<a class="link"><img src="<?php echo base_url();?>assets/images/opend-logo.png" class="logo-img" alt="Opend" title="Opend"></a>
</header>
<div class="subscribe-Content">
<h1>admin#opend.com</h1>
<?php if(!isset($msg)||$msg=='')
{
?>
<p>Please Confirm your unsubscribe request Opend by Clicking on "Unsubscribe" button below to remove your email address</p>
<select id="lstFruits" multiple>
<option value="v"><?php echo $vertical_name?></option>
<option value="c">Contact List</option>
</select>
<input type="hidden" id="selectedtoken" value="<?php echo $mail_token_var?>"/>
<!--<button class="" id="btnSelected2" value="Unsubscribe"></button>-->
<a class="unsub_button" id="btnSelected2" >Unsubscribe</a>
<?php } else echo $msg; ?>
</div>
</div>
</body>
</html>
I tried using the below mentioned code
use this script for select all functionality for your multiselect dropdown
html
<select id="lstFruits" multiple>
<option value="v"><?php echo $vertical_name?></option>
<option value="c">Contact List</option>
<option id="select_all">Select All<option>
</select>
JS
$('#select_all').click(function() {
$('#lstFruits option').prop('selected', true);
});
Im using yii framework to do web development , text are call from specific php file in order to help me exchange the language. Some how i have to add some message from JS file, but i still need the yii php to call the text . How to do that? bellow if my coding
I would like to change "English: 26 character","Chinese: 16 character" and "Other: 16 character".
Because in yii calling text from other php is something like this:
In the labels.php is like this:
(eg: 'englishchar'=>'English: 26 character')
So to call the text is like this:
eg:<?php echo Yii::t('labels','englishchar');?>
$(function () {
$('#select_gametitle').change(function () {
var k = $(this).val();
if (k == "E") {
$("#txtgametitle").attr("placeholder", "English: 26 characters").placeholder();
$("#txtgametitle").attr('maxlength', '26');
}
else if (k == "C") {
$("#txtgametitle").attr("placeholder", "Chinese: 16 characters").placeholder();
$("#txtgametitle").attr('maxlength', '26');
}
else if (k == "O") {
$("#txtgametitle").attr("placeholder", "Other: 16 characters").placeholder();
$("#txtgametitle").attr('maxlength', '26');
}
});
$('input[placeholder], textarea[placeholder]').placeholder();
});
PHP code:
<div class="inputWrapper">
<div class="usetitle">* <?php echo Yii::t('labels', 'gametitle'); ?> :</div>
<select id="select_gametitle" name="select_gametitle" class="selectInput" style="width:369px;">
<option value=""><?php echo Yii::t('labels', 'select_gametitle'); ?></option>
<option value="E"><?php echo Yii::t('labels', 'english'); ?></option>
<option value="C"><?php echo Yii::t('labels', 'chinese'); ?></option>
<option value="O"><?php echo Yii::t('labels', 'other'); ?></option>
</select>
<div id="err_select_gametitle" class="error"></div>
<input id="txtgametitle" name="txtgametitle" type="text" class="textInput" style="width:352px;" placeholder="" />
</div>
You can add it as a global var inside tags in your main layout file.
/view/layouts/main.php:
<?php
Yii::app()->getClientScript()->registerCoreScript('jquery.ui');
Yii::app()->clientScript->registerCssFile(Yii::app()->clientScript->getCoreScriptUrl().'/jui/css/base/jquery-ui.css');
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->theme->baseUrl; ?>/css/styles.css" />
<title><?php echo CHtml::encode($this->pageTitle); ?></title>
<?php Yii::app()->bootstrap->register(); ?>
<link rel="stylesheet" href="<?php echo Yii::app()->baseUrl; ?>/css/font-awesome-4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->baseUrl; ?>/css/style.css" />
<script>
eg:<?php echo Yii::t('labels','englishchar');?>
</script>
</head>
<body>
You could add the script before the div, from PHP, for example:
<!--just add your script code-->
<script>
$(function () {
//your js code
<?php echo "with text printed by php"); ?>
});
</script>
<!--and now your html code, also with embedded PHP-->
<div class="inputWrapper">
<div class="usetitle">* <?php echo Yii::t('labels', 'gametitle'); ?> :</div>
<!--the rest of your div-->
</div>
You could echo out the translate into a JSON.
Yii::app()->clientScript->registerScript('test',
'var lang =' . json_encode( array(
'message1'=>Yii::t('app','Message 1'),
'message2'=>Yii::t('app','Message 2'),
)) . '; console.log(lang.word1)');
$this->render('json');
Extending from this, you could use AJAX and JS template
I am very new to jQuery. I am trying to use a plugin called Searchable Dropdown, that I got from here: http://jsearchdropdown.sourceforge.net/
. but I cannot figure out how to make it work.. What am I doing wrong?
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="scripts/jquery.searchabledropdown-1.0.8.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("select").searchable();
});
</script>
</head>
<?php
echo "<form method='post' action='' id='employeesselection'>
<select name='select_employee' id='select_employee'>";
while($row=mysql_fetch_array($employees)){
$selected = ($row['Id'] == $_POST['select_employee'])?'selected="selected"':'';
echo '<option '.$selected.' value="'.$row['Id'].'">'.$row['Etunimi'].' - '. $row['Sukunimi'].'</option>';
}
echo "</select></form>";
The select is working fine but searching in the select as the jQuery should enable, is not working.
Try also to give your code some semantic:
<?php
// DATABASE CONNECTION
// DATABASE QUERY
?>
<html lang="en">
<head>
<!-- CSS -->
</head>
<body>
<form action="" method="post" id="employeesselection">
<select name="select_employee" id="select_employee">
<?php while ( $row = mysql_fetch_array( $employees ) ) {
$selected = ( $row['id'] == $_POST['select_employee'] ) ? ' selected ' : '';
?>
<option <?php echo $selected ?> value="<?php echo $row['id'] ?>">
<?php echo $row['etunimi'] ?> - <?php echo $row['sukunimi'] ?>
</option>
<?php } ?>
</select>
</form>
<!-- All Javascript down here -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="scripts/jquery.searchabledropdown-1.0.8.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("select").searchable();
});
</script>
</body>
</html>
Maybe the error isn't in your javascript but in php...
Good luck debugging!
I belive its to do with Jquery 1.9.1.
Replace
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
With
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
I am using a jquery banner to show advertisements on my site. When I include one of these banners, it works well, however when I include a second only the first one works, the other just shows as a static image. Does anyone know why this happens?
Find below the html code with the JQuery banner:
<!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=iso-8859-1" />
<title>Simple JavaScript Rotating Banner Using jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="jqbanner/js/jqbanner1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="jqbanner/css/jqbanner1.css" />
</head>
<body>
<div class="sec sec3 ">
<right>
<div id="jqb_object">
<div class="jqb_slides">
<div class="jqb_slide" title=" "><img src="jqbanner/images/ads/entebeJuniorSchool.png" alt=" Entebbe Junior School Logo"/></div>
<div class="jqb_slide" title="" ><span> <br> <br> <br> Achievers in the making </span>...</div>
</div>
<div class="jqb_bar2">
<div class="jqb_info"></div>
<div id="btn_next" class="jqb_btn jqb_btn_next"></div>
<div id="btn_pauseplay" class="jqb_btn jqb_btn_pause"></div>
<div id="btn_prev" class="jqb_btn jqb_btn_prev"></div>
</div>
</div>
</right>
</div>
</body>
</html>
Attached find the code to the jquery file (jqbanner1.js):
// Simple JavaScript Rotating Banner Using jQuery
// www.mclelun.com
var jqb_vCurrent = 0;
var jqb_vTotal = 0;
var jqb_vDuration = 5000;
var jqb_intInterval = 0;
var jqb_vGo = 1;
var jqb_vIsPause = false;
var jqb_tmp = 20;
var jqb_title;
var jqb_imgW = 460;
var jqb_imgH = 250;
jQuery(document).ready(function() {
jqb_vTotal = $(".jqb_slides").children().size() -1;
$(".jqb_info").text($(".jqb_slide").attr("title"));
jqb_intInterval = setInterval(jqb_fnLoop, jqb_vDuration);
//Horizontal
$("#jqb_object").find(".jqb_slide").each(function(i) {
jqb_tmp = ((i - 1)*jqb_imgW) - ((jqb_vCurrent -1)*jqb_imgW);
$(this).animate({"left": jqb_tmp+"px"}, 500);
});
/*
//Vertical
$("#jqb_object").find(".jqb_slide").each(function(i) {
jqb_tmp = ((i - 1)*jqb_imgH) - ((jqb_vCurrent -1)*jqb_imgH);
$(this).animate({"top": jqb_tmp+"px"}, 500);
});
*/
$("#btn_pauseplay").click(function() {
if(jqb_vIsPause){
jqb_fnChange();
jqb_vIsPause = false;
$("#btn_pauseplay").removeClass("jqb_btn_play");
$("#btn_pauseplay").addClass("jqb_btn_pause");
} else {
clearInterval(jqb_intInterval);
jqb_vIsPause = true;
$("#btn_pauseplay").removeClass("jqb_btn_pause");
$("#btn_pauseplay").addClass("jqb_btn_play");
}
});
$("#btn_prev").click(function() {
jqb_vGo = -1;
jqb_fnChange();
});
$("#btn_next").click(function() {
jqb_vGo = 1;
jqb_fnChange();
});
});
function jqb_fnChange(){
clearInterval(jqb_intInterval);
jqb_intInterval = setInterval(jqb_fnLoop, jqb_vDuration);
jqb_fnLoop();
}
function jqb_fnLoop(){
if(jqb_vGo == 1){
jqb_vCurrent == jqb_vTotal ? jqb_vCurrent = 0 : jqb_vCurrent++;
} else {
jqb_vCurrent == 0 ? jqb_vCurrent = jqb_vTotal : jqb_vCurrent--;
}
$("#jqb_object").find(".jqb_slide").each(function(i) {
if(i == jqb_vCurrent){
jqb_title = $(this).attr("title");
$(".jqb_info").animate({ opacity: 'hide', "left": "-50px"}, 250,function(){
$(".jqb_info").text(jqb_title).animate({ opacity: 'show', "left": "0px"}, 500);
});
}
//Horizontal Scrolling
jqb_tmp = ((i - 1)*jqb_imgW) - ((jqb_vCurrent -1)*jqb_imgW);
$(this).animate({"left": jqb_tmp+"px"}, 500);
/*
//Vertical Scrolling
jqb_tmp = ((i - 1)*jqb_imgH) - ((jqb_vCurrent -1)*jqb_imgH);
$(this).animate({"top": jqb_tmp+"px"}, 500);
*/
/*
//Fade In & Fade Out
if(i == jqb_vCurrent){
$(".jqb_info").text($(this).attr("title"));
$(this).animate({ opacity: 'show', height: 'show' }, 500);
} else {
$(this).animate({ opacity: 'hide', height: 'hide' }, 500);
}
*/
});
}
Find attached the php file with the embedded html file:
Focus on :<div class="col4"> <?php include("jqbanner/EntebbeJuniorAd.html");?> </br> </br> <?php include("jqbanner/EntebbeJuniorAd.html");?> </div>
<?php
include("config/functions.inc.php");
include("config/function.php");
$detail=Get_Contents(16);
?>
<!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><?php echo ms_stripslashes($detail['meta_title'])?></title>
<meta name="description" content="<?php echo ms_stripslashes($detail['page_keyword'])?>" />
<meta name="keywords" content="<?php echo ms_stripslashes($detail['page_metadesc'])?>" />
<!-- Stylesheets -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="css/contentslider.css" />
<link href="css/jquery.fancybox-1.3.1.css" rel="stylesheet" type="text/css" />
<!-- Javascript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/featuredcontentglider.js"></script>
<script type="text/javascript" src="js/jquery.min14.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.1.js"></script>
<script type="text/javascript" src="js/jcarousellite_1.0.1.js"></script>
<script type="text/javascript" src="js/ddsmoothmenu.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript" src="js/contentslider.js"></script>
<script type="text/javascript" src="js/ddaccordion.js"></script>
<script type="text/javascript" src="js/acordin.js"></script>
<script type="text/javascript" src="js/paging.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.1.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon.js"></script>
<script type="text/javascript" src="js/Trebuchet_MS_400-Trebuchet_MS_700-Trebuchet_MS_italic_700-Trebuchet_MS_italic_400.font.js"></script>
</head>
<body>
<!-- Wrapper -->
<div id="wrapper_sec">
<!-- Header -->
<div id="masthead">
<div class="inner">
<?php include("include/logo.php");?>
<div class="right_head">
<?php include("include/search.php");?>
<!-- Navigation -->
<?php include("include/nav_top.php");?>
</div>
</div>
</div>
<div class="clear"></div>
<!-- Bread Crumb -->
<?php include("include/breadcrumb.php");?>
<!-- Content -->
<div id="content_sec">
<div class="inner2">
<div class="col3">
<h3 class="heading colr">About Jigsaw</h3>
<div class="">
<p><?php echo ms_stripslashes($detail['page_desc'])?></p>
<br />
</div>
<div class="clear"></div>
</div>
<div class="col4"> <?php include("jqbanner/EntebbeJuniorAd.html");?> </br> </br> <?php include("jqbanner/EntebbeJuniorAd.html");?> </div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="content_botm"> </div>
</div>
<div class="clear"></div>
<!-- Footer -->
<div id="footer">
<div class="inner">
<?php include("include/footer/left.php");?>
<?php include("include/footer/share.php");?>
<?php include("include/footer/connect.php");?>
<?php include("include/footer/resource.php");?>
</div>
</div>
</div>
</body>
</html>
since you are initialising your banners via IDs $("#jqb_object"), it only matches your first banner, all others wont get initialised.
To work around this, give a really UNIQUE Id to all the elements you currently address via id (e.g. attach a unique string with php). Or you could use classes, but that most likey breaks your pause/next/prev - buttons.