Исправим это!

Рассмотрим сам код:

$(".chimg").click(function () {
var img = $(this).find("img");
var hid = $(this).find("input");
var src = img.attr("src");
var tmp = hid.val();
$(this).fadeOut("slow", function () {
img.attr("src", tmp);
});
$(this).fadeIn("slow");
hid.val(src);
});

Код html для смены картинок:

<p class="chimg"><img src="1.gif" border="0" alt="" />
<input type="hidden" value="2.gif" /></p>

Немного пояснений. На все элементы с классом chimg «навешивается» обработчик click (в нашем примере это <p>). Теперь при нажатии на такой элемент ищется img (наша картинка) и скрытое поле hidden (где мы храним путь к второй картинке). Далее в переменные src и tmp мы сохраняем путь текущей видимой картинки и путь к картинке которую нужно отобразить. Затем запускается эффект fadeOut который плавно скрывает картинку после чего перезаписывает ее путь на путь к новой с ранее сохраненной переменной и запускается эффект fadeIn который плавно показывает уже новую картинку и в скрытое поле hidden заносим путь старой картинки для дальнейшего использования.

p.s. Простите, если пояснение вышло уж сильно дотошным…

Проще, как всегда посмотреть пример «Плавной смены картинок в нескольких местах»

Например, у нас есть несколько картинок с одинаковым классом.

<img class="myimg" alt=" " src="1.png" width="95" height="95"/>
<img class="myimg" alt=" " src="2.png" width="95" height="95"/>
<img class="myimg" alt=" " src="3.png" width="95" height="95"/>
<img class="myimg" alt=" " src="4.png" width="95" height="95"/>

При наведении мышки на одну из этих картинок она должна, немного, увеличится, а остальные уменьшиться.

Для решения этой задачки в jQuery можно написать следующее:

var imgid;
$(".myimg").mouseenter(function(){
imgid = this.id;
$(".myimg").each(function(){
if(this.id==imgid) $(this).stop(false,true).animate({width: "100px",height: '100px'}, 300 );
else $(this).stop(false,true).animate({width: "90px",height: '90px'}, 300 );
});
});

В результате, при наведении мышки на картинку, мы сохраняем ее id во временную переменную и затем циклом проходим по всем картинкам с классом myimg. Если текущий id картинки в цикле равен id который во временной переменной то увеличиваем размеры картинки, иначе – уменьшаем.

Одним из достоинств есть его вес в упакованном виде - всего 2кб.

Подключаем так:

<script src="jquery.pngFix.js" type="text/javascript"></script>

И используем на страничке так:

 <script type="text/javascript">
$(document).ready(function(){
$(document).pngFix();
});

После этого png картинки в IE начнут отображаться корректно.

$('img').error(function() {
$(this).remove();
});

Удаление таким образом не загрузившихся картинок избавит вас от лишних неудобств!

Ниже приведу список веб-сервисов для генерации «иконки загрузки» данных. Преимущество некоторых таких сервисов, это моментальное получение выбранного индикатора загрузки после выбора цвета, фона и стиля нужной «иконки».

http://www.preloaders.net/
http://www.ajaxload.info/
http://www.loadinfo.net/
http://www.webscriptlab.com/
http://www.chimply.com/

По ходу нахождения новых похожих ресурсов, буду пополнять список!

Или добавляйте свои, в комментариях!

Смотрим, сжатие png «punypng»

Для начала подключаем сам plugin:

 <script type="text/javascript" src="instant.js"></script>

А дальше используем его как класс в картинках, например:

Чтобы получить такую картинку (рис.1), задаем класс class="instant icolorA9E5A9 historical", где instant – сам плагин, icolorA9E5A9 – цвет рамки, historical – стиль рамки.

рис.1

Для такой вот картинки (рис.2) будет так: class="instant ishadow80", ishadow80 – степень прозрачности тени.

рис.2

Чтобы закруглить углы (рис.3), пишем следующее: class="instant nocorner", где nocorner – закруглить углы картинки.

рис.3

А вот что будет (рис.4), если вызвать только instant.

рис.4

Размер такого плагина 25 КБ, но как картинку обрабатывает заметно…

Вот пример повернутых картинок с закругленными рамками.

Скачать плагин можно на оф.сайте или тут.

Суть плагина заключается в плавном увеличении картинки при наведении на нее мышкой.

Плагин принимает такие параметры:
widthUp – максимальная ширина картинки (по умолчанию 700);
widthDown – минимальная ширина картинки (по умолчанию 200);
speeadUp – время, за которое достигнем максимальной ширины (по умолчанию 500);
speeadDown –  время, за которое достигнем минимальной ширины (по умолчанию 200).

Подгружаем, как всегда, сначала jquery, затем плагин bigimg:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src=" jquery.bigimg.js"></script>

Используем тоже просто:

<script type="text/javascript">
$(document).ready(function() {
$(".immg").bigimg({widthUp: 700, widthDown: 300, speeadUp: 500, speeadDown: 200});
});
</script>

