2012-08-22 2 views
0

얘들 아 이걸로 미쳐 가고 있어요. 자바 스크립트를 사용하여 많은 어려움을 겪고 있지만, 제가 만들고있는 사이트에는 HTML 파일 만 있습니다. 나는 또한 PHP를 사용할 수 있지만 참조 할 수 있지만 포함되지 않은 별도의 파일이어야합니다. 마지막 확장자는 .html이어야합니다.자바 스크립트 날짜를 포함하는 파일 이름에서 이미지 갤러리를 만듭니다

그렇습니다. 날짜 스크립트가 들어있는 이미지 디렉토리에 날짜가 포함 된 이미지 이름을 사용한다고합니다. 예를 들어 오늘날의 오늘의 이미지는 20120822.jpg이고 연말까지 거대한 이미지 디렉토리가 있습니다. 내일의 이미지가 될 것입니다 20120823.jpg와 어제 20120821.jpg

부분은 일종의 간단했다 ..하지만 지금은 그렇게 모든 .. 모든 이미지는 이전에 표시된 전원으로 구성 갤러리를 만들 것인지 확인 현재 날짜의 파일 이름으로 이어진 이미지. 따라서 디렉토리를 읽거나 현재 이미지의 날짜 파일 이름으로 이어지는 마지막 20 개의 이미지를 생성해야합니다. 나는 이전의 20 개의 이미지 또는 무엇인가를 정착시킬 것이다.

다음은 오늘의 사진에 사용하는 코드입니다. 어떻게 그럴 수 있습니까?

<script> 


    //returns the current date in YYYYMMDDf_01.jpg format 
    function getCurrentDateString(){ 

     //make a new date object set at the current date 
     var currentDate = new Date(); 

     //get the four position year and 
     //make it a string 
     var currentYear = currentDate.getFullYear() + ""; 

     //get the zero-indexed month and add 1 
     //for the real month and make it a strintg 
     var currentMonth = (currentDate.getMonth() + 1) + ""; 

     //add a zero at the beginning if only one 
     //digit month 
     if (currentMonth.length == 1) { 
     currentMonth = "0" + currentMonth; 
     } 

     //get the current day of the month and 
     //make it a string 
     var currentDayOfMonth = currentDate.getDate() + ""; 

     //add a zero if necessary 
     if (currentDayOfMonth.length == 1) { 
     currentDayOfMonth = "0" + currentDayOfMonth; 
     } 

     return(currentYear + currentMonth + currentDayOfMonth); 
    } 

    //preload image based upon currentDate 
    var currentDateString = getCurrentDateString(); 

    var dailyImageObject = new Image(); 

     var dailyImageObjectURL = new Image(); 

    dailyImageObject.src = "http://perillotours.com/galleries/photo-of-the-day/images/" +   currentDateString + ".jpg"; 

    dailyImageObjectURL.href = "http://perillotours.com/galleries/photo-of-the-day/images/" + currentDateString + ".jpg"; 

    //called when the page loads to 
    //set the actual HTML IMG element to have the same 
    //SRC as our cached Image object 
    function showDailyImage(){ 
     document.getElementById("dailyIMGElement").src = dailyImageObject.src; 
    } 
     function showDailyImageURL(){ 
     document.getElementById("dailyIMGElementURL").href = dailyImageObjectURL.href; 
    } 

    </script> 

여기에 오늘의 사진을 표시하는 html 페이지에 삽입하는 코드가 있습니다.

<a rel="prettyphoto" id="dailyIMGElementURL"> 
    <img width="523" style="background-color: #000000;" id="dailyIMGElement" height="335" border="0" /></a> 

그래서 기본적으로 지난 20 개의 이미지로 20 번처럼 위의 코드를 반복하고 싶습니다. 아무 생각도 나는 그것을 실제로하는 방법을 생각할 수 없다. ..

어떤 도움이나 생각이라도 많이 미리 알아라!

이안

+0

코드의 'html' 부분을 jquery의'html()'... 20 번 반복문을 생성하여'dayCountDateString() '을 다양한 dayOfMonth 숫자로 호출하는 루프로 생성해야합니다 . 1,2,3,4 ... 내일, 내일 이후 등등을위한 이미지를 보여주기 위해, -1, -2, -3, -4 어제, 하루 전의 이미지를 보여주기위한 것입니다. 또한, html도 그에 맞게 수정해야합니다. 적절한 호출로 이전 및 다음 링크를 생성하기 위해'getCurrentDateString'에서 호출되는 html 생성을위한 함수를 작성할 수 있습니다. –

답변

0

코드는 그래서 당신이 jQuery를 사용하고자하는 가정, 어떤 jQuery를 참조하지 않습니다

  1. 시작 루프와 함께 - 당신은 쉽게 당신이 원하는 얼마나 많은 이미지를 정의 할 수 있습니다이 방법. 날짜 객체를 사용하면 여러 날을 뺄 때 걱정하지 않아도됩니다. (예를 사용 : http://jsfiddle.net/qH8xX/2/)를 루프에서

    var html = ""; 
    for(i = 0; i < 20; i++) { 
        html += "<li>" + i + "</li>"; 
    } 
    
    $("#gallery").html(html); 
    
  2. 를 한 날로부터 1을 빼고 다음 날짜로 저장합니다.

    var html = ""; 
    var date = new Date(); // store the current date 
    
    for(i = 0; i < 20; i++) { 
        // subtract 1 from date 
        // more here: http://stackoverflow.com/questions/1187824/finding-date-by-subtracting-x-number-of-days-from-a-particular-date-in-javascrip 
        date = new Date(date.setDate(date.getDate() - 1)); 
        html += "<li>" + i + " = " + date.toDateString() + "</li>"; 
    } 
    
    $("#gallery").html(html); 
    

3 (http://jsfiddle.net/qH8xX/3/ 예 작업). 당신의 차례 : 이제 날짜 객체를 사용하여 올바른 파일 이름으로 이미지 태그를 만듭니다. http://www.w3schools.com/jsref/jsref_obj_date.asp

관련 문제