Hi guys,
Having a frustrating problem here, I’m design my site, still fairly new to jQuery need some help on the following problem
I’ve implemented the Camera Plugin Slider-
using with jquery bbq plugin
Works fine in IE, but other browsers slider is not loading/showing at all
you can visit here for the problem-http://www.hybridizedesigns.com/indexOfficial.php
general and bbq.js are js that help load content dynamically. I’ve tried not including them, the slider works in all browsers, once i included them, it breaks again
please help me nail down the problem.
Thanks
Kenwin
I’ve included the following javascripts into my <head> tag on index page
<script src="js/jquery.ba-bbq.min.js"></script>
<script src="js/general.js"></script>
<script type="text/javascript" src="cameraslider/scripts/jquery.mobile.customized.min.js"></script>
<script type="text/javascript" src="cameraslider/scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="cameraslider/scripts/camera.js"></script>
<script>
jQuery(function(){
jQuery('#camera_wrap_1').camera({
height: '41.7%',
pagination: false,
thumbnails: false,
imagePath: 'cameraslider/images'
});
});
</script>
Code on general.js
$(document).ready(function(){
var loadingImage = $('<img src="./preloader.gif"/>');
//initial
$('body').fadeIn('slow');
//testcode
//start of coding
$('#nav ul li.hash a, #pointnavwrapper a, .footleft a.hash').each(function(){
$(this).attr('href', '#' + $(this).attr('href'));
});
$(window).bind('hashchange', function(e){
var url = e.fragment;
$('#content').load(url + '.php' + ' #content-wrap').fadeIn('slow');
//alert('loaded without fade out');
//remove current state when another state active
$('#nav ul li a.current, .webdesign a.current, .graphicdesign a.current, .printdesign a.current, .photography a.current, .personalprojects a.current, #webdesigntext.current, #graphicdesigntext.current, #printdesigntext.current, #photographytext.current, #personalprojectstext.current, .footleft a.current').removeClass('current');
if(url){
$('#content').append('<p id="loading"></p>');
$('#loading').append(loadingImage);
//if hash
$('#nav ul li a[href="#' + url + '"]').addClass('current');
$('#content-wrap').fadeOut('fast', function(){
$('#loading').show();
});
}else{
//if no hash
$('#nav ul li a:first').addClass('current');
}
//dotnavs
if(url){
$('#content').append('<p id="loading"></p>')
$('#loading').append(loadingImage);
//without list items parents
$('#webdesigntext a[href="#' + url + '"], #content a[href="#' + url + '"], .webdesign a[href="#' + url + '"], #graphicdesigntext a[href="#' + url + '"], .graphicdesign a[href="#' + url + '"], #printdesigntext a[href="#' + url + '"], .printdesign a[href="#' + url + '"], #photographytext a[href="#' + url + '"], .photography a[href="#' + url + '"], #personalprojectstext a[href="#' + url + '"], .personalprojects a[href="#' + url + '"], .footleft a[href="#' + url + '"]').addClass('current');
$('#content-wrap').fadeOut('fast', function(){
$('#loading').show();
});
}else{
//if no hash
$('.footleft a:first-child').addClass('current');
}
//CONTENT LINK FUNCTION HERE
//end of content links clicks
});
$('.snippetitem a, .featureitem4 a, .featureitem5 a').each(function(){
$(this).attr('href', '#' + $(this).attr('href'));
});
$(window).bind('hashchange', function(e){
var url = e.fragment;
$('#content').load(url + ' #content-wrap').fadeIn('slow');
});
$(window).trigger('hashchange');
//live links
});
//end of document READY FUNCTIONS
$('.featureitem1 a, .featureitem2 a, .featureitem3 a').live({
click:function(e){
$(this).attr('href', '#' + $(this).attr('href'));
$(window).bind('hashchange', function(e){
var url=e.fragment;
$('#content').load(url).fadeIn('slow');
});
}
});
$('#webdesignitem-wrapper a, #graphicdesignitem-wrapper a, #printdesignitem-wrapper a, #photographyitem-wrapper a, #personalprojectsitem-wrapper a').live({
click:function(e){
$(this).attr('href', '#' + $(this).attr('href'));
$(window).bind('hashchange', function(e){
var url=e.fragment;
$('#content').load(url + '#content-wrap').fadeIn('slow');
});
}
});
$('#portfoliowrapper a').live({
click:function(){
$(this).attr('href', '#' + $(this).attr('href'));
$(window).bind('hashchange', function(e){
var url = e.fragment;
$('#content').load(url + '.php' + ' #content-wrap').fadeIn('slow');
});
}
});
code on index
<!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" xml:lang="en" lang="en">
<?php require_once('Connections/connectdb.php'); ?>
<?php include ('inc/functions.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
if (PHP_VERSION < 6) {
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
}
$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
$theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
break;
case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}
}
mysql_select_db($database_connectdb, $connectdb);
$query_rsLatestPrint = "SELECT pg_id, pg_link, pg_identity, pg_client, pg_year_completed, pg_work_type, pg_keywords, pg_work_link, pg_roles, path,identity FROM tbl_pages,images WHERE pg_category = 3 AND images.identity=tbl_pages.pg_identity ORDER BY pg_id DESC LIMIT 1";
$rsLatestPrint = mysql_query($query_rsLatestPrint, $connectdb) or die(mysql_error());
$row_rsLatestPrint = mysql_fetch_assoc($rsLatestPrint);
$totalRows_rsLatestPrint = mysql_num_rows($rsLatestPrint);
mysql_select_db($database_connectdb, $connectdb);
$query_rsLatestWeb = "SELECT pg_id, pg_link, pg_identity, pg_client, pg_year_completed, pg_work_type, pg_keywords, pg_work_link, pg_roles, path,identity FROM tbl_pages,images WHERE pg_category = 1 AND images.identity=tbl_pages.pg_identity ORDER BY pg_id DESC LIMIT 1";
$rsLatestWeb = mysql_query($query_rsLatestWeb, $connectdb) or die(mysql_error());
$row_rsLatestWeb = mysql_fetch_assoc($rsLatestWeb);
$totalRows_rsLatestWeb = mysql_num_rows($rsLatestWeb);
mysql_select_db($database_connectdb, $connectdb);
$query_rsGraphicDesign = "SELECT pg_id, pg_link, pg_identity, pg_client, pg_year_completed, pg_work_type, pg_keywords, pg_work_link, pg_roles, path,identity FROM tbl_pages,images WHERE pg_category = 2 AND images.identity=tbl_pages.pg_identity ORDER BY RAND() LIMIT 1";
$rsGraphicDesign = mysql_query($query_rsGraphicDesign, $connectdb) or die(mysql_error());
$row_rsGraphicDesign = mysql_fetch_assoc($rsGraphicDesign);
$totalRows_rsGraphicDesign = mysql_num_rows($rsGraphicDesign);
mysql_select_db($database_connectdb, $connectdb);
$query_rsPrintDesign = "SELECT pg_id, pg_link, pg_identity, pg_client, pg_year_completed, pg_work_type, pg_keywords, pg_work_link, pg_roles, path,identity FROM tbl_pages,images WHERE pg_category = 3 AND images.identity=tbl_pages.pg_identity ORDER BY RAND() LIMIT 1";
$rsPrintDesign = mysql_query($query_rsPrintDesign, $connectdb) or die(mysql_error());
$row_rsPrintDesign = mysql_fetch_assoc($rsPrintDesign);
$totalRows_rsPrintDesign = mysql_num_rows($rsPrintDesign);
$query_rsWebDesign = "SELECT pg_id, pg_link, pg_identity, pg_client, pg_year_completed, pg_work_type, pg_keywords, pg_work_link, pg_roles, path,identity FROM tbl_pages,images WHERE pg_category = 1 AND images.identity=tbl_pages.pg_identity ORDER BY RAND() LIMIT 1";
$rsWebDesign = mysql_query($query_rsWebDesign, $connectdb) or die(mysql_error());
$row_rsWebDesign = mysql_fetch_assoc($rsWebDesign);
$totalRows_rsWebDesign = mysql_num_rows($rsWebDesign);
mysql_select_db($database_connectdb, $connectdb);
$query_rsFeaturedWeb = "SELECT pg_id, pg_link, pg_identity, pg_client, pg_year_completed, pg_work_type, pg_keywords, pg_work_link, pg_roles, path,identity, pg_featured FROM tbl_pages,images WHERE pg_category = 1 AND pg_featured = 1 AND images.identity=tbl_pages.pg_identity ORDER BY RAND() LIMIT 1";
$rsFeaturedWeb = mysql_query($query_rsFeaturedWeb, $connectdb) or die(mysql_error());
$row_rsFeaturedWeb = mysql_fetch_assoc($rsFeaturedWeb);
$totalRows_rsFeaturedWeb = mysql_num_rows($rsFeaturedWeb);
mysql_select_db($database_connectdb, $connectdb);
$query_rsFeaturedGraphic = "SELECT pg_id, pg_link, pg_identity, pg_client, pg_year_completed, pg_work_type, pg_keywords, pg_work_link, pg_roles, path,identity, pg_featured FROM tbl_pages,images WHERE pg_category = 2 AND pg_featured = 1 AND images.identity=tbl_pages.pg_identity ORDER BY RAND() LIMIT 1";
$rsFeaturedGraphic = mysql_query($query_rsFeaturedGraphic, $connectdb) or die(mysql_error());
$row_rsFeaturedGraphic = mysql_fetch_assoc($rsFeaturedGraphic);
$totalRows_rsFeaturedGraphic = mysql_num_rows($rsFeaturedGraphic);
mysql_select_db($database_connectdb, $connectdb);
$query_rsFeaturedPhoto = "SELECT pg_id, pg_link, pg_identity, pg_client, pg_year_completed, pg_work_type, pg_keywords, pg_work_link, pg_roles, path,identity, pg_featured FROM tbl_pages,images WHERE pg_category = 4 AND pg_featured = 1 AND images.identity=tbl_pages.pg_identity ORDER BY RAND() LIMIT 1";
$rsFeaturedPhoto = mysql_query($query_rsFeaturedPhoto, $connectdb) or die(mysql_error());
$row_rsFeaturedPhoto = mysql_fetch_assoc($rsFeaturedPhoto);
$totalRows_rsFeaturedPhoto = mysql_num_rows($rsFeaturedPhoto);
?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hybridize Designs - Simplicity with Characteristics </title>
<meta name="description" content="Description Here" />
<meta name="keywords" content="Web Design, Graphic Design, Multimedia Design, Print Design, Kenwin Zheng, Photography, Digital Media, Digital Videos" />
<meta http-equiv="imagetoolbar" content="no" />
<!--OGTAGS-->
<meta property="og:title" content="Hybridize Designs: Simplicity with Characteristics"/>
<meta property="og:description" content="Description Here"/>
<meta property="og:image" content="http://www.hybridizedesigns.com/images/hybridizedesigns.jpg"/>
<!--custom image thumbnails-->
<link rel="image_src" href="http://www.hybridizedesigns.com/images/hybridizedesigns.jpg"/>
<link href="style/style.css" rel="stylesheet" type="text/css" media="all" />
<link rel='stylesheet' id='camera-css' href='cameraslider/css/camera.css' type='text/css' media='all'>
<!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>-->
<script src="js/jquery.ba-bbq.min.js"></script>
<script src="js/general.js"></script>
<script type="text/javascript" src="cameraslider/scripts/jquery.mobile.customized.min.js"></script>
<script type="text/javascript" src="cameraslider/scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="cameraslider/scripts/camera.js"></script>
<script>
jQuery(function(){
jQuery('#camera_wrap_1').camera({
height: '41.7%',
pagination: false,
thumbnails: false,
imagePath: 'cameraslider/images'
});
});
</script>
</head>
<body>
<div id="topwrap">
<div id="logo"><a href="indexOfficial.php"><img src="images/logo.png" width="350" height="100" longdesc="http://www.hybridizedesigns.com" /></a></div>
<div id="socialbuttons"><a href="https://www.facebook.com/HybridizeDesigns" title="Facebook" id="social1">Facebook</a><a href="https://twitter.com/HybridizeDesign" title="Twitter" id="social2">Twitter</a>
<a href="https://plus.google.com/110341224016959088773" title="Gplus" id="social3">Gplus</a>
<a href="#" title="Mail" id="social4">Mail</a></div>
</div>
<div id="top_gradientbar"></div>
<div id="nav"><ul><li><a href="indexOfficial.php">Home</a></li><li class="hash"><a href="about">About</a></li><li class="hash"><a href="portfolio">Portfolio</a></li><li class="hash"><a href="services">Services</a></li><li class="hash"><a href="hireme">Hire Me</a></li><li class="hash"><a href="contact">Contact</a></li></ul></div>
<!--dynamic content area-->
<div id="content">
<div id="content-wrap">
<div id="shortintro"><span class="blueitalic">"Simplistic with Characteristics"</span><br />
<p><span class="redpink">Hybridize Designs</span><span class="whitetextsml"><br />
is the</span> <span class="whitetext">online portfolio</span> <span class="whitetextsml">of</span> <span class="liteorange">Kenwin Zheng</span><span class="whitelarge">;</span><br /><br />a Multimedia designer, Gunpla artist, Photographer, Martial artist, Japanese music lover based in Sydney, Australia; who loves to work while everyone is asleep </p></div>
<div id="featuredwrapper">
<div id="featuredwork"><span class="latestworksthin">Featured</span> <span class="latestworks">Works</span></div>
<div id="bigfeatured">
<div class="camera_wrap camera_azure_skin" id="camera_wrap_1">
<div data-src="cameraslider/images/slides/bakedmemories.jpg">
<div class="camera_caption">Baked Memories Photography</div>
</div>
<div data-src="cameraslider/images/slides/bridge.jpg"></div>
<div data-src="cameraslider/images/slides/tree.jpg"></div>
</div>
</div>
</div>
<div id="featureditems">
<ul class="row1">
<li class="featureitem1"><a href="webdesignpage.php?p=<?php echo $row_rsFeaturedWeb['pg_identity']; ?>"><img class="varwork2" src="<?php echo $row_rsFeaturedWeb['path']; ?>"/></a></li>
<li class="featureitem2"><a href="graphicdesignpage.php?p=<?php echo $row_rsFeaturedGraphic['pg_identity']; ?>"><img class="varwork2" src="<?php echo $row_rsFeaturedGraphic['path']; ?>"/></a></li>
<li class="featureitem3"><a href="photographypage.php?p=<?php echo $row_rsFeaturedPhoto['pg_identity']; ?>"><img class="varwork3" src="<?php echo $row_rsFeaturedPhoto['path']; ?>"/></a></li>
</ul>
</div></div>
</div>
</div>
<!--Footer-->
<div class="varworkwrapper">
<ul class="row2">
<div id="latestwork"><span class="latestworksthin">//Latest</span> <span class="latestworks">Works</span></div><div id="snippets"><span class="latestworksthin">.Work</span> <span class="latestworks">Snippets</span></div>
<li class="featureitem4"><a href="webdesignpage.php?p=<?php echo $row_rsLatestWeb['pg_identity']; ?>"><img class="varwork" src="<?php echo $row_rsLatestWeb['path']; ?>"/></a></li>
<li class="featureitem5"><a href="printdesignpage.php?p=<?php echo $row_rsLatestPrint['pg_identity']; ?>"><img class="varwork" src="<?php echo $row_rsLatestPrint['path']; ?>"/></a></li>
<div id="snippetwrapper">
<li class="snippetitem"><a href="webdesignpage.php?p=<?php echo $row_rsWebDesign['pg_identity']; ?>"><img class="snippetimg" src="<?php echo $row_rsWebDesign['path']; ?>"/></a></li>
<li class="snippetitem"><a href="graphicdesignpage.php?p=<?php echo $row_rsGraphicDesign['pg_identity']; ?>"><img class="snippetimg" src="<?php echo $row_rsGraphicDesign['path']; ?>"/></a></li>
<li class="snippetitem"><a href="printdesignpage.php?p=<?php echo $row_rsPrintDesign['pg_identity']; ?>"><img class="snippetimg" src="<?php echo $row_rsPrintDesign['path']; ?>"/></a></li>
</div></ul>
<div id="pointnavwrapper">
<div class="webdesign">
<a href="webdesign" id="webdesigncircle"></a>
<a href="webdesign" id="webdesigntext">Web<br />
Design</a>
</div>
<div class="graphicdesign">
<a href="graphicdesign" id="graphicdesigncircle"></a>
<a href="graphicdesign" id="graphicdesigntext">Graphic<br />
Design</a>
</div>
<div class="printdesign">
<a href="printdesign" id="printdesigncircle"></a>
<a href="printdesign" id="printdesigntext">Print<br />
Design</a>
</div>
<div class="photography">
<a href="photography" id="photographycircle"></a>
<a href="photography" id="photographytext">Photography</a>
</div>
<div class="personalprojects">
<a href="personalprojects" id="personalprojectscircle"></a>
<a href="personalprojects" id="personalprojectstext">Personal<br />
Projects</a>
</div>
</div>
</div>
<div class="skillswrapper">
<div id="skillspanel">
<ul class="panel-1">
<li class="designtext">Design</li>
<li class="normaltext">Photoshop CS5/6</li>
<li class="normaltext">Illustrator CS5/6</li>
<li class="normaltext">InDesign CS5/6</li>
<li class="normaltext">Flash CS5/6</li>
<li class="normaltext">Dreamweaver CS5/6</li>
<li class="normaltext">Sony Vegas</li>
</ul>
<ul class="panel-2">
<li class="developtext">Develop</li>
<li class="normaltext">HTML</li>
<li class="normaltext">CSS 2/3</li>
<li class="normaltext">PHP</li>
<li class="normaltext">MySQL</li>
<li class="normaltext">jQuery</li>
<li class="normaltext">Flash AS 2/3</li>
<li class="normaltext">OpenCart</li>
<li class="normaltext">WordPress</li>
<li class="normaltext">Custom CMS</li>
</ul>
<ul class="panel-3">
<li class="arttext">Art</li>
<li class="normaltext">Photography</li>
<li class="normaltext">Gundam Modelling</li>
</ul>
</div>
</div>
<div id="footer">
<div id="footerwrap">
<div class="footleft">
<a href="indexOfficial.php">Home</a> /
<a class="hash" href="about">About</a> /
<a class="hash" href="portfolio">Portfolio</a> /
<a class="hash" href="services">Services</a> /
<a class="hash" href="contact">Contact</a></div><div class="footright">Copyright © Hybridize Designs / 2013 / All rights reserved</div></div></div>
</body>
</html>