Ссылка появляется на странице?

Question

<li><a href="#"><img src="img/example.jpg"></a></li> 

Таким образом, приведенный выше код является ссылкой на изображение. Я пытаюсь получить это, когда пользователь нажимает на это изображение, а не выводит их на другую страницу для контента. Это откроет коробку с содержимым, содержащую все на одной странице? кто-нибудь знает, как вы можете это сделать?

Благодаря

Answer 1

Неправильно, вы могли бы сделать что-то подобное.

Скрыть содержимое, которое хотите отобразить, с помощью css.

При щелчке добавить класс, чтобы скрыть скрытый контент на просмотр.

вот JS fiddle

CSS

.contentBox { 
display:block; 
position:absolute; 
top:0; 
left:0; 
width:100%; 
height:100%; 
color:#fff; 
background: rgba(0,0,0, 0.7); 
-moz-transform:translateX(-100%) translateY(0px); 
-webkit-transform:translateX(-100%) translateY(0px); 
-o-transform:translateX(-100%) translateY(0px); 
-ms-transform:translateX(-100%) translateY(0px); 
transform:translateX(-100%) translateY(0px); 
-webkit-transition:200ms ease; 
-moz-transition:200ms ease; 
-ms-transition:200ms ease; 
-o-transition:200ms ease; 
transition:200ms ease; 
} 

.slideLeft { 
-moz-transform:translateX(0px) translateY(0px); 
-webkit-transform:translateX(0px) translateY(0px)!important; 
-o-transform:translateX(0px) translateY(0px); 
-ms-transform:translateX(0px) translateY(0px); 
transform:translateX(0px) translateY(0px)!important; 
} 

разметки

<img class="clickthis" src="http://i.imgur.com/LULHwuJ.jpg" /> 

<div class="contentBox"> 
    The Content 
</div> 

JS

$('.clickthis').on('click', function(){ 
    $('.contentBox').addClass('slideLeft'); 
}); 

Answer 2

Вы можете создать DIV, который имеет начальное значение CSS видимости: скрытый, а затем использовать Javascript или JQuery, чтобы изменить значение «видимым» на событие щелчка.

$('#yourpicturelink').on('click', function(){ 
    $('#hiddendiv').css('visibility', 'visible'); 
} 

, который может быть расширен в большей степени функции переключения, но он должен получить вы на правильном пути

Answer 3

это звучит, как вы хотите сделать что-то вроде этого

<li><a href="http:/blahblah.com" target="_blank" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=320,height=568');return false;"><img src="img/example.jpg"></a></li> 

Answer 4

Что-то вроде это то, что вы хотите. Это очень базовый, и у него нет логики для закрытия коробки или стиля для коробки, но, надеюсь, вы получите эту идею.

В принципе, у вас есть div с полным размером изображения, которое вы хотите показать, которое скрыто по умолчанию с помощью css. Затем в видимом документе у вас есть изображение, которое показывает окно с использованием jQuery при нажатии.

$(function() { 
 
    $(".clickable").click(function() { 
 
    $("#box").show(); 
 
    }); 
 
});

img.clickable { 
 
    cursor: pointer; 
 
    width: 10%; 
 
    height:10%; 
 
} 
 

 
div#box { 
 
    position: absolute; 
 
    display: none; 
 
    top: 0; 
 
    left: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img class="clickable" src="http://i.imgur.com/LULHwuJ.jpg" /> 
 

 
<div id="box"> 
 
    <img src="http://i.imgur.com/LULHwuJ.jpg" /> 
 
</div>

Или, в качестве альтернативы, вы можете просто узнать, как использовать библиотеки уже закодированные для вас для достижения этой цели. Посмотрите на комментарий @Nillervision для некоторых примеров.