CODEWITHSUNDEEP
phpjquerywordpresslightbox
garydos34
garydos34

Reputation: 3

Lightbox will not load properly on my wordpress site

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.

Upvotes: 0

Views: 206

Answers (2)

Nico Martin
Nico Martin

Reputation: 1278

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>

Upvotes: 1

Alex
Alex

Reputation: 88

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:

<a href="img/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>

Upvotes: 0

Related Questions