JQuery ролловер с некоторым PHP - PullRequest
Новая
       7

JQuery ролловер с некоторым PHP

1 голос
/ 26 сентября 2010

Я пытаюсь заставить некоторые ролловеры работать с использованием jQuery.Проблема в том, что источник изображения должен быть получен с использованием некоторого php-кода.

Если я делаю это встроенным образом, как это с javascript, это работает: 

<a href="<?php the_permalink(); ?>"
   <?php $thumburl = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
   onmouseover="document.roll<?php the_ID(); ?>.src='<?php thumbGen($thumburl,300,0,1,0,0); ?>'"
   onmouseout="document.roll<?php the_ID(); ?>.src='<?php thumbGen($thumburl,300,0,1,0,1); ?>'"
   <img src="<?php thumbGen($thumburl,300,0,1,0,1); ?>" name="roll<?php the_ID(); ?>"/>
</a>

$ thumburl переменная именно то, что;URL конкретной миниатюры.Бит thumbgen делает некоторые преобразования размера и цвета.Когда они вместе, они дают мне черно-белые и цветные изображения, которые меняются местами.Я использую WordPress, поэтому я должен использовать php, а не просто указывать src для изображения, потому что преобразование размера и цвета выполняется автоматически для пользователя.

Первый вопрос, делает ли встроенный код таким плохим?Во-вторых.Я изо всех сил пытаюсь написать функцию jQuery для ролловера из-за php.Я полагаю, что это будет выглядеть так: 

$(document).ready(function() {
   $('.project img').hover(
    funcation(){
    this.src = '<?php thumbGen($thumburl,300,0,1,0,1); ?>';},
    function (){
    this.src = '<?php thumbGen($thumburl,300,0,1,0,1); ?>';});

Но я не знаю, где это можно включить:даже объединить php и jQuery в одном?

Спасибо

1 Ответ

0 голосов
/ 26 сентября 2010

Вы можете немного упростить PHP следующим образом: 

<a href="<?php the_permalink(); ?>"
   <?php $thumburl = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
   <img src="<?php thumbGen($thumburl,300,0,1,0,1); ?>" data-hover="<?php thumbGen($thumburl,300,0,1,0,0); ?>" />
</a>

Затем сделайте что-то подобное в jQuery, используя атрибут data : 

$(function() {
   $('.project img').each(function() { 
     $.data(this, 'orig', this.src); 
   }).hover(function() {
     this.src = $(this).attr('data-hover');
   }, function () { 
     this.src = $.data(this, 'orig');
   });
});

Для этого нужно сохранить исходные src для каждого изображения, используя $.data(), а затем при наведении мыши выбрать новый атрибут src, который мы сохраняем в data-hover (атрибут данных, который мы создали), и при зависании мы получаем этот оригинальный src и восстанавливаем его.

...