Использование ColdFusion для вывода миниатюр на лету в неупорядоченный список jCarousel

Question

Я использую jCarouselLite, чтобы показывать эскизы страниц рекламы. Когда вы нажимаете на миниатюру, мой код заполняет div под каруселью большим изображением. Все это прекрасно работает с жестко закодированными миниатюрами в списке.

Что мне нужно знать, так это лучший способ создания миниатюр из больших изображений, чтобы мой клиент мог загружать только большие изображения, и я мог контролировать размер миниатюрных изображений?

Является ли более эффективным создание миниатюр при загрузке и сохранение их в каталоге миниатюр, или есть ли способ, позволяющий ColdFusion создавать миниатюры на лету из большего изображения и заполнять мой список миниатюр без необходимости сохранять миниатюру на сервере?

Я использую CF8. Сейчас все жестко закодировано, но в будущем на странице будет сделан вызов CFC, который вернет информацию href.

Мой JQuery:

$(document).ready(function(){
//Capture the click from the thumbnail to set the large image //
$('.image_thumb ul li').click(function(e){
    e.preventDefault();
    var imgSource = $(this).find('a').attr('href');
    var imgNow = $('.main_image img').attr('src');
    $('.main_image img').attr('src', imgSource);
    //alert(imgSource + " And the main image Now is " + imgNow);

});

//Initiate jCarouselLite //
$(function() {
    $(".image_thumb").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev",
        circular: false,
        easing: "bounceout",
        speed: 1000
    });
});

//End Doc Function
});

Моя страница:

<div id="thumbs">                   
<div class="image_thumb">
<button class="prev">&lt;</button>
<button class="next">&gt;</button>
<ul>

<!-- add images to each ot the list items -->
    <li>
        <a href="pg1.jpg"><img src="pg1_t.jpg" alt="The Biggest Sale" title="The BIGGEST Sale" /></a>
    </li>
    <li>
        <a href="pg2.jpg"><img src="pg2_t.jpg" alt="The Biggest Sale" title="The BIGGEST Sale" /></a>
    </li>
    <li>
        <a href="pg3.jpg"><img src="pg3_t.jpg" alt="The Biggest Sale" title="The BIGGEST Sale" /></a>
    </li>
    <li>
        <a href="pg4.jpg"><img src="pg4_t.jpg" alt="The Biggest Sale" title="The BIGGEST Sale" /></a>
    </li>
    <li>
        <<a href="pg5.jpg"><img src="pg5_t.jpg" alt="The Biggest Sale" title="The BIGGEST Sale" /></a>
    </li>
    <li>
        <a href="pg6.jpg"><img src="pg6_t.jpg" alt="The Biggest Sale" title="The BIGGEST Sale" /></a>
    </li>
</ul>
</div>
</div>


<ul id="list1">
<div class="main_image">
<!-- Don't forget to add the first image here! -->
<img  src="pg1.jpg" alt="The BIGGEST Sale" />
</div>
</ul>

Answer 1

Лучший подход - создать уменьшенный эскиз при загрузке, поскольку изменение размера требует значительных ресурсов.

Вы можете использовать для этого:

<cfimage action=resize" source="/path/to/file.ext" 
  destination="/path/to/thumbnail-file.ext" height="25%" width="25%"/>    

Если вы не хотите писать миниатюру для изменения размера, а затем:

<cfimage action=resize" source="/path/to/file.ext" 
  height="25%" 
  width="25%" 
  name="oResizedImage"/>    
<cfimage action="writetobrowser" source="#oResizedImage#"/>

Если вы воспользуетесь этим последним подходом, вы на самом деле получите данные изображения в качестве ответа, а не href.