I am trying to integrate prettyPhoto into my Wordpress theme (i'm using the Sydney theme). I have done the following:
uploaded the prettyPhoto.css file into the /css directory
uploaded the jquery-1.3.2.min.js and jquery.prettyPhoto.js files into the /js directory
uploaded all of the image folders (fullscreen, prettyPhoto, thumbails) into the /images directory
then, I added
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
to the header.php file, right after the opening tag, like this:
?php
/**
* The header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* #package Sydney
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php if ( ! function_exists( 'has_site_icon' ) || ! has_site_icon() ) : ?>
<?php if ( get_theme_mod('site_favicon') ) : ?>
<link rel="shortcut icon" href="<?php echo esc_url(get_theme_mod('site_favicon')); ?>" />
<?php endif; ?>
<?php endif; ?>
<?php wp_head(); ?>
<!--
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function(e) {
var inputvalue3 = $("#input").val();
});
});
</script>
-->
</head>
then, to initialize prettyPhoto, I added
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
into the footer.php file, right before the closing tag, like this:
<?php
/**
* The template for displaying the footer.
*
* Contains the closing of the #content div and all content after
*
* #package Sydney
*/
?>
</div>
</div>
</div><!-- #content -->
<?php if ( is_active_sidebar( 'footer-1' ) ) : ?>
<?php get_sidebar('footer'); ?>
<?php endif; ?>
<a class="go-top"><i class="fa fa-angle-up"></i></a>
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="site-info container">
<?php printf( __( 'Proudly powered by %s', 'sydney' ), 'WordPress' ); ?>
<span class="sep"> | </span>
<?php printf( __( 'Theme: %2$s by %1$s.', 'sydney' ), 'aThemes', 'Sydney' ); ?>
</div><!-- .site-info -->
</footer><!-- #colophon -->
</div><!-- #page -->
<?php wp_footer(); ?>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
</body>
Now, on my wordpress page, there is a section, which is described by a file called "fp-call-to-action.php"
This file includes a button. Upon clicking the button, I want a youtube video to open in a lightbox, using prettyPhoto:
<div>
<a href="http://www.youtube.com/watch?v=40wYKjSd9r0" rel="prettyPhoto" title="youtube">
<button type="button" id="button">Jetzt anschauen!</button>
</a>
</div>
However, every time i click on the button, i get redirected to youtube. the video just won't open in a lightbox.
where am i making a mistake?
many thanks for your help!!
I finally managed to resolve the problem. The links were wrongly, total rookie mistake. My apologies!
Related
I'm beginner for developing the website. Would someone help me to solve these problems? The directory for the file is correct but don't know why I'm still getting the error. Wordpress cannot load the CSS file as well as the JavaScript.
I have used two techniques but still cannot work which can be shown as below:
Anyone can teach me why I cannot load CSS file and Javascript file although using these techniques.
First Technique that I used is <?php echo get_template_directory_uri();?> and <?php bloginfo('template_directory');?>
Header.php
<html lang="en">
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><link rel="stylesheet" href="<?php bloginfo('template_directory');?>/css/ie/v8.css" /><![endif]-->
<script>
var template_dir_js = "<?php echo get_template_directory_uri();?>";
</script>
<!--[if lte IE 8]><script src="<?php bloginfo('template_directory');?>/css/ie/html5shiv.js"></script><![endif]-->
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.dropotron.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/skel.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/skel-layers.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/init.js" type="text/javascript"></script>
<!--[if lte IE 8]><link rel="stylesheet" href="<?php bloginfo('template_directory');?>/css/ie/v8.css" /><![endif]-->
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-desktop.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-mobile.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-1000px.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/skel.css" />
</head>
Second Technique that I used is wp_enqueue_script and wp_enqueue_style
Header.php
<html lang="en">
<head>
<title>Untitled</title>
<?wp_head();?>
</head>
Footer.php
...
<?php wp_footer();?>
</body>
</html>
Functions.php
<?php
function wpt_theme_styles() {
wp_enqueue_style('abs',get_template_directory_uri().'/css/font-awesome.min.css',array(),'1.0.0','all');
wp_enqueue_style('foundation_css', get_template_directory_uri().'/css/style.css',array(),'1.0.0','all');
wp_enqueue_style('normali_css', get_template_directory_uri().'/css/style-1000px.css',array(),'1.0.0','all');
wp_enqueue_style('normalze1_css', get_template_directory_uri().'/css/style-mobile.css',array(),'1.0.0','all');
wp_enqueue_style('normalze_css', get_template_directory_uri().'/css/style-desktop.css',array(),'1.0.0','all');
wp_enqueue_style('main_css', get_template_directory_uri().'/css/skel.css',array(),'1.0.0','all');
wp_enqueue_script( 'modernizr_js', get_template_directory_uri().'/js/jquery.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'foundation_js', get_template_directory_uri().'/js/jquery.dropotron.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'init_js', get_template_directory_uri().'/js/skel.min.js', array(),'1.0.0', true );
wp_enqueue_script( 'init1_js', get_template_directory_uri().'/js/skel-layers.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'init2_js', get_template_directory_uri().'/js/init.js', array(), '1.0.0', true );
wp_enqueue_style('abs');
wp_enqueue_style('foundation_css');
wp_enqueue_style('normali_css');
wp_enqueue_style('foundation_css');
wp_enqueue_style('foundation_css');
wp_enqueue_style('foundation_css');
wp_enqueue_script('modernizr_js');
wp_enqueue_script('foundation_js');
wp_enqueue_script('normalze1_css');
wp_enqueue_script('normalze_css');
wp_enqueue_script('main_css');
}
add_action('wp_enqueue_scripts', 'wpt_theme_styles');
?>
error
File Directory
When I view the source
<script src="http://localhost/wordpress/wp-content/themes/momentum/js/jquery.min.js" type="text/javascript"></script>
<script src="http://localhost/wordpress/wp-content/themes/momentum/js/jquery.dropotron.min.js" type="text/javascript"></script>
<script src="http://localhost/wordpress/wp-content/themes/momentum/js/skel.min.js" type="text/javascript"></script>
<script src="http://localhost/wordpress/wp-content/themes/momentum/js/skel-layers.min.js" type="text/javascript"></script>
<script src="http://localhost/wordpress/wp-content/themes/momentum/js/init.js" type="text/javascript"></script>
<!--[if lte IE 8]><link rel="stylesheet" href="http://localhost/wordpress/wp-content/themes/momentum/css/ie/v8.css" /><![endif]-->
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/momentum/css/style.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/momentum/css/style-desktop.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/momentum/css/style-mobile.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/momentum/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/momentum/css/style-1000px.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/momentum/css/skel.css" />
that means the URL is correct
i use the following configuration:
header.php
<!DOCTYPE html>
<html lang="en">
<head>
...
...
...
<link href="<?php echo get_bloginfo('template_url'); ?>/css/mycss.css" rel="stylesheet">
<script src="<?php echo get_bloginfo('template_url'); ?>/js/myjs.js"></script>
...
...
<?php
/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?>
</head>
<div class="myheader">
...
...
</div>
index.php (or page.php, single.php, etc...)
<?php get_header(); ?>
<div class="mycontainer">
....
....
....
</div>
<?php get_footer(); ?>
footer.php
<div class="myfooter">
...
...
...
</div>
<?php
/* Always have wp_footer() just before the closing </body>
* tag of your theme, or you will break many plugins, which
* generally use this hook to reference JavaScript files.
*/
wp_footer();
?>
</body>
</html>
im not using anything in functions.php to do this, just in the required files
I have to ask you guys, what is wrong in this code, I created a preloader for my website but I failed at the javascript:
<!-- script for preloader -->
<script type="text/javascript/jquery">
$(document).ready(function() {
setTimeout(function() {
$('body').addClass('loaded')
}, 1500);
});
</script>
<!-- preloader* -->
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-one"></div>
<div class="loader-section section-two"></div>
</div>
So the preloader stops as soon as the <body> tag get the class="loaded". But for some reasons the <body> doesn't receive the class.
I don't know if it helps, but here's the whole file:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?= $view->render('head') ?>
<link href="packages/pagekit/theme-hello/css/theme.css" rel="stylesheet">
<?php $view->script('theme', 'theme:js/theme.js') ?>
<?php $url = $_SERVER['REQUEST_URI']; if($url == "/arn_architekten/bilderbuch"): ?>
<style type="text/css">
html {
background-color: #000 !important;
background-image: none !important;
}
</style>
<? endif ?>
</head>
<body>
<!-- Render logo or title with site URL -->
<a href="<?= $view->url()->get() ?>">
<?php if ($logo = $params['logo']) : ?>
<img src="<?= $this->escape($logo) ?>" alt="">
<?php else : ?>
<?= $params['title'] ?>
<?php endif ?>
</a>
<!-- Render widget position -->
<?php if ($view->position()->exists('sidebar')) : ?>
<?= $view->position('sidebar') ?>
<?php endif; ?>
<!-- script for preloader -->
<script type="text/javascript/jquery">
$(document).ready(function() {
setTimeout(function() {
$('body').addClass('loaded')
}, 1500);
});
</script>
<!-- preloader* -->
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
<!-- Render content -->
<?= $view->render('content') ?>
<!-- Insert code before the closing body tag -->
<?= $view->render('footer') ?>
</body>
</html>
Hope somebody can help me there and sorry for my bad english ^^.
change your script as below it might caused an issue
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
$('body').addClass('loaded');
}, 1500);
});
</script>
Update
Add jquery min js this is issue if you don't load jquery js <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> add this line top of the function or inside head tag
Update 1
Update your head tag as below
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?= $view->render('head') ?>
<link href="packages/pagekit/theme-hello/css/theme.css" rel="stylesheet">
//add below line
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<?php $view->script('theme', 'theme:js/theme.js') ?>
<?php $url = $_SERVER['REQUEST_URI']; if($url == "/arn_architekten/bilderbuch"): ?>
<style type="text/css">
html {
background-color: #000 !important;
background-image: none !important;
}
</style>
<? endif ?>
</head>
For more info find this fiddle
Hope it helps.
I usually build my website's pages in .html and then, when everything works, I create the .php page for db and all the server-side stuff.
'Till now I hadn't any problem, but since when I'm trying to integrate some JS scripts in my pages, every time, the same script that in the .html sample works fine in the .php page doesn't work fine or doesn't work at all. Today I was "fighting" with the LightGallery script integrated in my gallery.php file.
I tried everyhing possible before posting this question but whitout any success; I definitely need your help!
This code in the .html page referres to the jQuery gallery and it works fine:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>...</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/gallery.css">
<link rel="stylesheet" type="text/css" href="test/css/lightGallery.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
</head>
<body>
<!-- A jQuery plugin that adds cross-browser mouse wheel support. (Optional) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>
<script src="test/js/lightgallery.js"></script>
<!-- lightgallery plugins -->
<script src="https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js"></script>
<script src="test/js/lg-thumbnail.js"></script>
<script src="test/js/lg-fullscreen.js"></script>
<script src="test/js/lg-autoplay.js"></script>
<div id="header">
....
</div>
<div id="content">
<div id="selector1">
<div class="item" data-src="img/art.jpg">
<figure>
<img src="img/urban.jpg" />
</figure>
</div>
<div class="item" data-src="img/art.jpg">
<figure>
<img src="img/urban.jpg" />
</figure>
</div>
</div>
</div>
<div id="footer">
.....
</div>
<script type="text/javascript">
$('#selector1').lightGallery({
selector: '.item'
});
</script>
</body>
</html>
Since it worked, I integrated it in this .php file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Marco Brigonzi">
<?php
/* check URL */
$query_url = $_SERVER['QUERY_STRING'];
$pageID = substr($query_url, 6);
?>
<title>Album: "<?php $title = ucfirst($pageID);
echo $title; ?>" | Photo</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/gallery.css">
<link rel="stylesheet" type="text/css" href="script/lightgallery/css/lightGallery.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<?php include("php/header-footer.php"); ?>
</head>
<body>
<?php include_once("php/analyticstracking.php"); ?>
<!-- jQuery version must be >= 1.8.0; -->
<!-- <script src="jquery.min.js"></script> -->
<!-- A jQuery plugin that adds cross-browser mouse wheel support. (Optional) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>
<script src="script/lightgallery/js/lightgallery.js"></script>
<!-- lightgallery plugins -->
<script src="https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js"></script>
<script src="script/lightgallery/js/lg-thumbnail.js"></script>
<script src="script/lightgallery/js/lg-fullscreen.js"></script>
<script src="script/lightgallery/js/lg-autoplay.js"></script>
<script src="script/lightgallery/js/lg-hash.js"></script>
<script src="script/lightgallery/js/lg-pager.js"></script>
<script src="script/lightgallery/js/lg-zoom.js"></script>
<?
$current = "photo";
head($current);
?>
<div id="content">
<div id="selector1">
<?php
/* check URL */
if($pageID == 'urban')
{$pageCode = '1';}
elseif($pageID == 'art')
{$pageCode = '2';}
elseif($pageID == 'street')
{$pageCode = '3';}
elseif($pageID == 'nature')
{$pageCode = '4';}
else
{echo 'Error 0';}
/* connessione */
......connection values........
$conn = mysqli_connect($servername, $username, $password, $dbname);
if (!$conn)
{die("Connection failed: " . mysqli_connect_error());}
/* SET utf8 charset for special characters */
if (!mysqli_set_charset($conn, "utf8"))
{printf("Error loading character set utf8: %s\n", mysqli_error($conn));
exit();
}
$sql_pic = 'SELECT * FROM photos WHERE album="'.$pageCode.'" ORDER BY rating DESC';
$result_pic = mysqli_query($conn, $sql_pic);
if (mysqli_num_rows($result_pic) > 0)
{
while($row_pic = mysqli_fetch_assoc($result_pic))
{
echo '<div class="item" data-src="img/photo/'.$pageID.'/'.$row_pic["name"].'.jpg" alt="">
<figure>
<img src="img/photo/'.$pageID.'/thumb/'.$row_pic["thumb"].'.jpg" alt="">
</figure>
</div>';
}
}
else
{echo 'Error 1';}
mysqli_close($conn);
?>
</div>
</div>
<?php foot(); ?>
<script type="text/javascript">
$('#selector1').lightGallery({
selector: '.item'
});
</script>
</body>
</html>
And, of course, it stops working. I tried to put the JS scripts' calling at the end of the page but nothing changes. I've really no clue, 'cause the code is exactly the same! It's only integrated in a .php dynamic page.
[SOLVED] This time the problem was the capital letter in the CSS call: the server host renamed lightGallery.css in lightgallery.css so the CSS file was missing. Thanks everyone for the help!
I'm making a WordPress theme, I'm new to WordPress but know a lot about HTML, CSS, JavaScript, jQuery and PHP.
The problem is the theme I'm creating is not loading plugin js files.
Here the my header code:
<!DOCTYPE HTML>
<html>
<head>
<title>
<?php
wp_title('|','true','right');
bloginfo('name');
?>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
</title>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel="stylesheet" type="text/css" href="<?php echo bloginfo('template_url')?>/css/reset.css" />
<link rel="stylesheet" type="text/css" href="<?php echo bloginfo('template_url')?>/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="<?php echo bloginfo('template_url')?>/css/grid.css" />
<link rel="stylesheet" type="text/css" href="<?php echo bloginfo('template_url')?>/style.css" />
<script type="text/javascript" src="<?php echo bloginfo('template_url')?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php echo bloginfo('template_url')?>/js/bootstrap.min.js"></script>
<?php
wp_head();
?>
</head>
<body>
<div class="container">
<div class="main-nav row" id="show-nav">
Navigation
</div>
<div class="main-nav row" id="close-nav">
Close Navigation
</div>
<div class="row nav-bar">
<?php
wp_nav_menu(array('container_class'=>'main-nav','container'=>'nav'));
?>
</div>
i'm loading jquery manually but i tried to load jquery with wordpress functions.
also tried this code,
if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
wp_deregister_script('jquery');
wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);
wp_enqueue_script('jquery');
}
but didn't working. i have tried many plugins, but just js files of plugins not loading so no plugins working.
I have tried metaslider plugin and Easy Image Gallery plugin. both works in Wordpress default theme but not in mine, because of js file.
Didn't include wp_footer function before closing body tag, it worked with wp_footer function.
Can you try add it on function.php, for example:
wp_register_script('jquery-ui', get_template_directory_uri().'/js/jquery-ui.js');
wp_enqueue_script('jquery-ui');
I'm trying to get this script to work but am having some trouble.
This is my website.
I followed the instructions on the script's website and did this:
Added the reference for the script to head.
Added <script type="text/javascript">$(window).load(function() {$('body').nivoZoom();
});</script> right after the script reference in the head. Should I call the function elsewhere?
Wrapped the smaller image inside <a> tags and added the class of nivoZoom. All the links for images are working.
The problem with my website is that the script isn't working. Instead, if the smaller image is clicked it just leads to the large image address and doesn't zoom as it's suppose to.
UPDATE:
Here's my whole <head>, I don't see where I load jQuery for the second time OK, I see that it loads but I can't find where the code is:
<head>
<script type="text/javascript" src='/wp-content/themes/thefalltheme/js/example.js'></script>
<link rel="stylesheet" href="http://india.thefalljourney.com/wp-content/themes/thefalltheme/js/nivo-zoom.css" type="text/css" media="screen" />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js?ver=3.2.1'></script>
<script src="/wp-content/themes/thefalltheme/js/jquery.nivo.zoom.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('body').nivoZoom();
});
</script>
<meta charset="<?php bloginfo('charset'); ?>" />
<?php if (is_search()) { ?>
<meta name="robots" content="noindex, nofollow" />
<?php } ?>
<title>
<?php
if (function_exists('is_tag') && is_tag()) {
single_tag_title("Tag Archive for ""); echo '" - '; }
elseif (is_archive()) {
wp_title(''); echo ' Archive - '; }
elseif (is_search()) {
echo 'Search for "'.wp_specialchars($s).'" - '; }
elseif (!(is_404()) && (is_single()) || (is_page())) {
wp_title(''); echo ' - '; }
elseif (is_404()) {
echo 'Not Found - '; }
if (is_home()) {
bloginfo('name'); echo ' - '; bloginfo('description'); }
else {
bloginfo('name'); }
if ($paged>1) {
echo ' - page '. $paged; }
?>
</title>
<link rel="shortcut icon" href="http://india.thefalljourney.com/wp-content/themes/thefalltheme/images/favicon.png?force=1">
<!-- <link rel="shortcut icon" href="http://india.thefalljourney.com/wp-content/themes/thefalltheme/images/favicon_blue.png?force=1">
<link rel="shortcut icon" href="http://india.thefalljourney.com/wp-content/themes/thefalltheme/images/favicon_flag_india.png?force=1"> -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
<?php if ( is_singular() ) wp_enqueue_script('comment-reply'); ?>
<?php wp_head(); ?>
</head>
UPDATE 2:
Found the additional loading, it was in the functions.php.
At the top of your page, you load jQuery + nivoZoom:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="/wp-content/themes/thefalltheme/js/jquery.nivo.zoom.pack.js" type="text/javascript"></script>
A few lines below, you load jQuery again, causing the previously made extensions to the jQuery framework to be undone:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js?ver=3.2.1'></script>
You should include the nivo zoom script AFTER loading jQuery:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js?ver=3.2.1'></script>
<script src="/wp-content/themes/thefalltheme/js/jquery.nivo.zoom.pack.js"></script>
Another note: Your CSS file is missing. Make sure that you also upload it.