Проблема с выводом текста подписи в галерее
 

Здравствуйте!

Пытаюсь сделать несложную галерею с подписями к каждой картинке. Подписи хранятся в скрытом абзаце с уникальным идентификатором. Проблема заключается в том, как средствами простого JavaScript получить текст из этого абзаца и прописать его в специально выделенный абзац (видимый) под картинкой.

Код-пример вставки картинки-превью:

<input type="radio" id="pic1" class="pics" checked="checked" />
<label for="pic1" accesskey="2">
<img name="smallimg" src="PotPlayer_1.gif" height="60px" onclick = 'setBigImage(this)' alt="1" />
<p class="hid" id="p1">ЗДЕСЬ НУЖНЫЙ ТЕКСТ</p></label>

Место для вставки большой картинки:

<div id="bigpick">
    <img id = 'bigimg' src = "PotPlayer_1.gif"  height="390px" alt="" /><br />
    <p id="commentary"></p></div>

Функция javascript:

function setBigImage(foto) {
    document.getElementById("bigpick").style.cssText="opacity:0; filter: alpha(opacity=0);"; 
    setTimeout("document.getElementById('bigpick').style.cssText='text-align:center; opacity:1; filter: alpha(opacity=1); -webkit-transition:1s; -moz-transition:1s; -ms-transition:1s; -o-transition:1s; transition:1s;'", 500);
    document.getElementById("bigimg").src = foto.src;
   document.getElementById("bigimg").style.cssText="height:390px;"
// вот так я пытался решить, но не получилось
 if (document.getElementById("pic1").checked = true;) 
   {
document.getElementById("commentary").innerHTML = document.getElementById("p1") }}

Что я делаю не так, ткните, пожалуйста, носом :)

<style>
p.hid {
 background-color:#C1D3FB;
 position:absolute;
 display:none;
 border:1px solid blue;
 padding:4px 7px;
}
div[id^="bigpick"] {
 position:absolute;
 opacity:0;
}
</style>

<script type="text/javascript">
function setBigImage(a) {
  var arr = a.getAttribute('data').split(',');
  var Parr = document.getElementById(arr[0]).parentNode.getElementsByTagName('p');
  for(var i=0; i<Parr.length;i++){
   if(Parr[i])Parr[i].style.display='none';
  }
  document.getElementById(arr[0]).style.display='block';
  var v=document.getElementById(arr[1])
  v.innerHTML = v.innerHTML.replace(/^[\s\S]*?\{/img,arr[2]+'{');
}
</script>

<label class="MyImg-p" accesskey="2">
<img name="smallimg" src="http://javascript.ru/forum/images/smilies/smile.gif" height="60px" data="p1,style,#bigpick1" onclick="setBigImage(this)" />
</label>

<label class="MyImg-p" accesskey="2">
<img name="smallimg" src="http://javascript.ru/forum/images/smilies/smile.gif" height="60px"  data="p2,style,#bigpick1" onclick="setBigImage(this)" />
</label>


<label class="MyImg-p" accesskey="2">
<img name="smallimg" src="http://javascript.ru/forum/images/smilies/write.gif" height="60px"  data="p3,style,#bigpick2" onclick="setBigImage(this)" />
</label>

<style id="style">
#bigpick {
text-align:center;
opacity:1;
filter: alpha(opacity=1);
-webkit-transition:1s;
-moz-transition:1s;
-ms-transition:1s;
-o-transition:1s;
transition:1s;
}
</style>


<div id="bigpick1">
    <img id = 'bigimg' src = "http://javascript.ru/forum/images/smilies/smile.gif"  height="390px" alt="" /><br />
    <div id="commentary">
<p class="hid" id="p1">ЗДЕСЬ НУЖНЫЙ ТЕКСТ 1 11111</p>
<p class="hid" id="p2">ЗДЕСЬ НУЖНЫЙ ТЕКСТ 2  2222</p>
    </div>

</div>
<div id="bigpick2">
    <img id = 'bigimg' src = "http://javascript.ru/forum/images/smilies/write.gif"  height="390px" alt="" /><br />
    <div id="commentary">
<p class="hid" id="p3">ЗДЕСЬ НУЖНЫЙ ТЕКСТ3 3333</p>
    </div>
</div>

p1http://javascript.ru/forum/images/smilies/smile.gifbr /

Спасибо, почти то, что нужно, но в Вашей реализации нет возможности сделать текущую превьюшку полупрозрачной, чтобы пользователь видел, что он сейчас выбрал.
Именно по этой причине я связался с радиокнопками, чтобы привязать сотиль полупрозрачности к свойству "checked"...
И да! Нужно чтобы по умолчанию первая большая картинка отображалась (опять тот же "checked").
Пробовал модифицировать Ваш вариант под радиокнопки - понял, что хреновый из меня волшебник :)

Не оч понял - задачу ...
К вечеру что нидь изображу

