09.03.2013, 22:22
|
|
Интересующийся
|
|
Регистрация: 02.11.2012
Сообщений: 24
|
|
|
Colorbox + скрипт "свернуть/развернуть" div
Всем привет.
При открытии окна с контентом, которое выводит colorbox, не срабатывает другой скриптец, который я прописал в этом окне:
function hideShow(el){$(el).toggleClass('show').siblings('div.hideCont_v1').slideToggle('normal');return false;};
<a class="hideBtn_v1" title="Показать\Скрыть блок" ="" onclick="$('#hideCont1_v1').slideToggle('normal');$(this).toggleClass('show');return false;" href="javascript://">Показать</a>
<div id="hideCont1_v1" style="display: none;">
<h3>Основное содержимое скрытого блока</h3>
<p>
<p>Some text.</p>
</div>
Как заставить работать его в окне? В чем конфликт?
Спасибо! |
|
09.03.2013, 22:26
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
fe1ix,
Нарисуйте полнодействующий код(HTML+ скрипты) с двумя скриптами
|
|
10.03.2013, 21:10
|
|
Интересующийся
|
|
Регистрация: 02.11.2012
Сообщений: 24
|
|
Deff,
спасибо что откликнулся.
<!DOCTYPE html>
<html lang="ru">
<head>
<script type="text/javascript" src="js/jquery-1.7.1-min.js"></script>
<script type="text/javascript" src="js/jquery.gallery.js"></script>
<script>function hideShow(el){$(el).toggleClass('show').siblings('div.hideCont_v1').slideToggle('normal');return false;};
</script>
<script>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
});
</script>
</head>
<body>
<a class="group1" href="#1">
<img src="img.jpg" width="145">
</a>
<div style="display: none">
<div id="1">
Some content
<a class="hideBtn_v1" title="Показать\Скрыть блок" ="" onclick="$('#hideCont1_v1').slideToggle('normal');$(this).toggleClass('show');return false;" href="javascript://">Показать</a>
<div id="hideCont1_v1" style="display: none;">
<h3>Основное содержимое скрытого блока</h3>
<p>Some text.</p>
</div>
</div>
</div>
</body>
</html>
Где-то так.
|
|
14.03.2013, 00:38
|
|
Интересующийся
|
|
Регистрация: 02.11.2012
Сообщений: 24
|
|
|
Deff,
html я выложил. Будет минутка гляньте.
|
|
14.03.2013, 02:35
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
Сообщение от fe1ix
|
Deff,
html я выложил. Будет минутка гляньте.
|
1. А что нельзя было реальные сссылки вставить и фотки ?
<!DOCTYPE html>
<html lang="ru">
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script>function hideShow(el){$(el).toggleClass('show').siblings('div.hideCont_v1').slideToggle('normal');return false;};
</script>
<script>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
});
</script>
</head>
<body>
<a class="group1" href="#1">
<img src="img.jpg" width="145">
</a>
<div style="display: none">
<div id="1">
Some content
<a class="hideBtn_v1" title="Показать\Скрыть блок" ="" onclick="$('#hideCont1_v1').slideToggle('normal');$(this).toggleClass('show');return false;" href="javascript://">Показать</a>
<div id="hideCont1_v1" style="display: none;">
<h3>Основное содержимое скрытого блока</h3>
<p>Some text.</p>
</div>
</div>
</div>
</body>
</html>
2.С какого припеку Ваша функция
function hideShow(el){$(el).toggleClass('show').siblings('div.hideCont_v1').slideToggle('normal');return false;};
начнет работать ?
Если скриптом Вы её не запускаете , а кнопку управления скрыли
<div style="display: none">
<div id="1">
Some content
<a class="hideBtn_v1" title="Показать\Скрыть блок" =""
3. Выложите рабочий скрипт в песочнице = ссылка в меню,
Либо ссылку на рабочую инет страницу,
Последний раз редактировалось Deff, 14.03.2013 в 02:38.
|
|
20.03.2013, 00:22
|
|
Интересующийся
|
|
Регистрация: 02.11.2012
Сообщений: 24
|
|
Добрый день!
Загнал работающий код в песочницу.
Colorbox используется для галереи, которая выводится в виде таблицы.
Если изображение только одно, как на этом примере, то все работает как мне нужно, но как только ячеек таблицы уже больше одной, как указано на этом примере, то уже "Показать" не работает 
Как это поправить, если галерея сама по себе подразумевает не одно изображение?
Буду благодарен за помощь. |
|
22.03.2013, 14:19
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
Наверно так
<html lang="ru">
<head>
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script>function hideShow(el){$(el).toggleClass('show').siblings('div.hideCont_v1').slideToggle('normal');return false;};
</script>
<script>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".group1").colorbox({rel:'group1', inline:true});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
});
</script>
</head>
<body>
<body>
<table id="myTable">
<tr>
<td>
<a class="group1" href="#1">
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">
</a>
<div style="display: none">
<div id="1" style="width:336px; height:220px">
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">
<a href="javascript://" title="Показать\Скрыть блок" onclick="$(this).toggleClass('show');$(this).next().slideToggle('normal');return false;">Показать</a>
<div class="Some_text" style="display: none;">
<h3>Основное содержимое скрытого блока</h3>
<p>Some text 1.</p>
</div>
</div>
</div>
</td>
<td>
<a class="group1" href="#2">
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">
</a>
<div style="display: none">
<div id="2" style="width:336px; height:220px">
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">
<a href="javascript://" title="Показать\Скрыть блок" onclick="$(this).toggleClass('show');$(this).next().slideToggle('normal');return false;">Показать</a>
<div class="Some_text" style="display: none;">
<h3>Основное содержимое скрытого блока</h3>
<p>Some text 2.</p>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
Последний раз редактировалось Deff, 22.03.2013 в 15:25.
|
|
24.03.2013, 22:24
|
|
Интересующийся
|
|
Регистрация: 02.11.2012
Сообщений: 24
|
|
Deff,
спасибо за помощь. Все как хотелось  .
|
|
|
|
