img 요소 속성 및 출력 값, jquery

Question

에서 개체 배열 만들기 지금 당장은 정적 URL을 사용하는 전체 화면 플러그인이 있지만 CMS로 출력하는 동적 이미지 데이터로 바꾸고 싶습니다. 페이지.

다음

<ul class="large-gallery"> 

<li> 
<a href="http://www.domain.com/urlpath34"> 
<img src="http://www.domain/imageurl351.jpg" data-full-src="http://www.domain/imageurl361.jpg" alt="Image Title 4725"> 
</a> 
</li> 

<li> 
<a href="http://www.domain.com/urlpath34"> 
<img src="http://www.domain/imageurl354.jpg" data-full-src="http://www.domain/imageurl3721.jpg" alt="Image Title 73365"> 
</a> 
</li> 

<li> 
<a href="http://www.domain.com/urlpath34"> 
<img src="http://www.domain/imageurl356.jpg" data-full-src=v"http://www.domain/imageurl3567.jpg" alt="Image Title 4635"> 
</a> 
</li> 

</ul> 

는 자바 스크립트입니다 : 내가 원하는 무엇

<script type="text/javascript">// <![CDATA[ 

     jQuery(function($){ 

      $.supersized({ 

       // Functionality 
       slide_interval   : 5000,  // Length between transitions 
            new_window    : 0, 
       transition    : 6,   // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left 
       transition_speed  : 1200,  // Speed of transition 

       // Components       
       slide_links    : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank') 
       slides     : [   // Slideshow Images 
{image : 'http://www.domain.com/manually-inputed-image-path-url-1.jpg', title : 'Some Manual Title 1', url : 'http://www.domain.com/manually-inputted-url-1'}, 
{image : 'http://www.domain.com/manually-inputed-image-path-url-2.jpg', title : 'Some Manual Title 2', url : 'http://www.domain.com/manually-inputted-url-2'}, 
{image : 'http://www.domain.com/manually-inputed-image-path-url-3.jpg', title : 'Some Manual Title 3', url : 'http://www.domain.com/manually-inputted-url-3'}, 
{image : 'http://www.domain.com/manually-inputed-image-path-url-4.jpg', title : 'Some Manual Title 4', url : 'http://www.domain.com/manually-inputted-url-4'}, 
{image : 'http://www.domain.com/manually-inputed-image-path-url-5.jpg', title : 'Some Manual Title 5', url : 'http://www.domain.com/manually-inputted-url-5'}, 
{image : 'http://www.domain.com/manually-inputed-image-path-url-6.jpg', title : 'Some Manual Title 6', url : 'http://www.domain.com/manually-inputted-url-6'},            ] 

      }); 
     }); 
// ]]></script> 

이 할 수 여기에

은 CMS에서 HTML 출력의 샘플입니다.

자바 스크립트에서이 코드를 바꿔주고 싶습니다.

{image : 'http://www.domain.com/manually-inputed-image-path-url-1.jpg', title : 'Some Manual Title 1', url : 'http://www.domain.com/manually-inputted-url-1'}, 
{image : 'http://www.domain.com/manually-inputed-image-path-url-2.jpg', title : 'Some Manual Title 2', url : 'http://www.domain.com/manually-inputted-url-2'}, 
{image : 'http://www.domain.com/manually-inputed-image-path-url-3.jpg', title : 'Some Manual Title 3', url : 'http://www.domain.com/manually-inputted-url-3'}, 
{image : 'http://www.domain.com/manually-inputed-image-path-url-4.jpg', title : 'Some Manual Title 4', url : 'http://www.domain.com/manually-inputted-url-4'}, 
{image : 'http://www.domain.com/manually-inputed-image-path-url-5.jpg', title : 'Some Manual Title 5', url : 'http://www.domain.com/manually-inputted-url-5'}, 
{image : 'http://www.domain.com/manually-inputed-image-path-url-6.jpg', title : 'Some Manual Title 6', url : 'http://www.domain.com/manually-inputted-url-6'}, 

는 다음과 같이 할 수 있습니다 :

for each bigImage, output this 
{ image : 'bigImage.imgUrl', title : ' bigImage.title ', url : ' bigImage.linkUrl '}, 

내가 bigImages에 대한 객체의 배열을 만드는 방법에 대해 생각하고 bigImage 각 개체를 호출했다. 하지만 정말 최선의 방법은 확실하지 않으며, 플러그인 스크립트 내에서 작동하도록 포맷하는 방법도 궁금합니다.

Answer 1

슬라이드하도록 입력으로서 IMG 요소의 컬렉션을 취하여 출력으로서 원하는 어레이를 리턴하는 함수이다.

나는 이런 식으로 뭔가 작성할 수 있습니다

var slidesArray = function() { 

    var array = []; 

    $("ul.large-gallery li img").each(function() { 

    var arrayItem = { image: $(this).attr('src'), title: $(this).attr('alt'), url: $(this).parent('a').attr('href') }; 

    array.push(arrayItem); 

    }); 

    return array; 
} 

을 그리고 당신이 당신의 구성 해시 말할 수있다 :

slides: slidesArray() 

Answer 2

var slds = []; 

$('.large-gallery a').each(function(i,obj){ 
    var $this = $(obj), 
     $thisImg = $this.find('img'); 
    slds.push({ 
     image: $thisImg .data('full-src'), 
     title: $thisImg .prop('title'), 
     url: $this.prop('href') 
    }) 
}); 

이어서 단순히 공급 slds 소스가 필요한 것을

slides: slds