묻고답하기
궁금합니다!! 슬라이드배너
2014.02.09 09:28
슬라이드 배너를 제이쿼리나 자바스크립트를 이용해서 간단하게 구현해보려고하는데요.
네이버나 구글에서 뒤져보고 있는데 도저히 이해가 안되서요 ..ㅠㅠ
xe에다가 어떻게 제이쿼리 소스를 입혀야하는거죠? ㅜㅜ 슬라이드는
그냥 사진이 좌우로 슬라이드 되는 형태였으면 좋겠는데 ...
http://www.xpressengine.com/index.php?mid=userForum&search_keyword=%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C&search_target=title&document_srl=21143701
여기서 박스형이였으면 좋겠는데 .. 이걸 쓰니까 ie에서 ㅜㅜ안되더라구요 ......
답답해미치겠네요ㅜㅜ 어디서부터 손봐야하는건지..
제이쿼리 소스를 구해서입혀보려고 해도 현재 있는레이아웃이랑 오류가 나는건지 ...ㅠㅠㅠ
xe에는 제이쿼리를 자동으로 불러온다는 글을 미리봐서 .. 그부분을 수정해서 올려도 작동하지 않는데..
이유가 뭘까요ㅜㅜ
가장 기본적인 슬라이드소스나 .. 그런게 있다면 ㅜㅜ 어디서 구해야하나요?
메인에 슬라이드 배너. 가장 기본적인거라도 구하고싶어요 부탁드릴께요ㅜ
댓글 4
-
CTN
2014.02.09 09:46
-
우니즈
2014.02.09 10:57
답변감사합니다! 현재 계속 시도중인데 제이쿼리가 안먹히는건지 이미지가 4개로 그냥 쭈욱 나와버리네요...ㅠㅠ
지금까지도 헤매고 있습니다 ㅜ.ㅜ
http://blog.naver.com/hyoyeol?Redirect=Log&logNo=70178885666 이 강좌를 보고 따라하고 있습니다 ..ㅠㅠ
매우 간단해 보이는데 ... 영역에맞게 넣어줘도 이미지가 뜨긴하는데
2x2 처럼됩니다. ㅜㅜ 슬라이드를 넣어도 마찬가지입니다.. ㅠㅠ 사진이 슬라이드가안되고
쭈욱 나열되어버립니다.
-
CTN
2014.02.09 12:53
하나씩 점검해 보죠... 일단... gyslider 제작자님께 양해를 구하구요...
이미지가 4개 보인다는 것은 제이쿼리 충돌문제 일 수도 있으니 content.html 의
<script type="text/javascript"> (function($){ $(document).ready(function(){ $('#{$widget_info->slider_name}').gySlider({ slider_width : '{$widget_info->image_width}', slider_height : '{$widget_info->image_height}', nav_type : '{$widget_info->nav_type}', nav_number : '{$widget_info->nav_number}', nav_position: '{$widget_info->nav_position}', use_effect : '{$widget_info->use_effect}', effect_num : '{$widget_info->effect_num}', slide_type : '{$widget_info->slide_type}', slide_speed : '{$widget_info->slide_speed}', auto_slide : '{$widget_info->auto_slide}', delay_time : '{$widget_info->delay_time}', }); }); })(jQuery); </script>
아래와같이
<script> jQuery.noConflict(); (function(jQuery){ jQuery(document).ready(function($){ jQuery('#{$widget_info->slider_name}').gySlider({ slider_width : '{$widget_info->image_width}', slider_height : '{$widget_info->image_height}', nav_type : '{$widget_info->nav_type}', nav_number : '{$widget_info->nav_number}', nav_position: '{$widget_info->nav_position}', use_effect : '{$widget_info->use_effect}', effect_num : '{$widget_info->effect_num}', slide_type : '{$widget_info->slide_type}', slide_speed : '{$widget_info->slide_speed}', auto_slide : '{$widget_info->auto_slide}', delay_time : '{$widget_info->delay_time}' }); }); })(jQuery); </script>
다음으로 jquery.gySlider.js 파일의 33줄 근처에서
'delay_time' : 5000,
위 값 5000 뒤의 , 를 삭제해주시구요. 이 부분은 IE7, 8에서 구동이 안되는 부분을 해결해 줄 것 같습니다.
두 가지 사항을 수정하셔서 한번 더 테스트 해 보시구요. 안되면 또 말씀해 주시겠어요. 소스가 많지는 않으니까 하나씩 하나씩 꼼꼼하게 점검해 보면 문제가 되는 부분을 찾을 수 있을겁니다. 저도 배워가면서 하는 중이라서 틀릴 수도 있습니다. 위젯 제작자님 문제가 되는 부분이 있으면 삭제하도록 하겠습니다...
-
우니즈
2014.02.10 16:08
정말감사합니다 ! 위와 같은방법으로 슬라이드 구현이되네요! 문제해결했어요 정말감사합니다.
이제서야 댓글을 다네요. 정말정말감사합니다!!!
링크하신 슬라이드배너는 IE에서도 정상작동 할 겁니다. 이 슬라이드는 예전에 저도 한번 사용해 본 적이 있습니다. 이 위젯 개발하신 분 평판이 참 좋으시더라구요. 안되는 부분을 구체적으로 적어 올리시면 다른 분들이 도움을 주실겁니다.
jQuery 슬라이드는 구글에서 검색해 보시면 상당히 많이 있습니다. 그 중에서 라이센스가 다소 프리한 내용들을 가지고 XE의 위젯들에 붙이거나 직접 레이아웃에서 구현하면 됩니다. 가장 중요한 부분은 한 페이지에 여러 버전의 jQuery 관련 플러그인을 사용할 때에 충돌방지를 시켜주는 것이 되겠습니다. 직접 개발하기에 아직 어려우시면 위의 슬라이드배너가 정상적으로 동작할 수 있도록 안되는 부분을 차근차근 풀어주시면 어려운 문제가 해결되리라 생각됩니다.
http://bxslider.com/
http://wowslider.com/
nivoslider
http://responsiveslides.com/
몇군데 링크 걸어보았어요...