Nano Hash - криптовалюты, майнинг, программирование

fancybox - При нажатии на изображение (большой палец), как заставить FancyBox загружать изображение большего размера / другой URL

У меня есть длинный список изображений, которые являются миниатюрами. Когда пользователь нажимает на одно из этих изображений, я хочу, чтобы fancybox загружал более крупное изображение по другому URL-адресу, чем изображение. как это сделать?

Спасибо

01.02.2011

Ответы:


1

Я не пробовал, но попробуйте сделать это так.

$("a#example1").fancybox({
    // some other options,
    'href'     : 'http://link/of/the/true/image.jpg'
});

html вот так,

<a href="#" id="example1"><img src="/link/to/thumb.jpg" /></a>

или в html, как это будет работать,

<a href="http://link/of/the/true/image.jpg" id="example1">
  <img src="/link/to/thumb.jpg" />
</a>

jquery

$("a#example1").fancybox({
    'titleShow'     : false
});
01.02.2011

2

Если бы я пытался сделать это, я бы просто сделал два изображения, оба с одинаковыми именами файлов, за исключением флага в имени файла, например -thumb AND -large в зависимости от их размера. Делая это, вы просто переключаете URL-адрес, используя следующий скрипт в качестве руководства:


<script>
var openFancyBox = function(url,w,h){ 
    $.fancybox( { 
        type: 'iframe', 
        href: url, hideOnContentClick: true, 
        showCloseButton: false, 
        overlayShow: true, 
        overlayOpacity: 0.15, 
        'scrolling': 'no', 
        centerOnScroll: true, 
        titleShow: false, '
        padding': 0, 
        'autoDimensions': false, 
        'margin': 0, 
        'width' : w, 
        'height': h 
    }); 
};
</script>

Затем вы можете создать и вызвать свой fancybox на лету:


openFancyBox('/path-to-my/image-thumb.jpg', 200, 50);
01.02.2011
Новые материалы

Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..