C # / WPF: отображать изображения как LightBox в jQuery? - PullRequest
Новая
       16

C # / WPF: отображать изображения как LightBox в jQuery?

3 голосов
/ 18 ноября 2009

Кто-нибудь когда-нибудь пытался создать jQuery "LightBox", например "Popup" (WPF UserControl) для отображения изображений? Смотрите эту страницу для примера: http://www.huddletogether.com/projects/lightbox2/

Спасибо! * * 1004

Ответы [ 2 ]

9 голосов
/ 18 ноября 2009

Вот сайт, который, кажется, сделал это, но это только версия 0.5 и может значительно измениться до 1.0:
http://leandrovieira.com/projects/jquery/lightbox/#

Это должно быть то, что вы ищете, и вот пример их кода для реализации: 

$(function() {
    $('#gallery a').lightBox({fixedNavigation:true});
});

Надеюсь, это поможет,

Спасибо!

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

Извините, что я не совсем понял, о чем вы говорите в первой версии вашего вопроса. Вот обновленный ответ (с кодом / источником) на ваш вопрос.

Сначала я создал элемент управления, который будет действовать как модальное диалоговое окно, которое отображает все на заднем плане. Затем я добавил возможность добавить туда картинку, а также добавить комментарий к каждой картинке. Вот изображения конечного продукта:

Первое изображение загружено: Первое изображение загружено http://img682.imageshack.us/img682/8941/firstpictureopen.jpg

Второе изображение исчезает: Второе изображение исчезает http://img5.imageshack.us/img5/3172/secondpicturefading.jpg

Второе изображение загружено: Второе изображение загружено http://img682.imageshack.us/img682/5404/secondpictureopen.jpg

Я также добавил анимацию для изменения размера изображений, как это делает проект Lightbox. Я добавил возможность иметь кнопки «Вперед» и «Назад», клавиши ускорения, управление стрелками «Вперед» и «Назад» и выход для выхода. Я думаю, что я захватил то, что вы ищете в этом контроле.

Как обычно, я загрузил полный исходный код в Google Code для вашей загрузки.

Прямая ссылка на zip-файл находится здесь:
http://stackoverflow -answers-by-scott.googlecode.com / файлы / 1755872.zip

Надеюсь, это поможет,

Спасибо!

4 голосов
/ 19 ноября 2009

Дублирование функциональности, с которой вы связаны, абсолютно тривиально в WPF. Просто:

  1. Создайте UserControl с одним ItemList свойством типа IEnumerable<ImageSource>
  2. Добавить Popup к UserControl
  3. Добавьте Grid к Popup, который размещает LightBox так, как вы хотите, включая панели для Image, TextBlock и Button
  4. Добавьте StoryBoard, который вызывается событием Loaded, которое оживляет изменения.
  5. Используйте EventTrigger, чтобы установить для свойства Popup s IsOpen значение false при нажатии кнопки
  6. Привязать Image.Source к {Binding ItemList/}, чтобы показать текущий элемент в ItemList
  7. Добавьте Background="Transparent" прямоугольник с каждой стороны Grid, который запускает код, чтобы изменить текущий элемент в ItemList
  8. При желании также повторите BeginStoryboard при изменении текущего элемента
...