<img class="immg" src="IMG1.jpg" width="300" />
<img class="immg" src="IMG2.jpg" width="300" />

Собственно, вот и пример плагина для увеличения изображений.

Скачать плагин jquery.bigimg.js

Все просто и доступно. Может кому-то понадобится… как мне. Удачи!

Для ее включения достаточно в php.ini убрать комментарий в виде «;» перед extension=php_gd2.dll и перезагрузить веб-сервер.
Функция может уменьшать изображения таких форматов: jpg, gif, png и bmp.

Ну, и самое главное - это пример:

<?php

function resize ($filename, $size)
{
$pref = 'mini_';
$img = strtolower(strrchr(basename($filename), "."));
$imgname = basename($filename);
$formats = array('.jpg', '.gif', '.png', '.bmp');
if (in_array($img, $formats))
{
list($width, $height) = getimagesize($filename);
$new_height = $height * $size;
$new_width = $new_height / $width;
$thumb = imagecreatetruecolor($size, $new_width);
switch ($img)
{
case '.jpg': $source = @imagecreatefromjpeg($filename); break;
case '.gif': $source = @imagecreatefromgif($filename); break;
case '.png': $source = @imagecreatefrompng($filename); break;
case '.bmp': $source = @imagecreatefromwbmp($filename); break;
}
imagecopyresized($thumb, $source, 0, 0, 0, 0, $size, $new_width, $width, $height);
switch ($img)
{
case '.jpg': imagejpeg($thumb, $pref.$imgname); break;
case '.gif': imagegif($thumb, $pref.$imgname); break;
case '.png': imagepng($thumb, $pref.$imgname); break;
case '.bmp': imagewbmp($thumb, $pref.$imgname); break;
}
}
else return 'Error';
@imagedestroy($thumb);
@imagedestroy($source);
return $imgname;
}

echo '<img src="mini_'.resize('http://www.webnotes.com.ua/demo/img-resize/test.jpg',200).'" />';

?>

В строке 35 выводим изображение, где в пути источника «src» вызываем функцию resize с двумя параметрами: полным путем к картинке и шириной выходного изображения.

В результате работы функции будет создано сжатое изображение с именем mini_test.jpg, и функция вернет имя входящего изображения - test.jpg. Вот для этого мы и подставляем префикс «mini_» в «src». Конечно, можно было бы и в функцию подставить префикс и возвратить новое имя файла, но мне так было удобней.

Рассматривать полностью функцию я не буду, так как там нет ничего сложного и в интернете похожего хватает.

Рабочий пример: уменьшения картинки на php.

Удачи!

Например, у нас есть набор картинок, размещаем их на страничке в диве с id=”holder_images” ,и размещаем контейнер <div id="carousel"></div> для самой карусели!

<div id="carousel"></div>

<div id="holder_images">
<img class="link" title="to a web address" src="images/jquery_plugins.png" alt="jquery_plugins" width="500" height="375" longdesc="http://jquery.com/" />
<img title="sinatra" src="images/sinatra_beach_1.jpg" alt="sinatra_beach_1" width="500" height="375" />
<img title="sinatra" src="images/sinatra_beach_2.jpg" alt="sinatra_beach_2" width="500" height="375" />
<img title="sinatra src="images/sinatra_beach_3.jpg" alt="sinatra_beach_3" width="500" height="375" />
<img title="sinatra" src="images/sinatra_beach_4.jpg" alt="sinatra_beach_4" width="500" height="375" />
<img title="sinatra" src="images/sinatra_beach_5.jpg" alt="sinatra_beach_5" width="500" height="375" />
<img title="sinatra" src="images/sinatra_beach_6.jpg" alt="sinatra_beach_6" width="500" height="375" />
<img title="sinatra" src="images/sinatra_beach_7.jpg" alt="sinatra_beach_7" width="500" height="375" />
<img title="sinatra" src="images/sinatra_beach_8.jpg" alt="sinatra_beach_8" width="500" height="375" />
</div>

При нажатии на картинку открывается ее просмотр. Для перехода по ссылке при нажатии  достаточно к картинке дописать class="link" и longdesc=”http://jquery.com/” с адресом перехода, строка 04.

Подгружаем jQuery, сам плагин 3D Image Carousel и еще одну библиотеку Tween для работы с анимацией, цветами и т.д.

<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/Tween.js"></script>
<p class="MsoNormal"><script type="text/javascript" src="jquery/jquery.carousel3d.js"></script>

Делаем невидимым контейнер с картинками с помощью стиля

<style type="text/css" title="text/css">
#holder_images { display: none; }
</style>

Ну и прописываем скрипт, для каждого по своему… смотрим примеры!

Карусель с крайними полупрозрачными картинками:

Карусель с кнопками управления:

Бесконечная карусель:

Управление мышкой:

Плоская карусель:

Карусель в перспективе:

Карусель с описанием при просмотре картинки:

Скачать все, одним архивом карусель картинок.