Проблема подключения LightBox 2.5

Wahlberg · April 11, 2012

Собственно ниже код, проблема в том что я так и не подключил этот код, хотя перетыкал все места. Всё отображается - не работает сам скрип. Скажите пожалуйста в чём может быть ошибка. Сайт скрипта http://lokeshdhakar.com/projects/lightbox2/ .

<HTML> 
	<HEAD> 
		<meta http-equiv="Content-Type" content="text/html; charset=cp-1251">
		<TITLE>hello world!</TITLE> 
		<link rel="stylesheet" type="text/css" href="reset.css">
		<link rel="stylesheet" type="text/css" href="main.css">
		<link rel="stylesheet" type="text/css" href="style/screen.css" media="screen" />
		<link rel="stylesheet" type="text/css" href="style/lightbox.css"  media="screen" />
		<script src="js/modernizr-2.5.3.min.js"></script>
	</HEAD> 
<BODY> 
	<div id="header">
		<ul>
			<li><a href="#">hello world!</a></li>
			<li><a href="#">hello world!</a></li>
			<li><a href="#">hello world!</a></li>
			<li><a href="#">hello world!</a></li>
		</ul>
	</div>

<div id="wrapper">
	<div id="top">
		<div id="monitor">
			<div id="slide"></div>
		</div>
	</div>
	<div id="content">
		<div class="shadow">
			<div id="leftcol">
				<ul>
					<li><a href="#">hello world!</a></li>
					<li><a href="#">hello world!</a></li>
					<li><a href="#">hello world!</a></li>
					<li><a href="#">hello world!</a></li>
					<li><a href="#">hello world!</a></li>
					<li><a href="#">hello world!</a></li>
					<li><a href="#">hello world!</a></li>
					<li><a href="#">hello world!</a></li>
				</ul>
			</div>
			<div id="rightcol">


			<section id="example">
<h1>Hello world!</h1>
				  <div class="imageRow">
				  	<div class="set">
				  	  <div class="single first">
				  		  <a href="images/examples/image-3.jpg" rel="lightbox[plants]" title="Click on the right side of the image to move forward."><img src="images/examples/thumb-3.jpg" alt="Plants: image 1 0f 4 thumb" /></a>
				  		</div>
				      <div class="single">
				  		  <a href="images/examples/image-4.jpg" rel="lightbox[plants]" title="Alternately you can press the right arrow key." ><img src="images/examples/thumb-4.jpg" alt="Plants: image 2 0f 4 thumb" /></a>
				      </div>
				      <div class="single">
				  		  <a href="images/examples/image-5.jpg" rel="lightbox[plants]" title="The script preloads the next image in the set as you're viewing."><img src="images/examples/thumb-5.jpg" alt="Plants: image 3 0f 4 thumb" /></a>
				      </div>
				      <div class="single last">
				  		  <a href="images/examples/image-6.jpg" rel="lightbox[plants]" title="Click the X or anywhere outside the image to close"><img src="images/examples/thumb-6.jpg" alt="Plants: image 4 0f 4 thumb" /></a>
				      </div>
				</div>
				</div>

				</section>

			</div>
		</div>
	</div>


	<div id="bottom">
		<div class="middle">
			<li>
				<ul>
					<li><a href="#">hello world!!</a></li>
					<li><a href="#">hello world!!</a></li>
					<li><a href="#">hello world!!</a></li>
					<li><a href="#">hello world!!</a></li>
				</ul><span></span>
				<ul>
					<li><a href="#">hello world!!</a></li>
					<li><a href="#">hello world!!</a></li>
					<li><a href="#">hello world!!</a></li>
					<li><a href="#">hello world!!</a></li>				
				</ul><span></span>
				<ul>
					<li><a href="#">hello world!!</a></li>
					<li><a href="#">hello world!!</a></li>
					<li><a href="#">hello world!!</a></li>
					<li><a href="#">hello world!!</a></li>				
				</ul><span></span>
				<ul>
					<li><a href="#">hello world!!</a></li>
					<li><a href="#">hello world!!</a></li>
					<li><a href="#">hello world!!</a></li>
					<li><a href="#">hello world!!</a></li>				
				</ul>
			</li>
		</div>
	</div>
</div>

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script src="js/jquery.smooth-scroll.min.js"></script>
<script src="js/lightbox.js"></script>

<script>
  jQuery(document).ready(function($) {
      $('a').smoothScroll({
        speed: 1000,
        easing: 'easeInOutCubic'
      });

      $('.showOlderChanges').on('click', function(e){
        $('.changelog .old').slideDown('slow');
        $(this).fadeOut();
        e.preventDefault();
      })
  });

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-2196019-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</BODY> 
</HTML>

Yazon_Nile · April 12, 2012

В основном лаитбоксы работают по принципу - выскакиваю, становлюсь по центру.

Настраиваются так же одинаково. Нужно подключить скрипт, инициализировать его, подключить стили. (+ если надо, папку с картинками скопировать)

Потом на нужную ссылку вешается класс типа .lightbox-opener, и в её же href ставиться айдишник нужного лаитбокса.

Сори, что кучей вывалил. По примеру разбираться нет времени) надеюсь как-то подтолкнул к решению)

Wahlberg · April 13, 2012

Всё подключено и сделано как сказано, но это не помогает

Yazon_Nile · April 19, 2012

Не пойму в чем сложность)

Ну тупо возьми исходный хтмл и удаляй потихоньку ненужные тебе строки, пока не получишь "чистый" лаитбокс))

http://files.mail.ru/I2BI7O

Вот. Распакуешь архив - глянешь.

индекс.хтмл - ихний исходник

индекс-му.хтмл - мой пробник - создать пустой хтмл исходник + вставил ссылку на лаитбокс.

Клацаешь - лаитбокс открывается. Правда хрен знает где. Но сам принцып работает. Дальше стилями надо крутить)

ЗЫ, доктаип забыл один убрать)))

Sign In

Проблема подключения LightBox 2.5

Question

Wahlberg

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Yazon_Nile

Link to comment

Share on other sites

Wahlberg

Link to comment

Share on other sites

Yazon_Nile

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information