<style>
p.hid {
 background-color:#C1D3FB;
 position:absolute;
 display:none;
 border:1px solid blue;
 padding:4px 7px;
}
div[id^="bigpick"] {
 position:absolute;
 opacity:0;
}
img[name="smallimg"]{
  opacity:0.6
}
</style>

<script type="text/javascript">
function setBigImage(a) {
  var id = a.id;
  var arr = a.getAttribute('data').split(',');
  var Parr = document.getElementById(arr[0]).parentNode.getElementsByTagName('p');
  for(var i=0; i<Parr.length;i++){
   if(Parr[i])Parr[i].style.display='none';
  }
  document.getElementById(arr[0]).style.display='block';
  var v=document.getElementById(arr[1]);
  v.innerHTML = v.innerHTML.replace(/#bigpick[^\s]+/img,arr[2]).replace(/#img[^\s]+/img,'#'+id);
}
function First() {
  document.getElementById("img1").click(); //При загрузке стр. кликаем первый
}
</script>

<img id="img1" name="smallimg" src="http://javascript.ru/forum/images/smilies/smile.gif" height="60px" data="p1,style,#bigpick1" onclick="setBigImage(this)" />

<img id="img2"  name="smallimg" src="http://javascript.ru/forum/images/smilies/smile.gif" height="60px"  data="p2,style,#bigpick1" onclick="setBigImage(this)" />


<img id="img3" name="smallimg" src="http://javascript.ru/forum/images/smilies/write.gif" height="60px"  data="p3,style,#bigpick2" onclick="setBigImage(this)" />

<style id="style">
#bigpickNN {
text-align:center;
opacity:1;
filter: alpha(opacity=1);
-webkit-transition:1s;
-moz-transition:1s;
-ms-transition:1s;
-o-transition:1s;
transition:1s;
}
/*Cтиль кликанутого превью*/
#imgNN {
  opacity:1.0;
  border:blue dashed 1px;
}
</style>


<div id="bigpick1">
    <img id = 'bigimg' src = "http://javascript.ru/forum/images/smilies/smile.gif"  height="390px" alt="" onload="First()"/><br />
    <div id="commentary">
<p class="hid" id="p1">ЗДЕСЬ НУЖНЫЙ ТЕКСТ 1 11111</p>
<p class="hid" id="p2">ЗДЕСЬ НУЖНЫЙ ТЕКСТ 2  2222</p>
    </div>

</div>
<div id="bigpick2">
    <img id = 'bigimg' src = "http://javascript.ru/forum/images/smilies/write.gif"  height="390px" alt="" /><br />
    <div id="commentary">
<p class="hid" id="p3">ЗДЕСЬ НУЖНЫЙ ТЕКСТ3 3333</p>
    </div>
</div>

p2,style,#bigpick1 name=

Практически то, что нужно, однако проблема с активным по умолчанию первым рисунком-превью остается :) При загрузке в галлерее должна отображаться первая большая картинка с подписью... Причем на onLoad уже висит действие и в него пихать дополнительную функцию нежелательно - галерея должна будет вызываться только на определенных страничках сайта... Можно ли как-то решить вопрос без затрагивания общего загрузчика (onLoad)?

ЗЫ: Спасибо за помощь - Вы дали мне возможность взглянуть на проблему под другим углом :)

Поправил

Супер!!! То, что нужно!!! Спасибо :thanks:

Я извиняюсь за назойливость :) А могли бы Вы немного объяснить некоторые моменты в Вашем коде (моих знаний, увы, не хватает, чтобы понять кое-какие выражения...). В частности интересуют строчки:

var arr = a.getAttribute('data').split(',');
  var Parr = document.getElementById(arr[0]).parentNode.getElementsByTagName('p');
  for(var i=0; i<Parr.length;i++){
   if(Parr[i])Parr[i].style.display='none';
  }

arr - это массив? Что такое аттрибут data? И что значит переменная i?

Если не трудно, объясните значение следующей строчки (уж слишком она заумна для меня :)):

v.innerHTML = v.innerHTML.replace(/#bigpick[^\s]+/img,arr[2]).replace(/#img[^\s]+/img,'#'+id);

Здесь, в частности, интересует почему в arr[] постоянно меняются значения.

В принципе, что и откуда берется мне понятно: первое (до цикла) - это, скорее всего, получение текста комментария (цикл, пока не совсем понял :( ), а второе - вставка картинки. Но хотелось бы услышать комментарии более продвинутого человека в этом деле :)

Еще раз спасибо :thanks: и извините за назойливость (просто хочется постичь истину :))

В data мы воткнули: id открываемого блока с текстом, id тега style,id div-блока с большой картинкой
arr - массив, образуется после применения к строке(из data) .split(',');
http://javascript.ru/String/split

Этой строкой - мы в теге style заменяем значение #bigpickNN на реальное значение id открываемого блока с большой картинкой, выпарсенного split(om) из Data кликанутого превью
(А также заменяем и id #imgNN, - на текущее id кликнутой картинки