Возможно ли добавить ссылку на изображение, которое отображается в slimbox?

#javascript #jquery #image #href #slimbox

#javascript #jquery — jquery — запрос #изображение #href #слимбокс #jquery #slimbox

Вопрос:

У меня есть галерея изображений, и я использую slimbox в ней. Я хочу знать, возможно ли добавить ссылку на изображение, которая отображается после щелчка / наведения курсора мыши на изображение в галерее, потому что я смог добавить ссылку в заголовок / caption.

 <a rel='slimbox' href="images/img2.jpg" title="amp;<a href=amp;quot;http://www.google.comamp;quot; amp;>Googleamp;</aamp;>">
   <img class="cloudcarousel" src="images/img1.jpg" width="128" height="164" alt=""  />
</a>

1. Что вы подразумеваете под «возможно добавить ссылку на изображение»? Ссылка в виде текста или что-то, что вы можете щелкнуть, чтобы перейти к этой ссылке?

2. Чего я хочу, так это того, что когда я нажимаю ‘img2.jpg «Я буду перенаправлен на определенную страницу.

Ответ №1:

ДА. Вы можете добавить заголовок к каждому изображению. Но вы не можете добавить ссылку на изображение напрямую. Попробуйте добавить ссылку в заголовок, как в демонстрации Slimbox. Пожалуйста, проверьте источник. Вы можете получить какую-нибудь идею для настройки.

 <script type="text/javascript">//<![CDATA[
    window.addEvent("domready", function() {
        if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
            $$("a[href^=http://www.flickr.com/photos/] > img:first-child[src]").getParent().slimbox({
                loop: true,
                initialWidth: 1024,
                initialHeight: 768,
                overlayOpacity: 0.6,
                overlayFadeDuration: 200,
                resizeDuration: 1000,
                resizeTransition: Fx.Transitions.Elastic.easeOut,
                counterText: "This is image <strong>{x}</strong> on a total of <strong>{y}</strong> in this fabulous Flickr image gallery",
                previousKeys: [37, 80, 16],
                nextKeys: [39, 78, 17],
            }, function(el) {
                return [el.firstChild.src.replace(/_[mts].(w )$/, ".$1"),
                    (el.title || el.firstChild.alt)   '<br />Visit the <a href="'   el.href   '">Flickr page</a> for this picture.'];
            });
        }
        try {
            _gat._getTracker("UA-760577-1")._trackPageview();
        } catch(e) {}
    });
//]]></script>

<h2>Customization</h2>

    <p>You can change every parameter of Slimbox and make it work with any kind of link or element.<br />

    Below is an example of integration with Flickr links and custom options.</p>

    <p><a href="http://www.flickr.com/photos/14516334@N00/345009210/"><img src="http://farm1.static.flickr.com/159/345009210_1f826cd5a1_t.jpg" alt="A nice bee." /></a><a href="http://www.flickr.com/photos/alphageek/233472093/" title="Keyboard navigation is also customized here so you can use the Shift and Ctrl keys to navigate between images. Also, navigating to the next image will bring you back to the first one (loop option)."><img src="http://farm1.static.flickr.com/85/233472093_1f1d235e7b_t.jpg" alt="Flowers" /></a></p>