наложение увеличительного стекла на изображение в WordPress - PullRequest
Новая
       8

наложение увеличительного стекла на изображение в WordPress

1 голос
/ 28 февраля 2012

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

Я искал разные файлы в WordPress, и моя проблема в том, что я просто не могу добавить <span class="roll" ></span> внутри ссылки, с изображением.

Если кто-нибудь знает, как это сделать, скажите, пожалуйста. : -)

Спасибо.

Я положил это в footer.php 

<script>
//$('a.image:link').prepend('<span class="roll"></span>');
$('.gallery-icon a:link').each(function() {
     $(this).prepend('<span class="roll"></span>');
     // OR
     //$(this).wrapInner('<span class="roll"></span>');
});
</script>

<script>
$(function() {
// OPACITY OF BUTTON SET TO 0%
$(".roll").css("opacity","0");

// ON MOUSE OVER
$(".roll").hover(function () {

// SET OPACITY TO 70%
$(this).stop().animate({
opacity: .7
}, "slow");
},

// ON MOUSE OUT
function () {

// SET OPACITY BACK TO 50%
$(this).stop().animate({
opacity: 1
}, "slow");
});
});
</script>

и это в CSS. 

span.roll {
    background:url(images/zoom.png) center center no-repeat #000;
    height: 120px;
    position: absolute;
    width: 150px;
    z-index: 7000;
    -webkit-box-shadow: 0px 0px 4px #ff0066;
    -moz-box-shadow: 0px 0px 4px  #ff0066;
    box-shadow: 0px 0px 4px  #ff0066;
}

Когда я смотрю код моего веб-разработчика, он выглядит так: image-code

Словно WordPress перезаписывает все мои CSS и т. Д.

1 Ответ

2 голосов
/ 28 февраля 2012

как насчет использования jQuery для добавления (предварения) диапазона к вашей ссылке?не видя ваш код, вот маленький тизер 

$('.IMAGELINK').each(function() {
     $(this).prepend('<span class="roll"></span>');
     // OR
     $(this).wrapInner('<span class="roll"></span>');
});

с отключенным javascript, функция масштабирования будет отключена, и поэтому этот диапазон не будет добавлен в код.

...