Share slides + read online

Share a simple slide and online reading function.

The most important part of a slide is to control the appearance and disappearance of images.

Online reading uses a third-party js class library, which has the zoom-in and zoom-out function. You need to prepare two images with different resolutions and use js to make small images correspond to the path of big images. Turn. js

 

Slide slider. js:

View Code

$(document).ready(function () {        $(".ot-slide:eq(0)").fadeIn(200);       var slideMax = $(".ot-slide").length;    var curSlide = 0;    var prevSlide;        function doThe(dir){      var nextSlide;      /*var cMove;*/            if (dir == 'prev') {        if (curSlide == 0) {          nextSlide = slideMax-1;        } else {          nextSlide = curSlide-1;        }        /*cMove = '100%';*/      } else if (dir == 'next') {        if (curSlide + 1 == slideMax) {          nextSlide = 0;        } else {          nextSlide = curSlide+1;        }        /*cMove = '-100%';*/      }            $(".ot-slide").eq(curSlide).fadeOut(300);      $(".ot-slide").eq(nextSlide).fadeIn(300);      if (nextSlide == 0) { curSlide = 0; } else {        curSlide = nextSlide;      }    }        if (2 > $('.ot-slide').length) {       $("[id^=ot-s-]").hide();    }        if ($(".two-c").children("li").length == 1) { $(".two-c").children("li").css({'width':'auto'}); }        $("[id^=ot-s-]").live('click',function(){      if ($(".ot-slide").length > 1) {        if (!$(".ot-slide").is(":animated")) {          var direct = $(this).attr('id').split('ot-s-')[1];          if (direct == 'left') { direct = 'prev'; } else if (direct == 'right') { direct = 'next'; }          doThe(direct);        }      }    });  });

 

Read viewpdf. js online:

View Code

var ibase='images/';function loadLargePage(page, pageElement) {  var img = $('');      img.load(function() {            var prevImg = pageElement.find('img');            $(this).css({width: '100%', height: '100%'});            $(this).appendTo(pageElement);            prevImg.remove();  });      if (page==1) {    page = '00';    } else if (page == 12) {        page = '06';    } else {        if (page%2==0) {               page = '0'+Math.floor(page/2)+'a';             } else {                  page = '0'+Math.floor(page/2)+'b';            }      }  img.attr('src', ibase + page + '.jpg');}function loadSmallPage(page, pageElement) {          var img = pageElement.find('img');      img.css({width: '100%', height: '100%'});      img.unbind('load');    if (page==1) {        page = '00';    } else if (page == 12) {        page = '06';    } else {        if (page%2==0) {                  page = '0'+Math.floor(page/2)+'a';           } else {                   page = '0'+Math.floor(page/2)+'b';           }    }img.attr('src', ibase + page + '-small.jpg');}function isChrome() {    return navigator.userAgent.indexOf('Chrome')!=-1;}function resBox() {  if ($(window).height() > $("#pi-box").height()) {    $("#pi-box").css({'height':$(window).height()});  }}$(document).ready(function () {    $(".previous-button").hide();    $("#flipbook").turn({        width: 940,        height: 376,        acceleration: !isChrome(),        autoCenter: true,        when: {            turning: function (event, page) {                if (page == 1) {                    $(".previous-button").hide();                } else $(".previous-button").delay(400).fadeIn(400);                if (page == $("#flipbook").turn('pages')) {                    $(".next-button").hide()                } else $(".next-button").delay(400).fadeIn(400);            }        }    });    if ($("html").hasClass("touch")) {        $(".page").children("img").each(function () {            var osi = $(this).attr('src').split("-small")[0];            osi = osi + '.jpg';            $(this).attr('src', osi);        });    }    if ($("html").hasClass("no-touch")) {        $('#zoom-viewport').zoom({            flipbook: $('#flipbook'),            max: function () {                return 2350 / $('#flipbook').width();            },            when: {                tap: function (event) {                    if ($(this).zoom('value') == 1) {                        if ($('#flipbook').turn('page') != 1) {                            if ($('#flipbook').turn('page') != $('#flipbook').turn('pages')) {                                $(this).zoom('zoomIn', event);                                $('#zoom-viewport').addClass('zoom-in');                            }                        }                    } else {                        $(this).zoom('zoomOut');                        $('#zoom-viewport').removeClass('zoom-in')                    }                },                resize: function (event, scale, page, pageElement) {                    if (scale == 1) loadSmallPage(page, pageElement); else loadLargePage(page, pageElement);                },                swipeLeft: function () {                    $('#flipbook').turn('next');                },                swipeRight: function () {                    $('#flipbook').turn('previous');                }            }        });    }    /* Events for the next button    */    $('.next-button').bind($.mouseEvents.over, function () {        $(this).addClass('next-button-hover');    }).bind($.mouseEvents.out, function () {        $(this).removeClass('next-button-hover');    }).bind($.mouseEvents.down, function () {        $(this).addClass('next-button-down');    }).bind($.mouseEvents.up, function () {        $(this).removeClass('next-button-down');    }).click(function () {        $('#flipbook').turn('next');    });    /* Events for the prev button    */    $('.previous-button').bind($.mouseEvents.over, function () {        $(this).addClass('previous-button-hover');    }).bind($.mouseEvents.out, function () {        $(this).removeClass('previous-button-hover');    }).bind($.mouseEvents.down, function () {        $(this).addClass('previous-button-down');    }).bind($.mouseEvents.up, function () {        $(this).removeClass('previous-button-down');    }).click(function () {        $('#flipbook').turn('previous');    });    $(document).keyup(function (e) {        if (e.keyCode === 27) { if ($("#pi-box").is(":visible")) $("#pi-box").fadeOut(); }        if (e.keyCode === 37) {            $('#flipbook').turn('previous');            e.preventDefault();        }        if (e.keyCode === 39) {            $('#flipbook').turn('next');            e.preventDefault();        }    });    $("#pibac").live('click', function () {        $("#pi-box").css({ 'height': $("html").height() });        resBox();        $("#pi-box").fadeIn();        return false;    });    console.log($("#pi-box").width());    $("#pi-box").live('click', function () { if ($("#pi-box").is(":visible")) $("#pi-box").fadeOut(); });    $("#pi-main").live('click', function (e) { e.stopPropagation(); });    $("#pibclose").live('click', function () {        if ($("#pi-box").is(":visible")) $("#pi-box").fadeOut();    });});$(window).resize(function(){  if ($("#pi-box").is(":visible")) resBox();});$(window).bind('orientationchange',function(){  if ($("#pi-box").is(":visible")) resBox();});

 

: Source code

 

: