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!
Related
I'm using the jquery Maximage add-on to create a full-screen slideshow, loading the images dynamically with php, json and mysql.
The problem is that if I upload one or more new images in the database, Maximage does not update the new images automatically.
Any idea how I can do to update Maximage at the end or start the cycle of the images?
<!DOCTYPE html>
<html class='no-js' lang='en'>
<!--<![endif]-->
<head>
<meta charset='utf-8' />
<title>Kiosco</title>
<link rel="stylesheet" type="text/css" href="lib/css/jquery.maximage.css">
<link rel="stylesheet" type="text/css" href="lib/css/screen.css">
<style type="text/css" media="screen">
#maximage {
/* position:fixed !important; */
}
</style>
</head>
<body>
<div id="maximage">
<?php
include "conexion/conexion.php";
// Consult the database
$result = mysqli_query($con,"SELECT name FROM files ORDER BY position ASC");
//Load images
while($row = mysqli_fetch_array($result)) {
?>
<img src="/KioskoImage/lib/images/ImagesDisplay/<?php echo $row['name'];?>" alt="" width="1400" height="1050">
<?php
}
//Close BD
mysqli_close($con);
?>
</div>
<script src="lib/js/jquery.js"></script>
<script src="lib/js/jquery.cycle.all.js" type="text/javascript"></script>
<script src="lib/js/jquery.maximage.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// Trigger maximage
jQuery('#maximage').maximage();
});
</script>
<script type="text/javascript">
$('#maximage').maximage({
onImagesLoaded: function() {
location.reload();
}
});
</script>
</body>
</html>
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 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!
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.