Форум

Iru121 · #1 (**permalink**) 06.03.2017, 09:15

Здравствуйте!
Столкнулся с небольшой проблемой. Сделал небольшой бокс для показа изображения по клику мышки, т.е. при клике на изображение(превью) появляется бокс и в нём отображется изображение в нормальном размере, но не получается вывести этот бокс через Js.

<p><a rel="simplebox" href="./images/.jpg">
<img class="pop1" src="./images/.jpg"></a></p>

Если просто прописать в тегах, то всё работает, а вот если же попытаться вести через Js, то бокс не отрывается. Вместо него изобрежение отрывается в новой вкладке(?).

в Js вывожу примерно так
function check() {
var cV=document.getElementById('inp').value;
if(document.getElementById('inp').value == 'face')
{
document.getElementById('finded1').innerHTML="<a rel='simplebox' href='./images/.jpg'><img class='pop1' src='./images/.jpg'></a>";

innerHTML использую для того, чтобы убирать прошлое изображение и выводить новое. Так же, если не трудно, подскажите пожалуйста, как можно выводить большое количество изображений во что-то типа <p class="">
Сейчас делаю вывод изобрежние одного через Айди, но хотелось бы реализовать вывод 5ти изображений при нажатии на поиск.

ksa · #2 (**permalink**) 06.03.2017, 09:45

Сообщение от Iru121

Столкнулся с небольшой проблемой.

Начинай делать тестовый пример. Огрызки разметки и кода плохие помощники...

Iru121 · #3 (**permalink**) 06.03.2017, 18:42

Сообщение от ksa

Начинай делать тестовый пример. Огрызки разметки и кода плохие помощники...

Извиняюсь, первый раз обращаюсь за помощью.
Тестовый пример? Кинуть кусок кода сюда или можно как-нибудь сэмулировать всё это дело?

рони · #4 (**permalink**) 06.03.2017, 18:48

Iru121,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Iru121 · #5 (**permalink**) 06.03.2017, 19:35

Сообщение от рони

Iru121,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Как сделать форматирование я понял, но есть небольшая проблема. Полность рабочий код боксов занимает очень-очень много места. Так лучше наверно не кидать.
Могу скинуть код сайта, но соответственно бокс работать не будет. Вообще использую симплбокс, который легко гуглится. Могу в принцпе на него ссыль кинуть и кусок своего сайта. Так будет норм?

рони · #6 (**permalink**) 06.03.2017, 19:59

Iru121,
пишите ссылку и описание куда жмак где зырк какие мечт.

Iru121 · #7 (**permalink**) 06.03.2017, 20:16

Сообщение от рони

Iru121,
пишите ссылку и описание куда жмак где зырк какие мечт.

Урезал свой код как только смог.
Суть в том, что при поиске слова вылезает картинка маленького размера и при нажатии на неё, она должна увеличиваться.
Всё отлично работает в хтмл, но если же попытаться вызвать картику через скрип, она не будет увеличиваться, а просто открывается как новое окно в черном фоне.
Так же хотелось бы узнать, как можно при поиске слова вывести сразу несколько изображений. Была идея создать много тегов <p id="">, но что-то мне совсем не нравится такая идея.

скрип брал вроде отсюда http://get-do-ok.ru/skript-uvelichen...-nazhatii.html

<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
    <title>Search</title>
      <style type="text/css">
        img{
          width: 100px;
          height: 100px;
        }
      </style>
   </head>

   <body>
         <p class="hist"><input type="text" id="inp"/><button id="find" onclick="check();">Enter</button></p>
         <div id="finded">
             <p id="finded1"></p>
         </div>
   <js run>
        <script type="text/javascript" src="simplebox_util.js"></script>
        <script type="text/javascript">
          function check() {
            var cV=document.getElementById('inp').value;
            if(document.getElementById('inp').value == 'troll')
            {
              document.getElementById('finded1').innerHTML="<a rel='simplebox' href='http://s00.yaplakal.com/pics/pics_original/2/3/3/8037332.jpg'><img class='pop1' src='http://s00.yaplakal.com/pics/pics_original/2/3/3/8037332.jpg'></a>";
          }
        else if (document.getElementById('inp').value == 'face')
        {
          document.getElementById('finded1').innerHTML="<a rel='simplebox' href='http://mirgif.com/KARTINKI/fraktal/fraktal37.jpg'><img src='http://mirgif.com/KARTINKI/fraktal/fraktal37.jpg'></a>";
          document.getElementById('finded1').innerHTML="<a rel='simplebox' href='http://www.nokiaplanet.com/uploads/posts/2014-11/1415431186_blue-flower-480x800.jpg'></a><img src='http://www.nokiaplanet.com/uploads/posts/2014-11/1415431186_blue-flower-480x800.jpg'></a>";
          }
}
      (function(){
          var boxes=[],els,i,l;
          if(document.querySelectorAll){
            els=document.querySelectorAll('a[rel=simplebox]');
            Box.getStyles('simplebox_css','simplebox.css');
            Box.getScripts('simplebox_js','simplebox.js',function(){
              simplebox.init();
              for(i=0,l=els.length;i<l;++i)
              simplebox.start(els[i]);
              simplebox.start('a[rel=simplebox_group]');
            });
          }
        })();
        
        </script>
    </js>
	</body>

рони · #8 (**permalink**) 06.03.2017, 21:23

Iru121,
новую ссылку никто не инициализировал , после добавления на страницу поэтому ничего не происходит.

рони · #9 (**permalink**) 06.03.2017, 21:32

Iru121,
смотрите по ссылке пример -- только вместо меню у вас будет инпут.
Как создать такого плана менюшку с выплывающей галереей?

Iru121 · #10 (**permalink**) 07.03.2017, 09:47

Сообщение от рони

Iru121,
смотрите по ссылке пример -- только вместо меню у вас будет инпут.
Как создать такого плана менюшку с выплывающей галереей?

Спасибо, но честно говоря никак не могу понять как заставить симплбокс вылезать таким способом.

Форум

Справочник

Discord чат

Курсы javascript