I am having trouble getting lightbox http://lokeshdhakar.com/projects/lightbox2 to work. I have been able to create a new test html doc and get lightbox working. However when I put it into my website I can only get the images to load up.
My site is comprised of (header.php----portfolio.php(main content)----footer.php)
Header.php
<head>
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<!--<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />-->
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> ยป Blog Archive <?php } ?> <?php wp_title(); ?></title>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Iceland' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Karla%7CMontserrat">
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>css/screen.css">
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>css/lightbox.css">
<script language="javascript" type="text/javascript"></script>
</head>
<body>
<!--header end-->
Portfolio.php
<img class="example-image" src="<?php bloginfo('template_directory'); ?>/img/demopage/image-1.jpg" alt="image-1" />'
footer.php
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.js"></script>
</body>
</html>
I am lost on this and would appreciate some help.
Your image needs a link to the original image:
Portfolio.php
<a href="<?php bloginfo('template_directory'); ?>/img/demopage/image-1.jpg" data-lightbox="image-1" data-title="My caption">
<img class="example-image" src="<?php bloginfo('template_directory'); ?>/img/demopage/image-1-small.jpg" alt="image-1" />
</a>
Looking at the Lightbox documentation it mentions you need to list the images out in this fashion.
Add a data-lightbox attribute to any image link to activate Lightbox. For the value of the attribute, use a unique name for each image. For example:
Image #1
Related
I'm beginner for PHP. I'm using Wordpress for developing the website. Currently, I'm trying to create my own themes for wordpress. Now, I face the problem is cannot load the css which is in the CSS file as well as javascript. Could someone help me to solve the problem?
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="" />
<script>
var template_dir_js = "<?php echo get_template_directory_uri();?>";
</script>
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="<?php echo get_template_directory_uri();?>/js/jquery.min.js" rel="stylesheet" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri();?>/js/jquery.dropotron.min.js" rel="stylesheet" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri();?>/js/jquery.scrolly.min.js" rel="stylesheet" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri();?>/js/jquery.scrollgress.min.js" rel="stylesheet" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri();?>/js/skel.min.js" rel="stylesheet" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri();?>/js/skel-layers.min.js" rel="stylesheet" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri();?>/js/init.js" rel="stylesheet" type="text/javascript"></script>
<noscript>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/skel.css" />
<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-xlarge.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" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body class="landing">
functions.php
<?php
add_theme_support('menus');
function register_theme_menus() {
register_nav_menus(array( 'primary-menu' => __('Primary Menu')));
}
add_action('init', 'register_theme_menus');
function wpt_theme_styles() {
wp_enqueue_style('foundation_css', get_template_directory_uri().'/css/style.css');
wp_enqueue_style('normalize_css', get_template_directory_uri().'/css/style-xlarge.css');
wp_enqueue_style('main_css', get_template_directory_uri().'/css/skel.css');
wp_enqueue_style('main_css', get_template_directory_uri().'/css/style-mobile.css');
}
add_action('wp_enqueue_scripts', 'wpt_theme_styles');
function wpt_theme_js() {
wp_enqueue_script( 'modernizr_js', get_template_directory_uri().'/js/jquery.min.js', array('jquery'), '1.1', true );
wp_enqueue_script( 'foundation_js', get_template_directory_uri().'/js/jquery.dropotron.min.js', array('jquery'), '1.1', true );
wp_enqueue_script( 'main_js', get_template_directory_uri().'/js/jquery.scrolly.min.js', array('jquery'), '1.1', true );
wp_enqueue_script( 'init_js', get_template_directory_uri().'/js/skel.min.js', array('jquery'), '1.1', true );
wp_enqueue_script( 'init1_js', get_template_directory_uri().'/js/skel-layers.min.js', array('jquery'), '1.1', true );
wp_enqueue_script( 'init2_js', get_template_directory_uri().'/js/init.js', array('jquery'), '1.1', true );
wp_enqueue_script( 'init2_js', get_template_directory_uri().'/js/scrollgress.min.js', array('jquery'), '1.1', true );
}
add_action('wp_enqueue_script', 'wpt_theme_js');
?>
index.php
<?php get_header(); ?>
<div id="main">
<div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<p><?php the_content(__('(more...)')); ?></p>
<hr> <?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id="delimiter">
</div>
<?php get_footer(); ?>
file directory
after modify error
Fixed:
Your style.css file isn't inside a folder called css so update the <link> tag to: <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/style.css" />
<script> tags cannot have a rel="stylesheet" attribute.
The <!-- [if lte IE 8]... tags are probably also serving from the css directory, so also reference the get_template_directory_url() in their path.
It is a good idea to only reference the css files in the <head> and place the <script> tags at the bottom of your file, before the </body> tag.
Full Fixed 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="" />
<script>
var template_dir_js = "<?php echo get_template_directory_uri();?>";
</script>
<!--[if lte IE 8]><script src="<?php echo get_template_directory_uri();?>/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/jquery.scrolly.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri();?>/js/jquery.scrollgress.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>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/skel.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/style.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-xlarge.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" />
<!--[if lte IE 8]><link rel="stylesheet" href="<?php bloginfo('template_directory');?>/css/ie/v8.css" /><![endif]-->
</head>
<body class="landing">
1.Image of nivo slider display in my template . But when I use it into codeIgniter then it can not display.
2.Others content of template shows but only image does not show .
3.With firebug I saw when nivoslider div act then it show image tag where visibility:hidden and background show url of image not found.
I am newbie . Please help me.
Master page :
This is code:
<title>This is Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="<?php echo base_url();?>css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="<?php echo base_url();?>css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
<!-- Amazing Mobile Menu CSS -->
<link href="<?php echo base_url();?>css/jquery.fs.naver.css" rel="stylesheet" type="text/css" />
<!-- News Tickr CSS -->
<link href="<?php echo base_url();?>css/ticker-style.css" rel="stylesheet" type="text/css" />
<!-- Bebas Webfont -->
<link href="<?php echo base_url();?>fonts/stylesheet.css" rel="stylesheet" media="screen">
<!-- Nivo Slider CSS -->
<link rel="stylesheet" href="<?php echo base_url();?>css/themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo base_url();?>css/nivo-slider.css" type="text/css" media="screen" />
<!-- Main CSS -->
<link href="<?php echo base_url();?>css/style.css" rel="stylesheet" media="screen">
<!-- Responsive Framework -->
<link href="<?php echo base_url();?>css/responsive.css" rel="stylesheet" media="screen">
**html code for nivoslider:**
<div id="slider" class="nivoSlider">
<img src="<?php echo base_url();?>img/toystory.jpg" alt="" />
<img src="<?php echo base_url();?>img/up.jpg" alt="" />
<img src="<?php echo base_url();?>img/walle.jpg" alt="" />
<img src="<?php echo base_url();?>img/nemo.jpg" title="#htmlcaption" alt="" />
</div>
''''''''''''''''''''''''''''
''''''''''''''''''''''''''' **others code here**![enter image description here][1]
this code for script:
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="<?php echo base_url();?>js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
controlNav: false
});
});
</script>
<script src="<?php echo base_url();?>js/jquery.ticker.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#js-news').ticker();
});
</script>
<script src="<?php echo base_url();?>js/jquery.fs.naver.min.js"></script>
<script type="text/javascript">
$("nav").naver({
animated: true
});
</script>
<script src="<?php echo base_url();?>js/bootstrap.min.js"></script>
[1]: http://i.stack.imgur.com/JsaIJ.png
Change
<?php echo base_url();?>img/toystory.jpg
into
<?php echo base_url();?>/img/toystory.jpg
(note the slash).
Or even better: remove all <?php echo base_url();?> and add in your head:
<base href="/" /> or <base href="<?php echo base_url();?>/" />
I am having trouble with applying CSS style in my view.
I have set base_url in config.php also..
config['base_url']='http://localhost/test_project/'
My code is
<html>
<head>
<title>Untitled Document</title>
<link type="text/css" href="<?php echo base_url()?> css/mycss.css" >
</link>
</head>
<body>
<p> This is test.</p>
</body>
</html>
My CSS code is
p
{
color:#0066CC;
}
But it shows only simple text..
How to apply CSS in codeigniter....
Put the path inside the function. Include rel="stylesheet" in the link tag. You don't need the closing </link> either.
<link rel="stylesheet" type="text/css" href="<?php echo base_url('css/mycss.css'); ?>">
View the source of the page, you should see the CSS included like this
<link rel="stylesheet" type="text/css" href="http://localhost/test_project/css/mycss.css">
You need put in html tag link the attribute rel="stylesheet"
<link type="text/css" href="<?php echo base_url('css/mycss.css') ?>" rel="stylesheet" >
Check with your firebug if your css files is load fine.
You could use html tag called "base" for example:
<base href="http://url" />
In your code:
<html>
<head>
<title>Untitled Document</title>
<base href="<?php echo base_url()?>" />
<link type="text/css" href="css/mycss.css" rel="stylesheet"></link>
</head>
<body>
<p> This is test.</p>
</body>
</html>
I use the default function of codeigniter. For example:
echo link_tag('assets/css/bootstrap.css');
i'm trying to run a php project i created using windows in ubuntu 12.04LTS. For that reason i installed php5 apache2 and open_jdk_7 in my ubuntu system. The next step was to put the project (the file index.php, the directory CSS and other files and directories) inside var/www/webserver directory. Then i opened firefox and wrote myip/weserver/index.php . It indeed loaded the page but it wasn't using the css. By the way i am new in ubuntu so keep it simple if possible :/ . Any help will be really appreciated.
This is the starting part of the code tha i used on the windows version in index.php
<?php
define("SUBFOLDER","");
//has to be changed to DOCUMENT ROOT
define("ROOT","C:\webdev\apache\htdocs");
?>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="<?php echo SUBFOLDER."/"; ?>css/myCSSfile.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="<?php echo SUBFOLDER."/"; ?>images/dit.ico">
<link rel="stylesheet" href="<?php echo SUBFOLDER."/"; ?>css/search.css">
<link rel="stylesheet" href="<?php echo SUBFOLDER."/"; ?>css/button.css">
<link rel="stylesheet" href="<?php echo SUBFOLDER."/"; ?>css/button2.css">
<script type="text/javascript" src="<?php echo SUBFOLDER."/"; ?>js/resolutionfinder.js"></script>
<script type="text/javascript" src="<?php echo SUBFOLDER."/"; ?>js/changeInputValue.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo SUBFOLDER."/"; ?>js/ajaxcalls.js"></script>
And this is how i changed the second define to use it on linux. maybe i give the root path wrong?
<?php
define("SUBFOLDER","/webserver");
//has to be changed to DOCUMENT ROOT
define("ROOT","/var/www/webserver");
?>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="<?php echo SUBFOLDER."/"; ?>css/myCSSfile.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="<?php echo SUBFOLDER."/"; ?>images/dit.ico">
<link rel="stylesheet" href="<?php echo SUBFOLDER."/"; ?>css/search.css">
<link rel="stylesheet" href="<?php echo SUBFOLDER."/"; ?>css/button.css">
<link rel="stylesheet" href="<?php echo SUBFOLDER."/"; ?>css/button2.css">
<script type="text/javascript" src="<?php echo SUBFOLDER."/"; ?>js/resolutionfinder.js"></script>
<script type="text/javascript" src="<?php echo SUBFOLDER."/"; ?>js/changeInputValue.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo SUBFOLDER."/"; ?>js/ajaxcalls.js"></script>
Your OS has nothing to do with your CSS. Just check the path you are loading the CSS from, its most likely wrong.
I am a little bit new to yii. I am using the following code to create the main template:
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Schedule an appointment with My business</title>
<link href='https://fonts.googleapis.com/css?family=Signika' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/bookpage/style.css" type="text/css">
<link rel="stylesheet" media="all" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/modal-form-css/jquery-ui.css" />
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/bookpage/appointpress.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/datepickercss/jquery.ui.datepicker.css" type="text/css">
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/datepickercss/jquery.ui.theme.css" type="text/css">
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/datepickercss/jquery-ui.css" type="text/css">
<!--<script type="text/javascript" src="//sslstatic.wix.com/services/js-sdk/1.19.0/js/Wix.js"></script> -->
<div class="header" style="height:60px;">
<div id="inner_header" style="padding-top:5px;">
<span style="float:right;color:rgb(68, 68, 68); margin-top:-10px;">Appointpress | Powerful Online Scheduling</span>
</div>
</div>
<body style="background-color:FFFFFF; font-family:Signika">
<div class="container-fluid">
<?php echo $content; ?>
</div>
<script src="<?php echo Yii::app()->request->baseUrl; ?>/css/appcal/jquery-1.9.1.js"></script>
<script src="<?php echo Yii::app()->request->baseUrl; ?>/css/appcal/jquery-ui-1.10.2.custom.js"></script>
<!--date validation-->
<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl; ?>/js/date.js" /></script>
</body>
</html>
But in console I am getting some CDATA added in the last of the file when I see it into console.
<script type="text/javascript" src="/customers/js/date.js" /></script>
<script type="text/javascript">
/*<![CDATA[*/
jQuery(function($) {
jQuery('a[rel="tooltip"]').tooltip();
jQuery('a[rel="popover"]').popover();
});
/*]]>*/
</script>
</body>
thats not a problem in Firefox or Google chrome. but is problematic in IE. I am not able to figure out that from where it is coming out and how to remove this ?
Please guys help in out of this problem ?
Thanks
This is automatically created by Yii to prevent misinterpretation by old browsers, XML-Files or non JavaScript aware browsers.
This should not cause any problems at all.
Can you post a error message?
Furthermore when using Yii, you should use these "Yii-methods" to include JavaScript:
<?php
$baseUrl = Yii::app()->baseUrl;
Yii::app()->getClientScript()->registerScriptFile($baseUrl.'/js/someJs.js');
?>
Also check the Yii-Docu on JS: http://www.yiiframework.com/wiki/394/javascript-and-ajax-with-yii/#hh6