Xem ngayHỗ trợ miễn phí bởi Dreamlib.vn

Hướng dẫn tùy biến giao diện Koha: Slider đẹp cho Koha Opac header (theme PROG)

Làm cho một phần mềm tuyệt vơi như Koha, trở nên đẹp hơn, đó là một mục tiêu từ đầu của tôi. Hiện tại với site demo của Koha thì giao diện opac hiện tại có một header khá nhạt nhòa, nếu không muốn nói là buồn tẻ. Nhân khi bạn Quyền có hứng thú chia sẻ một vài mẫu header đẹp, tôi quyết định dành một ngày để thực hiện một project nhỏ mà tôi ấp ủ khá lâu- tạo một header thật đẹp, thật tiện lợi và thật dễ dàng cho mọi người có thể làm theo, từ người mới tìm hiểu về Koha đến những người am hiểu về html, css, js…
Ý tưởng đơn giản nhất là tạo một slider cho header của Opac của Koha. Tuy tôi nghĩ đến khá lâu, và cũng có rất nhiều mẫu slider đẹp hay gặp dành cho wordpress chẳng hạn, nhưng tôi muốn slider đó thỏa mãn 2 yếu tố:
1- Đơn giản và đẹp. Đơn giản ở chỗ dễ hiểu, dễ tùy chỉnh, không cần yêu cầu quá nhiều về html, css, js, jquery… Và đẹp- muốn đẹp thì nó phải dử dụng jquery chứ không chỉ đơn thuần là html và css.
2- Nó phải được tích hợp vào Koha một cách dễ dàng, đơn giản đến mức không thể đơn giản hơn, và có thể áp dụng ngay với mọi thư viện con của dreamlib ( những thư viện đang sử dụng Koha miễn phí) cũng như bất kì thư viện nào khác đang sử dụng Koha.
Thôi chém gió đủ rồi, tại cũng khá hứng thú với tutorial này- bởi tôi tin nó sẽ làm cho các bạn thích Koha hơn rất nhiều, chúng ta bắt đầu luôn.
Slider của chúng ta gồm khá nhiều file, 3 file javascripts, trong đó có 1 file jquery, 2 file CSS, 1 folder chứa graphics, 1 folder chứa hình ảnh cho slider, 1 folder cuối chứa thumbnails của những hình ảnh đó. Nhiều quá? Không, phải nói là quá nhiều.Lúc đầu tôi cũng không biết cách tích hợp vào Koha thế nào cho đơn giản nhất- cho tôi và cho các bạn, rồi sau một hồi google, cũng ra.
Tôi upload tất cả những file đó lên server dreamlib, rồi link từ Opac của Koha đến đó. Tất cả những gì các bạn cần làm là tạo hình ảnh cho thư viện của các bạn ( 1080x200px) và thumbnails cho những hình ảnh đó (64x43px). Đó là những con số tôi tùy chỉnh riêng cho giao diện Koha của dreamlib, còn nếu các bạn download file css về rồi chỉnh sửa thì kích cỡ ảnh tùy thuộc vào các bạn. Thú thực tôi cũng thử nhiều lần, với 100, 150px, nhưng chiều cao 200px có vẻ đẹp nhất. Ok, các bạn chọn hình ảnh xong rồi, tạo thumnbnails rồi, giờ upload chúng lên một host nào đó- ví dụ photobucket.com, rồi để phần sau ta sẽ dùng đến.
Vậy những file còn lại thì ở đâu? Chúng ở đây: http://dreamlib.vn/slider_header_koha/
Folder slider_images là folder chứa ảnh và thumbnails của trang koha demo.
Tiếp theo việc cần làm duy nhất là vào trong trang admin Koha, vào mục OPAC trong System preferences, sau đó chọn opacheader. Copy paste đoạn code sau vào:
<link rel=”stylesheet” type=”text/css” href=”http://dreamlib.vn/slider_header_koha/css/dreamlib_thumbs_skin.css”/>    <!– Trỏ đến vị trí file CSS trên server Dreamlib –>
<link rel=”stylesheet” type=”text/css” href=”http://dreamlib.vn/slider_header_koha/css/slideshow_sample.css”/>    <!– Trỏ đến vị trí file CSS trên server Dreamlib –>
<script type=”text/javascript” src=”http://dreamlib.vn/slider_header_koha/js/jquery-1.7.1.min.js”></script>        <!– Trỏ đến vị trí file JQUERY trên server Dreamlib –>
<script type=”text/javascript” src=”http://dreamlib.vn/slider_header_koha/js/dreamlib-thumbs-1.1.2.js”></script>    <!– Trỏ đến vị trí file Javascript dành cho slider trên server Dreamlib. –>
<script type=”text/javascript” src=”http://dreamlib.vn/slider_header_koha/js/header_main.js”></script>
Vậy là chúng ta đã trỏ đến các file cần thiết. Còn thư mục graphics thì sao? Không cần quan tâm, ví nó đã nằm trong file css rồi.
Tiếp sau đó chúng ta copy paste đoạn code sau vào bên dưới đoạn vừa rồi:
<div id=”imageSlideshow”> <!– Slider sẽ đặt ở đây, trong div này –>
         <div rel=”slider_content”> <!– Nội dung slider được xác định trong div này –>
                <div rel=”slide”>
                    <div rel=”type”>image</div>
                    <div rel=”title”>Title 1</div>
                    <!– Bạn thay Tittle 1 bằng tiêu đề bức ảnh –>
                    <div rel=”description”>Description 1 (click on the image to open site of dreamlib.vn )</div>
                    <!– Bạn thay Description 1 bằng lời giới thiệu trang web nào đó–>
                    <div rel=”content”>http://dreamlib.vn/slider_header_koha/slider_images/1.jpg</div>
                    <!– Bạn thay đường link đến ảnh 1.jpg bên trên bằng link đến ảnh của bạn –>
                    <div rel=”thumbnail”>http://dreamlib.vn/slider_header_koha/slider_images/thumbnails/1.jpg</div>
                    <!– Bạn thay đường link đến thumnails 1.jpg bên trên bằng link đến thumbnails của bạn –>
                    <div rel=”target_url”>http://dreamlib.vn</div>
                    <!– Bạn thay http://dreamlib.vn bằng link trang web bạn muốn trỏ đến –>
                    <div rel=”target_window”>_blank</div>
                </div>
                <div rel=”slide”>
                    <div rel=”type”>image</div>
                    <div rel=”title”>Title 2</div>
                    <div rel=”description”>Description 2 (click on the image to open site of dreamlib.vn/* )</div>
                    <div rel=”content”>http://dreamlib.vn/slider_header_koha/slider_images/2.jpg</div>
                    <div rel=”thumbnail”>http://dreamlib.vn/slider_header_koha/slider_images/thumbnails/2.jpg</div>
                    <div rel=”target_url”>http://dreamlib.vn</div>
                    <div rel=”target_window”>_blank</div>
                </div>
        </div>
</div> <!– Kết thúc slider cho header ở đây –>
Đoạn code vừa rồi chỉ có 2 bức ảnh, 2 thumbnai, tôi làm vậy cho các bạn dễ hình dung. Vậy là bạn đã có một slider đẹp cho header của mình.
Đoạn sau đây có tất cả hơn 10 bức ảnh, hơn 10 thumbnails, mỗi bức ảnh lại có một hiệu ứng chuyển ảnh khác nhau, bạn cứ từ từ xem xét (maximum hiệu ứng là khoảng 20).
<link rel=”stylesheet” type=”text/css” href=”http://dreamlib.vn/slider_header_koha/css/dreamlib_thumbs_skin.css”/>    <!– Include the CSS of the slider (the slider skin). –>
<link rel=”stylesheet” type=”text/css” href=”http://dreamlib.vn/slider_header_koha/css/slideshow_sample.css”/>    <!– The general CSS of the entire HTML page. –>
<script type=”text/javascript” src=”http://dreamlib.vn/slider_header_koha/js/jquery-1.7.1.min.js”></script>        <!– You must include the JQuery file. –>
<script type=”text/javascript” src=”http://dreamlib.vn/slider_header_koha/js/dreamlib-thumbs-1.1.2.js”></script>    <!– You must include the SliderWall template. –>
<script type=”text/javascript” src=”http://dreamlib.vn/slider_header_koha/js/header_main.js”></script>
<div id=”imageSlideshow”> <!– The slider will be placed within this <div> tag. –>
            <div rel=”slider_content”> <!– Define the structure and content for the slider. –>
                <div rel=”slide”>
                    <div rel=”type”>image</div>
                    <div rel=”title”>Title 1</div>
                    <div rel=”description”>Description 1 (click on the image to open site of dreamlib.vn/* )</div>
                    <div rel=”content”>http://dreamlib.vn/slider_header_koha/slider_images/1.jpg</div>
                    <div rel=”thumbnail”>http://dreamlib.vn/slider_header_koha/slider_images/thumbnails/1.jpg</div>
                    <div rel=”target_url”>http://dreamlib.vn</div>
                    <div rel=”target_window”>_blank</div>
                </div>
                <div rel=”slide”>
                    <div rel=”type”>image</div>
                    <div rel=”title”>Title 2</div>
                    <div rel=”description”>Description 2 (click on the image to open site of dreamlib.vn/* )</div>
                    <div rel=”content”>http://dreamlib.vn/slider_header_koha/slider_images/2.jpg</div>
                    <div rel=”thumbnail”>http://dreamlib.vn/slider_header_koha/slider_images/thumbnails/2.jpg</div>
                    <div rel=”target_url”>http://dreamlib.vn</div>
                    <div rel=”target_window”>_blank</div>
                </div>
                                <div rel=”slide”>
                    <div rel=”type”>image</div>
                    <div rel=”title”>Title 3</div>
                    <div rel=”description”>Description 3 (click on the image to open site of dreamlib.vn/* )</div>
                    <div rel=”content”>http://dreamlib.vn/slider_header_koha/slider_images/3.jpg</div>
                    <div rel=”thumbnail”>http://dreamlib.vn/slider_header_koha/slider_images/thumbnails/3.jpg</div>
                    <div rel=”target_url”>http://dreamlib.vn</div>
                    <div rel=”target_window”>_blank</div>
                </div>
                                <div rel=”slide”>
                    <div rel=”type”>image</div>
                    <div rel=”title”>Title 4</div>
                    <div rel=”description”>Description 4 (click on the image to open site of dreamlib.vn/* )</div>
                    <div rel=”content”>http://dreamlib.vn/slider_header_koha/slider_images/4.jpg</div>
                    <div rel=”thumbnail”>http://dreamlib.vn/slider_header_koha/slider_images/thumbnails/4.jpg</div>
                    <div rel=”target_url”>http://dreamlib.vn</div>
                    <div rel=”target_window”>_blank</div>
                </div>
                                <div rel=”slide”>
                    <div rel=”type”>image</div>
                    <div rel=”title”>Title 5</div>
                    <div rel=”description”>Description 5 (click on the image to open site of dreamlib.vn/* )</div>
                    <div rel=”content”>http://dreamlib.vn/slider_header_koha/slider_images/5.jpg</div>
                    <div rel=”thumbnail”>http://dreamlib.vn/slider_header_koha/slider_images/thumbnails/5.jpg</div>
                    <div rel=”target_url”>http://dreamlib.vn</div>
                    <div rel=”target_window”>_blank</div>
                 </div>
                <div rel=”slide”>
                    <div rel=”type”>image</div>
                    <div rel=”title”>Title 6</div>
                    <div rel=”description”>Description 6 (click on the image to open site of dreamlib.vn/* )</div>
                    <div rel=”content”>http://dreamlib.vn/slider_header_koha/slider_images/6.jpg</div>
                    <div rel=”thumbnail”>http://dreamlib.vn/slider_header_koha/slider_images/thumbnails/6.jpg</div>
                    <div rel=”target_url”>http://dreamlib.vn</div>
                    <div rel=”target_window”>_blank</div>
                </div>
                                <div rel=”slide”>
                    <div rel=”type”>image</div>
                    <div rel=”title”>Title 7</div>
                    <div rel=”description”>Description 7 (click on the image to open site of dreamlib.vn/* )</div>
                    <div rel=”content”>http://dreamlib.vn/slider_header_koha/slider_images/7.jpg</div>
                    <div rel=”thumbnail”>http://dreamlib.vn/slider_header_koha/slider_images/thumbnails/7.jpg</div>
                    <div rel=”target_url”>http://dreamlib.vn</div>
                    <div rel=”target_window”>_blank</div>
                </div>
                                <div rel=”slide”>
                    <div rel=”type”>image</div>
                    <div rel=”title”>Title 8</div>
                    <div rel=”description”>Description 8 (click on the image to open site of dreamlib.vn/* )</div>
                    <div rel=”content”>http://dreamlib.vn/slider_header_koha/slider_images/8.jpg</div>
                    <div rel=”thumbnail”>http://dreamlib.vn/slider_header_koha/slider_images/thumbnails/8.jpg</div>
                    <div rel=”target_url”>http://dreamlib.vn</div>
                    <div rel=”target_window”>_blank</div>
                </div>
                                <div rel=”slide”>
                    <div rel=”type”>image</div>
                    <div rel=”title”>Title 9</div>
                    <div rel=”description”>Description 9 (click on the image to open site of dreamlib.vn/* )</div>
                    <div rel=”content”>http://dreamlib.vn/slider_header_koha/slider_images/9.jpg</div>
                    <div rel=”thumbnail”>http://dreamlib.vn/slider_header_koha/slider_images/thumbnails/9.jpg</div>
                    <div rel=”target_url”>http://dreamlib.vn</div>
                    <div rel=”target_window”>_blank</div>
                </div>
<div rel=”slide”>
                    <div rel=”type”>image</div>
                    <div rel=”title”>Title 2</div>
                    <div rel=”description”>Description 2 (click on the image to open site of dreamlib.vn/* )</div>
                    <div rel=”content”>http://dreamlib.vn/slider_header_koha/slider_images/2.jpg</div>
                    <div rel=”thumbnail”>http://dreamlib.vn/slider_header_koha/slider_images/thumbnails/2.jpg</div>
                    <div rel=”target_url”>http://dreamlib.vn</div>
                    <div rel=”target_window”>_blank</div>
                </div>
                                <div rel=”slide”>
                    <div rel=”type”>image</div>
                    <div rel=”title”>Title 3</div>
                    <div rel=”description”>Description 3 (click on the image to open site of dreamlib.vn/* )</div>
                    <div rel=”content”>http://dreamlib.vn/slider_header_koha/slider_images/3.jpg</div>
                    <div rel=”thumbnail”>http://dreamlib.vn/slider_header_koha/slider_images/thumbnails/3.jpg</div>
                    <div rel=”target_url”>http://dreamlib.vn</div>
                    <div rel=”target_window”>_blank</div>
                </div>
                                <div rel=”slide”>
                    <div rel=”type”>image</div>
                    <div rel=”title”>Title 4</div>
                    <div rel=”description”>Description 4 (click on the image to open site of dreamlib.vn/* )</div>
                    <div rel=”content”>http://dreamlib.vn/slider_header_koha/slider_images/4.jpg</div>
                    <div rel=”thumbnail”>http://dreamlib.vn/slider_header_koha/slider_images/thumbnails/4.jpg</div>
                    <div rel=”target_url”>http://dreamlib.vn</div>
                    <div rel=”target_window”>_blank</div>
                </div>
                                <div rel=”slide”>
                    <div rel=”type”>image</div>
                    <div rel=”title”>Title 5</div>
                    <div rel=”description”>Description 5 (click on the image to open site of dreamlib.vn/* )</div>
                    <div rel=”content”>http://dreamlib.vn/slider_header_koha/slider_images/5.jpg</div>
                    <div rel=”thumbnail”>http://dreamlib.vn/slider_header_koha/slider_images/thumbnails/5.jpg</div>
                    <div rel=”target_url”>http://dreamlib.vn</div>
                    <div rel=”target_window”>_blank</div>
                </div>
                <div rel=”slide”>
                    <div rel=”type”>image</div>
                    <div rel=”title”>Title 6</div>
                    <div rel=”description”>Description 6 (click on the image to open site of dreamlib.vn/* )</div>
                    <div rel=”content”>http://dreamlib.vn/slider_header_koha/slider_images/6.jpg</div>
                    <div rel=”thumbnail”>http://dreamlib.vn/slider_header_koha/slider_images/thumbnails/6.jpg</div>
                    <div rel=”target_url”>http://dreamlib.vn</div>
                    <div rel=”target_window”>_blank</div>
                </div>
                                <div rel=”slide”>
                    <div rel=”type”>image</div>
                    <div rel=”title”>Title 7</div>
                    <div rel=”description”>Description 7 (click on the image to open site of dreamlib.vn/* )</div>
                    <div rel=”content”>http://dreamlib.vn/slider_header_koha/slider_images/7.jpg</div>
                    <div rel=”thumbnail”>http://dreamlib.vn/slider_header_koha/slider_images/thumbnails/7.jpg</div>
                    <div rel=”target_url”>http://dreamlib.vn</div>
                    <div rel=”target_window”>_blank</div>
                </div>
                                <div rel=”slide”>
                    <div rel=”type”>image</div>
                    <div rel=”title”>Title 8</div>
                    <div rel=”description”>Description 8 (click on the image to open site of dreamlib.vn/* )</div>
                    <div rel=”content”>http://dreamlib.vn/slider_header_koha/slider_images/8.jpg</div>
                    <div rel=”thumbnail”>http://dreamlib.vn/slider_header_koha/slider_images/thumbnails/8.jpg</div>
                    <div rel=”target_url”>http://dreamlib.vn</div>
                    <div rel=”target_window”>_blank</div>
                </div>
                                <div rel=”slide”>
                    <div rel=”type”>image</div>
                    <div rel=”title”>Title 9</div>
                    <div rel=”description”>Description 9 (click on the image to open site of dreamlib.vn/* )</div>
                    <div rel=”content”>http://dreamlib.vn/slider_header_koha/slider_images/9.jpg</div>
                    <div rel=”thumbnail”>http://dreamlib.vn/slider_header_koha/slider_images/thumbnails/9.jpg</div>
                    <div rel=”target_url”>http://dreamlib.vn</div>
                    <div rel=”target_window”>_blank</div>
                </div>
            </div>
    </div> <!– end SliderWall definition and structure –>
Xong rồi, thêm vài hình ảnh minh họa cho header. Đây là hiệu ứng chuyển ảnh:
Và đây là khi bạn di chuột vào xem chi tiết slider:
Chúc các bạn có một giao diện Koha tuyệt đẹp. Chi tiết các bạn có thể xem thêm tại http://dreamlib.vn. Hẹn gặp lại!