lightbox Описание на правой стороне картинки?

Question

У меня возникла проблема с попыткой изменить способ отображения описания, я не хочу, чтобы он отображался ниже изображения, потому что информация была большой, поэтому я хотел показать рядом с изображением, но он всегда дает мне ошибку, я спросил поддержка плагина, и у меня нет реплик, которые я искал в googled, но не повезло, я даже попытался найти еще один плагин, который поддерживает описания справа от изображения, но не повезло, я использовал этот плагин

http://www.huddletogether.com/projects/lightbox2/

http://www.sabayafrah.com/secure/

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

обновление # 1 i добавлено в css #imageDataContainer{ floating:right, и это действительно сработало, но теперь я хотел его поднять.

Answer 1

Вам необходимо изменить файл Lightbox.css. Ссылка, которую вы указали, указывает на файл JavaScript.

Я думаю, что вы хотите, чтобы заголовок изображения отображался в правом нижнем углу и кнопка закрытия внизу слева? Если да, то вам необходимо изменить Lightbox.css следующим образом:

• Изменить свойства float и text-direction для #imageDetails направо

#imageData #imageDetails{ width: 70%; float: right; text-align: right; }

• изменить float свойство для #bottomNavClose в левый

#imageData #bottomNavClose{ width: 66px; float: left; padding-bottom: 0.7em; outline: none;}

РЕДАКТИРОВАТЬ

Эти изменения будут отображаться близкий изображение заголовка & в верхней правой части - на одном уровне с верхней части изображения.

В Lightbox.js файле:

Вы должны переключиться вокруг секций строитель узлов, так что imageDataContainer находится на вершине. Таким образом, от линии 134 до 163 теперь должны смотреть этот этот

objBody.appendChild(Builder.node('div',{id:'lightbox'}, [ 
      Builder.node('div', {id:'imageDataContainer'}, 
     Builder.node('div',{id:'imageData'}, [ 
      Builder.node('div',{id:'imageDetails'}, [ 
       Builder.node('span',{id:'caption'}), 
       Builder.node('span',{id:'numberDisplay'}) 
      ]), 
      Builder.node('div',{id:'bottomNav'}, 
       Builder.node('a',{id:'bottomNavClose', href: '#' }, 
        Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage }) 
       ) 
      ) 
     ]) 
    ), 
    Builder.node('div',{id:'outerImageContainer'}, 
     Builder.node('div',{id:'imageContainer'}, [ 
      Builder.node('img',{id:'lightboxImage'}), 
      Builder.node('div',{id:'hoverNav'}, [ 
       Builder.node('a',{id:'prevLink', href: '#' }), 
       Builder.node('a',{id:'nextLink', href: '#' }) 
      ]), 
      Builder.node('div',{id:'loading'}, 
       Builder.node('a',{id:'loadingLink', href: '#' }, 
        Builder.node('img', {src: LightboxOptions.fileLoadingImage}) 
       ) 
      ) 
     ]) 
    ) 
])); 

• В строке 303 закомментируйте следующую строку:

  this.imageDataContainer.setStyle({ width: widthNew + 'px' });

Тогда в Lightbox.CSS файл, который нужно изменить, чтобы #imageDataContainer:

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; float:right; background-color: #fff; overflow: auto; width:25%; height:100%; }

Это будет отображать изображение, как это: