Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Colorbox + скрипт "свернуть/развернуть" div (https://javascript.ru/forum/jquery/36273-colorbox-skript-svernut-razvernut-div.html)

fe1ix 09.03.2013 22:22
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>


Как заставить работать его в окне? В чем конфликт?

Спасибо!

Deff 09.03.2013 22:26
fe1ix,
Нарисуйте полнодействующий код(HTML+ скрипты) с двумя скриптами

fe1ix 10.03.2013 21:10
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>


Где-то так.

fe1ix 14.03.2013 00:38
Deff,
html я выложил. Будет минутка гляньте.

Deff 14.03.2013 02:35
Цитата:
Сообщение от 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. Выложите рабочий скрипт в песочнице = ссылка в меню,
Либо ссылку на рабочую инет страницу,

fe1ix 20.03.2013 00:22
Добрый день!

Загнал работающий код в песочницу.
Colorbox используется для галереи, которая выводится в виде таблицы.

Если изображение только одно, как на этом примере, то все работает как мне нужно, но как только ячеек таблицы уже больше одной, как указано на этом примере, то уже "Показать" не работает:(

Как это поправить, если галерея сама по себе подразумевает не одно изображение?

Буду благодарен за помощь.

Deff 22.03.2013 14:19
Наверно так

<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>

fe1ix 24.03.2013 22:24
Deff,
спасибо за помощь. Все как хотелось:thanks: .


Часовой пояс GMT +3, время: 06:30.