이 jQuery 도구를 사용하지 않았습니다. 하지만이 도구는
<div id="products">
<img src="http://static.flowplayer.org/img/commerce/free.png" alt="Free version" />
<img src="http://static.flowplayer.org/img/commerce/commercial.png" alt="Commercial version" />
<img src="http://static.flowplayer.org/img/commerce/multidomain.png" alt="Multidomain version" />
</div>
이 도구는 사업부 내에서 IMG를 찾을 것 구조를 필요로한다고 생각합니다 (다시, 나는 코드를 보지 못했다을, 그래서 이것은 가정입니다). 많은 jQuery 플러그인에는 특정 형식이 필요합니다.
내가 이런 짓을 했을까 :
<div id="products">
<img src="http://static.flowplayer.org/img/commerce/free.png" alt="Free version" id="image1" />
<img src="http://static.flowplayer.org/img/commerce/commercial.png" alt="Commercial version" id="image2" />
<img src="http://static.flowplayer.org/img/commerce/multidomain.png" alt="Multidomain version" id="image3" />
</div>
각 태그에 ID를 추가. 나는 그것을 시도하고 플러그인을 깰 것으로 나타나지 않습니다.
그런 다음 자바 스크립트를 사용하여 리디렉션에 이미지의 클릭을 결합 (:) 끔찍한 명명 규칙을 실례) :
$("#image1").click(function() {
window.location = 'http://www.google.co.za';
});
$("#image2").click(function() {
window.location = 'http://www.google.co.za/somwhereelse';
});
$("#image3").click(function() {
window.location = 'http://www.google.co.za/helloworld';
});
희망 도움이
편집
에 귀하의 질문에 대답하려면 페이지로드시 두 번째 이미지의 내용을 표시합니다. 다음 해결책이 있습니다. 이것은 나에게 해결 방법과 같은 느낌이지만, 잘하면 그것이 작동합니다.
페이지로드에서 flowplayer는 인라인 스타일을 사용하는 첫 번째 이미지를 제외하고 모든 이미지를 숨 깁니다.
그래서 우리가해야 할 일은 첫 번째 이미지에서이 스타일을 제거하고 두 번째 이미지에 추가하는 것입니다. 이 작업은 페이지로드시 한 번만 발생해야하므로 document.ready 함수에 추가해야 할 필요가 있음을 기억하십시오.
//make the display attribute of the style none. This will render it invisible
$("#free").css('display','none');
//make the display attribute of the style block (as what Flowplayer does)
$("#commercial").css('display','block');
한 번만 발생하면 FlowPlayer 기능이 마우스 오버시에 정상적으로 시작됩니다.
도움을 주셔서 감사합니다. 첫 번째 그림의 컨텍스트 대신 데모 페이지를 열 때 두 번째 그림의 "컨텍스트"가 표시되도록하는 방법에 대한 아이디어가 있습니까? –
수정 사항을 참조하십시오. 나는 당신이 찾고있는 것을 당신에게주고 있기를 바랍니다. – Kamal
다시 한번 감사드립니다 - 두 번째 조언도 잘 작동하고 있습니다. 두려움, 이것은 나의 마지막 질문이었습니다 ;-) –