This question already has an answer here:
Nivo slider + php
(1 answer)
Closed 7 years ago.
How to load images dynamically into Nivo slider from mysql database
I am using Nivo slider on my application, what I want is to get the images from the mysql databse into Nivo slider.
Here is my scripts:
<!DOCTYPE >
<head>
<title>jQuery Nivo Slider Demo</title>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="demo/style.css" type="text/css" media="screen" />
</head>
<body>
<div id="jquery-script-menu">
<div class="jquery-script-center">
<div class="jquery-script-ads"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2783044520727903";
/* jQuery_demo */
google_ad_slot = "2780937993";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<div class="jquery-script-clear"></div>
</div>
</div>
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<?php
$connection = mysql_connect("localhost", "root", ""); // Establishing Connection with Server
$db = mysql_select_db("user"); // Selecting Database
$sql = mysql_query("SELECT * FROM images ORDER BY image DESC LIMIT 10")or die(mysql_error());
while($row = mysql_fetch_array($sql)){
$image = $row['image'];
$id = $row['id'];
$pic = "upload/$image";
if (file_exists($pic)) {
echo '<img src=\"upload/$image\"/>'; // image path
echo $i++;
}
}
?>
<img src="upload/1.jpg" data-thumb="upload/1.jpg" alt=""/>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
you need to do is output your images in a loop inside the slider div.
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<?php
while($row = mysql_fetch_array($sql)){
$item_name = $row['item_name'];
$item_id = $row['item_id'];
$check_pic = "users/$item_name.jpg";
if (file_exists($check_pic)) {
print "<img src=\"users/$item_name.jpg\"/>";
$i++;
}
}
?>
<img src="images/2.jpg" data-thumb="images/2.jpg" alt=""/>
</div>
</div>
</div>
<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Related
I wish to either make use of a freely available email validator (software, script or online service). There's work but when I insert more than one email at that time only one email verifies which I insert last and other email does not verify. Only one email verifies. How can I do it?
My code:
<?php
include_once('config.php');
if(isset($_POST["email_verify_btn"])) {
$email = $_POST["email_verify"];
if(strpos($email,"\n")) {
$text = explode("\n",$email);
} else {
$text = array($email);
}
function domain_exists($text)
{
$domain = substr(strrchr($text, "#"), 1);
$arr = #dns_get_record($domain, DNS_MX);
if ($arr[0]['host'] == $domain && !empty($arr[0]['target'])) {
return $arr[0]['target'];
}
}
foreach ($text as $abc) {
$domain = "";
$target = "";
$target_ip = "";
if(filter_var($abc, FILTER_VALIDATE_EMAIL)) {
if(domain_exists($abc)){
$domain = substr(strrchr($abc, "#"), 1);
$data = #dns_get_record($domain, DNS_MX);
if (is_array($data) || is_object($data)) {
foreach ($data as $key1) {
$host = $key1['host'];
$target = $key1['target'];
$target_ip = gethostbyname($key1['target']);
}
}
if($data) {
$status = "email id is valid";
}
} else {
$status = "mx recored not exist";
}
} else {
$status = "not in syntax";
}
$c_by = 1;
$c_date = date('Y-m-d H:i:s');
$c_ip = $_SERVER['REMOTE_ADDR'];
$insert = $connect->query("INSERT INTO `email_verify_list`(`primary_email`,`host_name`,`target`,`target_ip`,`session`,`status`,`created_by`, `created_date`, `created_ip`) VALUES ('$abc','$domain','$target','$target_ip','$c_date','$status','$c_by','$c_date','$c_ip')");
if($insert == 1) {
$_SESSION['date_time'] = $c_date;
} else {
echo "<script>alert('!!!!!not successfully');</script>";
}
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<meta charset="utf-8"/>
<title>BULK EMAIL VARIFIER</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"/>
<link rel="apple-touch-icon" href="pages/ico/60.png">
<link rel="apple-touch-icon" sizes="76x76" href="pages/ico/76.png">
<link rel="apple-touch-icon" sizes="120x120" href="pages/ico/120.png">
<link rel="apple-touch-icon" sizes="152x152" href="pages/ico/152.png">
<link rel="icon" type="image/x-icon" href="favicon.ico"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta content="" name="description"/>
<meta content="" name="author"/>
<link href="assets/plugins/pace/pace-theme-flash.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/bootstrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="assets/plugins/switchery/css/switchery.min.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="pages/css/pages-icons.css" rel="stylesheet" type="text/css" />
<link class="main-stylesheet" href="pages/css/pages.css" rel="stylesheet" type="text/css"/>
<!--[if lte IE 9]>
<link href="assets/plugins/codrops-dialogFx/dialog.ie.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
</head>
<body class="fixed-header ">
<div id="rootwizard" class="m-t-50">
<ul class="nav nav-tabs nav-tabs-linetriangle nav-tabs-separator nav-stack-sm">
<li class="active">
<a data-toggle="tab" href="#tab1"><span>EMAIL VERIFY</span></a>
</li>
</ul>
<form method="post" action="" >
<div class="tab-content">
<div class="tab-pane padding-20 active slide-left" id="tab1">
<div class="row row-same-height">
<div class="col-md-12">
<div class="padding-30">
<div class="row clearfix">
<div class="col-sm-3">
<div class="form-group form-group-default">
<label><font size="2">ENTER YOUR EMAIL <span class="glyphicon glyphicon-envelope"></span></font></label><br>
<textarea cols="43" rows="9" name="email_verify" style="border-color:white;border-width:thin;padding:4pt;" multiple/></textarea><br>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-3">
<button type="submit" name="email_verify_btn" class="btn btn-lg btn-info" style="padding:11pt;width:200px;"/><span><b><font size="2">SUBMIT</font></b></span></button>
</div>
</div> <br><br>
<div class="row clearfix">
<div class="col-sm-12">
<table width="100%" class="table ">
<tr class="success">
<th>PRIMARY EMAIL <span class="glyphicon glyphicon-envelope"></span></th>
<th>HOST NAME</th>
<th>TARGET</th>
<th>TARGET IP</th>
<th>STATUS</th>
</tr>
<?php
$select = $connect->query("SELECT * from `email_verify_list` where session='".$_SESSION['date_time']."' order by id");
while($row = $select->fetch_assoc()) {
?>
<tr>
<td><?php echo $row['primary_email']; ?></td>
<td><?php echo $row['host_name']; ?></td>
<td><?php echo $row['target']; ?></td>
<td><?php echo $row['target_ip']; ?></td>
<td><?php echo $row['status']; ?></td>
</tr>
<?php } ?>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<script src="assets/plugins/pace/pace.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="assets/plugins/modernizr.custom.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrapv3/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery/jquery-easy.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-unveil/jquery.unveil.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-bez/jquery.bez.min.js"></script>
<script src="assets/plugins/jquery-ios-list/jquery.ioslist.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-actual/jquery.actual.min.js"></script>
<script src="assets/plugins/jquery-scrollbar/jquery.scrollbar.min.js"></script>
<script type="text/javascript" src="assets/plugins/classie/classie.js"></script>
<script src="assets/plugins/switchery/js/switchery.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap3-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery-autonumeric/autoNumeric.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap-tag/bootstrap-tagsinput.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery-inputmask/jquery.inputmask.min.js"></script>
<script src="assets/plugins/bootstrap-form-wizard/js/jquery.bootstrap.wizard.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js" type="text/javascript"></script>
<script src="assets/plugins/summernote/js/summernote.min.js" type="text/javascript"></script>
<script src="assets/plugins/moment/moment.min.js"></script>
<script src="assets/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="assets/plugins/bootstrap-timepicker/bootstrap-timepicker.min.js"></script>
<script src="pages/js/pages.min.js"></script>
<script src="assets/js/form_wizard.js" type="text/javascript"></script>
<script src="assets/js/scripts.js" type="text/javascript"></script>
<script src="assets/js/demo.js" type="text/javascript"></script>
<script>
window.intercomSettings = {
app_id: "xt5z6ibr"
};
</script>
</body>
</html>
I think , you are not using strpos function in correct way.
you can use this way . Because strpos return also 0 value if any string found at zero position . and return FALSE if search string not found
Also note that string positions start at 0, and not 1.
if(strpos($email,"\n")!==false) {
$text = explode("\n",$email);
} else {
$text = array($email);
}
I am a beginner in Joomla!
I have to upgrade a Joomla 2.5.x version site to the latest version of Joomla.
I've checked the compatibility of all the existing components/modules/plugins of version 2.5.19 and they are all compatible in Joomla 3.x.
The only problem is the template.
I just don't know how to procceed and where to start from to modify it.
This are some of the lines of my templateDetails.xml:
<extension version="2.5" type="template" client="site">
<name>Harpo</name>
<version>1.0.0</version>
...
<files>
<filename>index.php</filename>
<folder>css/</folder>
<folder>images/</folder>
<filename>templateDetails.xml</filename>
<filename>error.php</filename>
</files>
<images>
<filename>template_thumbnail.png</filename>
</images>
...
<positions>
<position>newsflash</position>
<position>hornav</position>
<position>breadcrumbs</position>
<position>banner</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>user5</position>
<position>footer</position>
<position>syndicate</position>
<position>debug</position>
</positions>
</extension>
And this are some of the lines of my index.php file :
<head>
<link rel="shortcut icon" href="<?php echo $app->getCfg( 'live_site' ); ?>templates/<?php echo $this->template ?>/images/favicon.ico"/>
<meta http-equiv="Content-Type" content="text/html;" />
<link href="<?php echo $app->getCfg( 'live_site' ); ?>templates/<?php echo $this->template ?>/css/template_css.css" rel="stylesheet" type="text/css" media="all"/>
<!-- <link href="css/template_css.css" rel="stylesheet" type="text/css" media="all"/> -->
<jdoc:include type="head" />
<meta name="verify-v1" content="PynT0gVSXBh484xuIjQakd0YZS+sHAYmOK+CRTa1aJI=" />
<script type="text/javascript" src="<?php echo $app->getCfg( 'live_site' ); ?>templates/<?php echo $this->template ?>/flashobject.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-32944659-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
jQuery.noConflict();
...
...
...
<body>
<div class="out">
<div class="main">
<!--Toparea Start-->
<div class="top">
<div class="logo_space">
<div class="boxlogin"><jdoc:include type="modules" name="user2" /></div>
</div>
<div class="header">
<img src="<?php echo $app->getCfg( 'live_site' ); ?>templates/<?php echo $this->template ?>/images/img_header.jpg" alt="sfondo_header" align="top" style="float:left;" />
<div id="flash" style="float:right; width:550px; height:132px;"></div>
<script type="text/javascript">
var fo = new FlashObject("<?php
$flashPath = $app->getCfg( 'live_site' )."templates/".$this->template."/flash/animazione.swf";
echo $flashPath;
?>", "Menu", "550", "132", "8", "#FFFFFF", "transparent");
fo.write("flash");
</script>
<!-- <img src="<?php echo $app->getCfg( 'live_site' ); ?>templates/<?php echo $this->template ?>/images/img_headerright.jpg" alt="sfondo_header" align="top" style="float:right;" width="550" height="132" /> -->
<!-- <div class="boxlogin"></div> -->
</div>
<div class="topmenu">
<?php if ($this->countModules( "top" )) { ?>
<jdoc:include type="modules" name="top" />
<?php } ?>
</div>
</div>
...
...
...
Any suggestions are welcomed!
Ok having looked at your code, here are a few things.
Firstly, you XML file is fine and doesn't require any changing.
To import jQuery in noConflict mode and ensure it is only done once, you should replace this:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
with this:
JHtml::_('jquery.framework'); // this is PHP so wrap it in PHP tags
Once done, you can remove this code: jQuery.noConflict();
To get values from the configuration.php file, don't use $app->getCfg() as it's deprecated. Instead use, $app->get(). So in your case, replace this:
$app->getCfg('live_site')
with this
$app->get('live_site');
Other than that, I don't see any other issues with the code.
I am using add this to share content from my site www.halisi-kenya.com but it is posting the wrong image thumnails any one to help.Then secondly my url is showing funny characters at the end http://www.halisi-kenya.com/entry.php?id=55#.UoIPEnD0CyY anyone to help
<?php
include('admin/db_connections/aardb_conn.php');
$query = "SELECT * FROM blog WHERE autoid=".$_GET['id'];
$result = mysql_query($query) or die('Error : ' . mysql_error());
$row = mysql_fetch_array($result, MYSQL_ASSOC);
$title = $row['title'];
$intro = $row['intro'];
$date = $row['timestamp'];
$user = $row['userid'];
$content = $row['body'];
$image1 = $row['image'];
$autoid = $row['autoid'];
$queryi = "SELECT * FROM users WHERE autoid=".$row['userid'];
$resulti = mysql_query($queryi) or die('Error : ' . mysql_error());
$rowi = mysql_fetch_array($resulti, MYSQL_ASSOC);
$fname = $rowi['fname'];
$lname = $rowi['lname'];
$author=$fname." ".$lname;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title><?php echo $title; ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="title" content="Halisi Kenya - It's a lifestyle">
<meta name="keywords" content="Halisi kenya,<?php echo $title; ?>">
<meta name="description" content="<?php $Name = strip_tags($content);
echo $Name;?>">
<meta name="author" content="Billy Ochieng">
<meta name="copyright" content="Halisi Kenya">
<meta http-equiv="Reply-to" content="info#halisi-kenya.com">
<!-- Custom Styles Styles -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Raleway:300,500' rel='stylesheet' type='text/css'>
<!-- Support for HTML5 -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Enable media queries on older browsers -->
<!--[if lt IE 9]>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-45485412-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=538741216211393";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="container">
<header id="breadcrumb">
<ul class="breadcrumb breadcrumb-light breadcrumb-divider-middot">
<li>Home</li>
<li><?php echo $title; ?></li>
</ul>
</header>
<aside class="two-col">
<header class="title2 big-title col-sm-12 col-lg-12">
<h2><?php echo $title; ?></h2>
</header>
<article class="blog-wrap content col-sm-12 col-lg-12">
<div class="blogimg">
<img class="media-object" alt="" src="admin/<?php echo $image1; ?>">
</div>
<p><strong class="text-success"><?php echo $intro; ?></strong></p>
<p> <?php echo $content; ?></p>
<div class="post-tags">
<?php echo $date;?>
</div>
<section class="comments">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit" pi:pinit:layout="horizontal"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-508e4b7b0cb342b4"></script>
<!-- AddThis Button END -->
</section>
<div class="post-author">
<h3>By <strong><?php echo $author;?> </strong></h3>
<div class="clearfix"></div>
</div>
</article>
<section class="comments">
<div class="fb-comments" data-href="http://www.halisi-kenya.com/entry.php?id=<?php echo $autoid;?>" data-numposts="5" width="600"></div>
</section>
</body>
</html>
You need to define meta og tag in the header part.
<meta property="og:image" content="<?php echo "http://halisikenya.com/admin/".$row['image'];?>">
<meta property="og:image" content="http://YOURWEBSITE.com/YOURIMAGE.png">
each image should be in aspect ratio of 1.91:1, min 600px X 315px or max 1200px X 630px
after that you need to debug each url of your blog in FB debugger.
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.halisi-kenya.com%2Fentry.php%3Fid%3D55%23.UoIUx_lQHAN
if there is on your site then you will see in debugger only one image which you specify in og tag.
I am trying to add a blog to my website and I decided I would just create a google blog and use a full screen Iframe to display it on my page. It works fine but then I decided to add the websites header. So now I have the header followed by the Iframe but I would like to be able to treat the header & Iframe as one single page. Right now the header is always visible and I can scroll through the Iframe with the header always showing above it which is not the most visibly pleasant experience. Here is the code:
<?php
include("header.php");
?>
<html>
<head>
<style type="text/css">
body
{
margin: 0;
overflow: hidden;
}
#iframe1
{
height: 80%;
left: 0px;
position: absolute;
top: 180px;
width: 100%;
}
</style>
</head>
<body>
<iframe id="iframe1" src="http://xxxx.blogspot.com/" frameborder="0"></iframe>
</body>
</html>
Here is the header code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="google-site-verification"=xxx />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-26023641-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xxx – <?php if ($page != 'Home') { echo $page; } else { echo 'xxxxs'; } ?></title>
<meta name="description" content="xxx." />
<meta name="keywords" content="xxx<?php echo $tags; ?>" />
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="/js/lightview/js/excanvas/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="js/external.js"></script>
<script type="text/javascript" src="js/lightview/js/spinners/spinners.js"></script>
<script type="text/javascript" src="js/lightview/js/lightview/lightview.js"></script>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box"></script>
<link rel="stylesheet" type="text/css" href="css/hub.css" media="screen" />
<link rel="stylesheet" type="text/css" href="js/lightview/css/lightview/lightview.css"/>
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie7styles.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie6styles.css" /><![endif]-->
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="css/ie6styles.css" /><![endif]-->
<link rel="icon" href="favicon.ico" type="image/ico" />
</head>
<body>
<div id="header">
<a id="logo" href="/"></a>
<ul id="nav">
<li>xx</li>
<li>xx</li>
<li>xx</li>
<li>xx</li>
<li>xx</li>
<li>xx</li>
<li>xx</li>
<li>xx</li>
<li>xx</li>
<li>xx</li>
</ul>
</div>
<div id="content">
The problem is that your scroll bar is within the iframe and disabled on the main page body, so scrolling is only scrolling within the iframe and not your whole page. Remove overflow: hidden from your page body and make it so your iframe stretches its height to fit its contents. That way, the scrollbar you see on the page would scroll your entire page instead of just the iframe.
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.