장바구니

등록된 상품이 없습니다
합계: 0

최근 본 상품

등록된 상품이 없습니다
워드프레스 전문가들이 선택한 필수 플러그인
    유용한팁
    Home / 유용한팁
    글보기
    갤러리 스킨 및 위젯에 Lightbox(이미지 팝업) 연결하는 방법
    조회수579
    2023-03-11 14:48

    갤러리 스킨 및 위젯에서 이미지 클릭시 Lightbox(이미지 팝업) 플러그인을 연결해서 사용하기 위해서는 
    아래의 방법을 참고하여 Lightbox 플러그인(Responsive Lightbox & Gallery)을 설치한 후 숏코드 속성에 
    갤러리 스킨은 gallery_link_type="lightbox", 갤러리 위젯은 link_type="lightbox" 속성을 추가해 주시면 됩니다.
    (망보드 2.1.4 이상 및 2023년 3월 10일에 업데이트된 갤러리 스킨 및 위젯에서만 사용 가능) 


    lightbox_notice.jpg

     

     



    1. Lightbox 플러그인(Responsive Lightbox & Gallery) 설치하기


    Lightbox(이미지 팝업) 기능을 사용하기 위해서는 망보드(2.1.4버전 이상 필요)에서 연결기능을 지원하는 

    Lightbox 플러그인(Responsive Lightbox & Gallery)을 설치해야 합니다.


    "워드프레스 관리자 > 플러그인 > 새로 추가" 페이지에서 "Responsive Lightbox" 키워드를 검색하여 Responsive Lightbox & Gallery 플러그인을 설치 및 활성화 해주시면 됩니다.


    lightbox1.jpg

     

    Responsive Lightbox & Gallery 플러그인이 설치되면 "워드프레스 관리자 > Lighbox" 메뉴가 활성화 되는데 

    "워드프레스 관리자 > Lighbox > General" 페이지에서 Default lightbox 항목을 prettyPhoto 로 설정해 주시고

    Images 항목에서 Enable lightbox for WordPress image links. 체크박스를 해제한 후 하단에 저장버튼을 클릭하여

    변경된 설정을 저장합니다.


    lightbox2.jpg



    2. 갤러리 스킨에 Lightbox 플러그인(Responsive Lightbox & Gallery) 연결 방법


    갤러리 스킨 숏코드에 gallery_link_type="lightbox" 속성 추가


    - Lightbox 기능이 추가된 갤러리 스킨: 블럭 갤러리 스킨, Hometory Masonry Skin M1 ~ M10

    - 숏코드 샘플: [mb_board name="게시판" list_type="gallery" responsive_class="col-321" gallery_link_type="lightbox"]

    - 샘플 주소: https://demo.mangboard.com/lightbox-masonry-m1/



    3. 갤러리 최근 게시물 위젯에 Lightbox 플러그인(Responsive Lightbox & Gallery) 연결 방법


    갤러리 최근 게시물 위젯 숏코드에 link_type="lightbox" 속성 추가


    - Lightbox 기능이 추가된 갤러리 위젯: 반응형 갤러리 최근 게시물 M1 ~ M10

    - 숏코드 샘플: [mb_responsive_gallery1 name="게시판" responsive_class="col-421" list_size="4" link_type="lightbox"]

    - 샘플 주소: https://demo.mangboard.com/lighbox_gallery_widget/



    4. 갤러리 슬라이드 위젯에 Lightbox 플러그인(Responsive Lightbox & Gallery) 연결 방법


    갤러리 슬라이드 위젯 숏코드에 link_type="lightbox" 속성 추가


    - Lightbox 기능이 추가된 슬라이드 위젯: 반응형 갤러리 슬라이드 M1,M2,M3,M4,M6

    - 숏코드 샘플: [mb_responsive_slide_m2 name="게시판" list_size="10" slide_size="4-3-2-1" style="width:100%;" img_height="200px" tablet_img_height="200px" mobile_img_height="200px" type="image" speed="700" use_title="true" link="true" auto_play="true" auto_speed="3000" use_category="true" link_type="lightbox"]

    - 샘플 주소: https://demo.mangboard.com/lightbox_gallery_slide/





    카테고리일반