[решено]Подскажите скрипт

автор Gamatos Июль 21st 2011, 11:01

Где нажимаешь на изображения и выходит поп окно в котором заранее я написал там html

автор Irbis Июль 21st 2011, 20:47

Не совсем окно, но смысл тот же

Код:: <img src="ССЫЛКА НА КАРТИНКУ" onclick="wopen();" id="img_wcontrol"> <div id="open_content" style="display: none; position: absolute; z-index: 999; border: 1px solid gray; padding: 10px;"> ЛЮБОЙ HTML, ТЕКСТ И т.д. </div> <script type="text/javascript"> function wopen(){ $("#open_content").css({opacity: 0, display: "block"}); $("#open_content").animate({opacity: 1}, 1000); document.getElementById("img_wcontrol").onclick = wclose; } function wclose(){ $("#open_content").animate({opacity: 0}, 1000); $("#open_content").css({display: "none"}); document.getElementById("img_wcontrol").onclick = wopen; } </script>

А скрипты окон уже есть, воспользуйтесь поиском

автор Gamatos Июль 22nd 2011, 01:25

Извени но не работает поставил так:

Код:: <img src="http://illiweb.com/fa/admin/icones/act-html.png" onclick="wopen();" id="img_wcontrol"> <div id="open_content" style="display: none; position: absolute; z-index: 999; border: 1px solid gray; padding: 10px;"> ЛЮБОЙ HTML, ТЕКСТ И т.д. </div> <script type="text/javascript"> function wopen(){ $("#open_content").css({opacity: 0, display: "block"}); $("#open_content").animate({opacity: 1}, 1000); document.getElementById("img_wcontrol").onclick = wclose; } function wclose(){ $("#open_content").animate({opacity: 0}, 1000); $("#open_content").css({display: "none"}); document.getElementById("img_wcontrol").onclick = wopen; } </script>

автор Gamatos Июль 23rd 2011, 21:28

Вот на этом сайте http://www.creativestation.ru/index.php? нажмите что я тут https://i.imgur.com/a631t.jpg стрелкой показываю иммено этот эфект ищу.

автор Домовой Июль 23rd 2011, 22:54

Может такой вариант устроит?
В ПА - Модули - Управление кодами Javascript
Создай новый Javascript
Дай ему название
Расположение : по усмотрению
Код Javascript * : поставь следующее:

Код:: jQuery(document).ready(function(){ jQuery('.pupbutton').click(function(){ jQuery(this).parent().children('div.pupCont').slideToggle('slow'); return false; }); });

Сохрани.
Далее установи сам контейнер туда куда надо его поставить

Код:: <div class="pup"><div class="pupbutton"><img src="http://www.creativestation.ru/public/style_images/restyleipb3/feed.png" title="" alt=""></div><div style="display: none; position: absolute;" class="pupCont"> ЗДЕСЬ СОДЕРЖИМОЕ </div></div>

Теперь зададим стиль всплывающему окну.
В CSS

Код:: .pup { position:relative; width:16px; /*ширина кнопки*/ height:16px; /*высота кнопки*/ } .pup div.pupCont { position:absolute; width:200px; /*ширина всплывающего окна*/ background-color:#FFFFFF !important; /*фон окна*/ z-index: 999; margin-top:6px; border:1px solid #B38000; /*стиль рамки окна*/ padding:5px; }

Пример в приветствии
http://test-063.forum777.com/

По такому принципу у меня на форуме сделан каталог туториалов.

автор Gamatos Июль 24th 2011, 02:00

Спасибо огромное вы меня выручили!!! yes

автор Домовой Июль 24th 2011, 10:01

Не за что.

автор Домовой Июль 24th 2011, 11:40

Gamatos? могу предложить ещё такой вариант
http://12345.forum777.com/

Мне кажется он более интересен)))

автор Gamatos Июль 24th 2011, 14:22

Вау,да если не трудно дай пожалуйсто.

автор Домовой Июль 24th 2011, 15:02

В ПА - Модули - Управление кодами Javascript

Код:: $(function () { $('.bubbleInfo').each(function () { // options var distance = 10; var time = 500; var hideDelay = 800; var toppos, leftpos; var hideDelayTimer = null; // tracker var beingShown = false; var shown = false; var trigger = $('.trigger', this); var popup = $('.popup', this).css('opacity', 0); // set the mouseover and mouseout on both element $([trigger.get(0), popup.get(0)]).mouseover(function () { // stops the hide event if we move from the trigger to the popup element if (hideDelayTimer) clearTimeout(hideDelayTimer); // don't trigger the animation again if we're being shown, or already visible if (beingShown || shown) { return; } else { beingShown = true; leftpos=(trigger.width()-popup.width())/2+trigger.position().left; toppos=-trigger.height()-popup.height(); popup.css({top: toppos, left: leftpos, display: 'block'}); if(popup.offset().left<0) leftpos=0; if(popup.offset().left+popup.width()+30>$(window).width()) leftpos=$(window).width()-popup.width()-30; if(popup.offset().top<0) toppos=trigger.position().top+trigger.height(); // reset position of popup box popup.css({ top: toppos, left: leftpos, display: 'block' // brings the popup back in to view }) // (we're using chaining on the popup) now animate it's opacity and position .animate({ top: '-=' + distance + 'px', opacity: 1 }, time, 'swing', function() { // once the animation is complete, set the tracker variables beingShown = false; shown = true; }); } }).mouseout(function () { // reset the timer if we get fired again - avoids double animations if (hideDelayTimer) clearTimeout(hideDelayTimer); // store the timer so that it can be cleared in the mouseover if required hideDelayTimer = setTimeout(function () { hideDelayTimer = null; popup.animate({ top: '-=' + distance + 'px', opacity: 0 }, time, 'swing', function () { // once the animate is complete, set the tracker variables shown = false; // hide the popup entirely after the effect (opacity alone doesn't do the job) popup.css('display', 'none'); }); }, hideDelay); }); }); });

Контейнер с содержимым ставь куда надо

Код:: <div class="bubbleInfo"> <div class="trigger"><img src="http://www.creativestation.ru/public/style_images/restyleipb3/feed.png" title="" alt=""></div> <div class="popup"> СОДЕРЖИМОЕ </div> </div>

В CSS

Код:: .bubbleInfo{ position: relative; width:16px; /*ширина кнопки*/ height:16px; /*высота кнопки*/ } .popup{ position: absolute; width:150px; /*ширина всплывающего окна*/ background-color:#FFFFFF !important; /*фон окна*/ z-index: 999; border:1px solid #B38000; /*стиль рамки окна*/ -moz-border-radius:8px; -khtml-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; box-shadow:0 0 10px 3px #FFDEAD; -webkit-box-shadow:0 0 10px 3px #FFDEAD; -moz-box-shadow:0 0 10px 3px #FFDEAD; padding:10px 15px 10px 15px; }

автор Gamatos Июль 24th 2011, 16:25

Спасибище!!А можно и то и это сразу иметь на форуме?

автор Домовой Июль 24th 2011, 17:24

Можно

[решено]Подскажите скрипт

[решено]Подскажите скрипт

Re: [решено]Подскажите скрипт

Re: [решено]Подскажите скрипт

Re: [решено]Подскажите скрипт

Re: [решено]Подскажите скрипт

Re: [решено]Подскажите скрипт

Re: [решено]Подскажите скрипт

Re: [решено]Подскажите скрипт

Re: [решено]Подскажите скрипт

Re: [решено]Подскажите скрипт

Re: [решено]Подскажите скрипт

Re: [решено]Подскажите скрипт