изменить изображение на главной странице

Question

Мне необходимо менять изображение вместе с соответствующим заголовком каждые 24 часа на домашней странице Coldfusion.У меня есть около 50 изображений и подписей, и я не хочу делать это каждый день вручную.Не могли бы вы указать мне какие-либо примеры исходного кода JavaScript?Спасибо.

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

Answer 1

Я бы сделал это как решение на стороне сервера.

Было бы достаточно легко создать объект (или структуру) с отметкой времени в области приложения. При загрузке страницы сравните метку времени с текущим временем.

Если это менее 24 часов (или любого другого предела), просто используйте информацию в объекте области приложения.

Если это более 24 часов, запустите процесс, чтобы выбрать изображение и подпись, загрузить его в свой объект и установить метку времени в текущее время.

Answer 2

Попробуйте (требуется область применения), поместите его в метод onRequestStart файла APPLICATION.cfc

<cfscript>
    if( NOT structKeyExists(APPLICATION, 'homePageImage') ) {
        APPLICATION.homePageImage = structNew();
    }
    if( 
        NOT structKeyExists( APPLICATION.homePageImage, 'imageDate' )  
        OR NOT structKeyExists( APPLICATION.homePageImage, 'imageSrc')
        OR NOT isDate( APPLICATION.homePageImage.imageDate )
        OR DateDiff( "h", NOW(), APPLICATION.homePageImage.imageDate ) GT 1
    ) {
        APPLICATION.homePageImage.imageSrc = APPLICATION.Utils.getRandomImage( "/images/captions" );
        APPLICATION.homePageImage.imageDate = NOW();
    }
</cfscript>

Далее вам нужно где-то определить функцию getRandomImage (что-то вроде Utils.cfc, а затем сохранить ее в Application.Utils для повторного использования)

<cffunction name="getRandomImage" returntype="string" access="public" output="false">
    <cfargument name="directory" required="true" hint="this is the directory to select a random image from" />
    <!--- Always define a local struct to keep your variable under control --->
    <cfset var LOCAL = structNew() /> 

    <cfif NOT directoryExists( expandPath( ARGUMENTS.directory ) )>
        <cfthrow message="Directory #arguments.directory# does not exist." />
    </cfif>

    <cfdirectory action="list" name="LOCAL.imageList" type="file" directory="#expandPath( ARGUMENTS.directory )#" />
    <!--- the ceiling part will stop you from getting 0 --->
    <cfset LOCAL.targetFile = Ceiling( randRange(0, LOCAL.imageList.recordCount) ) /> 

    <cfset LOCAL.targetFileName = ARGUMENTS.directory & "/" & LOCAL.imageList.name[ LOCAL.targetFile ] />

    <cfreturn LOCAL.targetFileName />
</cffunction>

И, наконец, на вашей странице

<cfoutput>
    <img src="#APPLICATION.homePageImage.ImageSrc#" />
</cfoutput>

Answer 3

скрипт может загружать разные изображения в зависимости от дня.например, за 123 дня года скрипт скачивает 123% 50 -> 23.jpg image

document.getElementById("image_id").src = parseInt(currentTime.getTime()/(1000*60*60*24))%50+".jpg";

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

Answer 4

Вы действительно не должны делать такие вещи на стороне сервера.Если вы не планируете добавлять изображения, вы можете просто отправить текущее время (если вы не доверяете времени клиентского компьютера) и оставить все остальное на javascript.

oImages = [
  {time: '2011-01-01', img: 'path/to/image.ext', caption: "image caption"},
  ... more images ...
];

При загрузке страницы вы простосоздайте тег изображения и передайте источник на основе времени сервера:

window.onload = function(){
  for(i in oImages){
   if(oImages[i].time == "coldfusion_time") oTodayImage = oImages[i];
  }
  oImg = document.creatElement("img");
  oImg.setAttribute("title", oTodayImage.caption);
  oImg.setAttribute("src", oTodayImage.img);
  document.body.appenChild(oImg);
};

Вам просто нужно вывести время сервера вместо «coldfusion_time» в if statement и либо жестко закодировать объекты массива JavaScriptили выведите то, что вам нужно, с помощью Coldfusion.