|
|
| $(function() { |
| $('.img_awesome').watermark({ |
| text: 'これは透かしのテキストです・・・', |
| textWidth: 500, |
| textSize: 30, |
| textColor: 'white', |
| textBg: 'rgba(0, 0, 0, 0.4)', |
| gravity: 'c', |
| opacity: 0.7, |
| margin: 10, |
| }); |
| }); |
|
|
| $(function() { |
| $('.img_awesome').watermark({ |
| text: 'これは透かしのテキストです・・・', |
| textWidth: 500, |
| textSize: 30, |
| textColor: 'white', |
| textBg: 'rgba(0, 0, 0, 0.4)', |
| gravity: 'c', |
| opacity: 0.7, |
| margin: 10, |
| }); |
| }); |
| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta content="charset=utf-8"> |
| <title>bxSlider 標準サンプル </title> |
|
|
|
|
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> |
|
|
| <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script> |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" rel="stylesheet" /> |
|
|
| <style> |
| body { |
| max-width: 800px; |
| width:800px; |
| margin: 0 auto; |
| padding: 0px; |
| } |
|
|
| .my-bxslider1 > li { |
| height: 340px; |
| } |
|
|
| .my-bxslider1 > li > img { |
| height: auto; |
| } |
|
|
| */ |
| </style> |
|
|
| <head> |
| <body style=""> |
| <h2 style="text-align:center">bxSlider 標準サンプル</h2> |
|
|
| <div class="my-bxslider1" id="bx-pager" style="width:600px"> |
| <div><img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-04.jpg" title="女性 A" /></div> |
| <div><img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-09.jpg" title="女性 B" /></div> |
| <div><img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-07.jpg" title="女性 C" /></div> |
| <div><img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-03.jpg" title="女性 D" /></div> |
| <div><img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-12.jpg" title="女性 E" /></div> |
| </div> |
|
|
|
|
| <script> |
| $(document).ready(function(){ |
| |
| $('.my-bxslider1').bxSlider({ |
| |
| mode: 'fade', |
| captions: true, |
| auto: true, |
| pause: 5000, |
| slideWidth: 920 |
| }); |
|
|
| }); |
| </script> |
|
|
| <hr> |
| <a href="https://bxslider.com/" target="_balnk">bxSlider by Steven Wanderski </a> |
|
|
| </body> |
| </html> |
| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>slick 標準サンプル</title> |
| <meta charset="UTF-8"> |
|
|
| |
| <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> |
| <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> |
|
|
|
|
| <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> |
|
|
| <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/> |
|
|
| <style type="text/css"> |
| html, body { |
| margin: 0; |
| padding: 0; |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| .slider { |
| width: 50%; |
| margin: 20px auto; |
| } |
|
|
| .slick-slide { |
| margin: 0px 20px; |
| } |
|
|
| .slick-slide img { |
| width: 100%; |
| } |
|
|
| .slick-prev:before, |
| .slick-next:before { |
| color: black; |
| } |
|
|
|
|
| .slick-slide { |
| transition: all ease-in-out .3s; |
| opacity: .2; |
| } |
| |
| .slick-active { |
| opacity: .5; |
| } |
|
|
| .slick-current { |
| opacity: 1; |
| } |
| </style> |
| </head> |
| <body> |
| <h1 style="text-align:center">slick 標準サンプル</h1> |
|
|
| <section class="regular slider"> |
| <div> |
| <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-11.jpg" class="mm"> |
| </div> |
| <div> |
| <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-12.jpg" class="mm"> |
| </div> |
| <div> |
| <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-13.jpg" class="mm"> |
| </div> |
| <div> |
| <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-14.jpg" class="mm"> |
| </div> |
| <div> |
| <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-09.jpg" class="mm"> |
| </div> |
| <div> |
| <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-16.jpg" class="mm"> |
| </div> |
| </section> |
|
|
| <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> |
|
|
|
|
| <script type="text/javascript"> |
| $(function() { |
| $(".regular").slick({ |
| autoplay: true, |
| autoplaySpeed: 5000, |
| dots: true, |
| infinite: true, |
| slidesToShow: 1, |
| slidesToScroll: 1 |
| }); |
| }); |
| </script> |
|
|
|
|
| $('.slider').slick({ |
| // アクセシビリティ。左右ボタンで画像の切り替えをできるかどうか |
| accessibility: true, |
| // 自動再生。trueで自動再生される。 |
| autoplay: false, |
| // 自動再生で切り替えをする時間 |
| autoplaySpeed: 3000, |
| // 自動再生や左右の矢印でスライドするスピード |
| speed: 400, |
| // 自動再生時にスライドのエリアにマウスオンで一時停止するかどうか |
| pauseOnHover: true, |
| // 自動再生時にドットにマウスオンで一時停止するかどうか |
| pauseOnDotsHover: true, |
| // 切り替えのアニメーション。ease,linear,ease-in,ease-out,ease-in-out |
| cssEase: 'ease', |
| // 画像下のドット(ページ送り)を表示 |
| dots: false, |
| // ドットのclass名をつける |
| dotsClass: 'dot-class', |
| // ドラッグができるかどうか |
| draggable: true, |
| // 切り替え時のフェードイン設定。trueでon |
| fade: false, |
| // 左右の次へ、前へボタンを表示するかどうか |
| arrows: true, |
| // 無限スクロールにするかどうか。最後の画像の次は最初の画像が表示される。 |
| infinite: true, |
| // 最初のスライダーの位置 |
| initialSlide: 0, |
| // 画像の遅延表示。‘ondemand’or'progressive' |
| lazyLoad: 'ondemand', |
| // スライドのエリアにマウスオーバーしている間、自動再生を止めるかどうか。 |
| pauseOnHover: true |
| // スライドのエリアに画像がいくつ表示されるかを指定 |
| slidesToShow: 4, |
| // 一度にスライドする数 |
| slidesToScroll: 1, |
| // タッチスワイプに対応するかどうか |
| swipe: true, |
| // 縦方向へのスライド |
| vertical: false, |
| // 表示中の画像を中央へ |
| centerMode: true, |
| // 中央のpadding |
| centerPadding: '160px' |
| }); |
| --> |
| <br> |
| <a href="https://kenwheeler.github.io/slick/" target="_blank">slick by Copyright (c) 2017 Ken Wheeler</a> |
|
|
| <hr> |
| <div style="text-align:center"> |
| <a href="http://urbanqee.com" target="_top"> |
| <img src="http://urbanqee.com/cgi-ssi/counter/wwwcount.cgi?hide+m3ico2_on.gif" border=0 title="HOME"> |
| </a> |
| <br> |
| <font color=gray><small><small>最終更新日</small>:2022. 5. 5</font></small> |
| </div> |
|
|
| </body> |
| </html> |
| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8" /> |
| <title>Swiper 標準サンプル</title> |
| <meta |
| name="viewport" |
| content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" |
| /> |
| |
| <link |
| rel="stylesheet" |
| href="https://unpkg.com/swiper/swiper-bundle.min.css" |
| /> |
|
|
| |
| <style> |
| html, |
| body { |
| position: relative; |
| height: 100%; |
| } |
|
|
| body { |
| background: #eee; |
| font-family: Helvetica Neue, Helvetica, Arial, sans-serif; |
| font-size: 14px; |
| color: #000; |
| margin: 0; |
| padding: 0; |
| } |
|
|
| .swiper { |
| width: 100%; |
| height: 100%; |
| } |
|
|
| .swiper-slide { |
| text-align: center; |
| font-size: 18px; |
| background: #f5f5f5; |
|
|
| |
| display: -webkit-box; |
| display: -ms-flexbox; |
| display: -webkit-flex; |
| display: flex; |
| -webkit-box-pack: center; |
| -ms-flex-pack: center; |
| -webkit-justify-content: center; |
| justify-content: center; |
| -webkit-box-align: center; |
| -ms-flex-align: center; |
| -webkit-align-items: center; |
| align-items: center; |
| } |
|
|
| .swiper-slide img { |
| display: block; |
| width: 960pv; |
| height: 720px; |
| object-fit: cover; |
| } |
| </style> |
| </head> |
|
|
| <body> |
| <h1 style="text-align:center">Swiper 標準サンプル</h1> |
| |
| <div class="swiper mySwiper"> |
| <div class="swiper-wrapper"> |
| <div class="swiper-slide"><img src="http://urbanqee.com/webutil/slideshow/img/rose-165819_960_720.jpg"></div> |
| <div class="swiper-slide"><img src="http://urbanqee.com/webutil/slideshow/img/rose-pink-185961_960_720.jpg"></div> |
| <div class="swiper-slide"><img src="http://urbanqee.com/webutil/slideshow/img/rose-3802424_960_720.jpg"></div> |
| <div class="swiper-slide"><img src="http://urbanqee.com/webutil/slideshow/img/rose-2417334_960_720.jpg"></div> |
| <div class="swiper-slide"><img src="http://urbanqee.com/webutil/slideshow/img/white-rose-2907862_960_720.jpg"></div> |
| </div> |
| <div class="swiper-button-next"></div> |
| <div class="swiper-button-prev"></div> |
| <div class="swiper-pagination"></div> |
| </div> |
| <br> |
| <br> |
| <a href="https://swiperjs.com/" target="_balnk">MIT Licensed Swiper </a> |
| <hr> |
| <div style="text-align:center"> |
| <a href="http://urbanqee.com" target="_top"> |
| <img src="http://urbanqee.com/cgi-ssi/counter/wwwcount.cgi?hide+m3ico2_on.gif" border=0 title="HOME"> |
| </a> |
| <br> |
| <font color=gray><small><small>最終更新日</small>:2022. 5. 5</font></small> |
| </div> |
|
|
| |
| <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> |
|
|
| |
| <script> |
| var swiper = new Swiper(".mySwiper", { |
| cssMode: true, |
| navigation: { |
| nextEl: ".swiper-button-next", |
| prevEl: ".swiper-button-prev", |
| }, |
| pagination: { |
| el: ".swiper-pagination", |
| }, |
| mousewheel: true, |
| keyboard: true, |
| }); |
| </script> |
| </body> |
| </html> |
| <!DOCTYPE html> |
| <html class="no-js" lang="en"> |
| <head> |
| <meta content="charset=utf-8"> |
| <title>bxSlider 画像透かし(watermark)サンプル </title> |
|
|
|
|
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> |
|
|
| <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script> |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" rel="stylesheet" /> |
|
|
|
|
| <script src="jquery.watermark.min.js" type="text/javascript"></script> |
|
|
| <style> |
| body { |
| max-width: 800px; |
| width:800px; |
| margin: 0 auto; |
| padding: 0px; |
| } |
|
|
| .my-bxslider1 > li { |
| height: 340px; |
| } |
|
|
| .my-bxslider1 > li > img { |
| height: auto; |
| } |
|
|
| */ |
| </style> |
|
|
| <head> |
| <body style=""> |
| <h2>bxSlider 画像透かし(watermark)サンプル</h2> |
|
|
| <div class="my-bxslider1" id="bx-pager" style="width:600px"> |
| <div><img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-04.jpg" title="女性 A" /></div> |
| <div><img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-09.jpg" title="女性 B" /></div> |
| <div><img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-07.jpg" title="女性 C" /></div> |
| <div><img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-03.jpg" title="女性 D" /></div> |
| <div><img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-12.jpg" title="女性 E" /></div> |
| </div> |
|
|
|
|
| <script> |
| $(function() { |
| $('.img_awesome').watermark({ |
| path: 'http://urbanqee.com/webutil/photo/fancybox3/img/wartermark-2-2095933.png', |
| |
| textWidth: 300, |
| textSize: 30, |
| textColor: 'white', |
| textBg: 'rgba(0, 0, 0, 0.4)', |
| gravity: 'ne', |
| opacity: 0.7, |
| margin: 10, |
| }); |
| }); |
| </script> |
|
|
|
|
| <script> |
| $(document).ready(function(){ |
| |
| $('.my-bxslider1').bxSlider({ |
| |
| mode: 'fade', |
| captions: true, |
| auto: true, |
| pause: 5000, |
| slideWidth: 920 |
| }); |
|
|
| }); |
| </script> |
|
|
| <a href="https://bxslider.com/" target="_balnk">bxSlider by Steven Wanderski </a><br> |
| <a href="https://lelinhtinh.github.io/watermark/" target="_blank">jQuery plugin Watermark - MIT License (c) lelinhtinh</a> |
|
|
| <hr> |
| <div style="text-align:center"> |
| <a href="http://urbanqee.com" target="_top"> |
| <img src="http://urbanqee.com/cgi-ssi/counter/wwwcount.cgi?hide+m3ico2_on.gif" border=0 title="HOME"> |
| </a> |
| <br> |
| <font color=gray><small><small>最終更新日</small>:2022. 5. 5</font></small> |
| </div> |
|
|
| </body> |
| </html> |
| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta content="charset=utf-8"> |
| <title>bxSlider 文字透かし(watermark)サンプル </title> |
|
|
|
|
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> |
|
|
| <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script> |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" rel="stylesheet" /> |
|
|
|
|
| <script src="jquery.watermark.min.js" type="text/javascript"></script> |
|
|
| <style> |
| body { |
| max-width: 800px; |
| width:800px; |
| margin: 0 auto; |
| padding: 0px; |
| } |
|
|
| .my-bxslider1 > li { |
| height: 340px; |
| } |
|
|
| .my-bxslider1 > li > img { |
| height: auto; |
| } |
|
|
| */ |
| </style> |
|
|
| <head> |
| <body style=""> |
| <h2>bxSlider 文字透かし(watermark)サンプル</h2> |
|
|
| <div class="my-bxslider1" id="bx-pager" style="width:600px"> |
| <div><img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-04.jpg" title="女性 A" /></div> |
| <div><img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-09.jpg" title="女性 B" /></div> |
| <div><img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-07.jpg" title="女性 C" /></div> |
| <div><img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-03.jpg" title="女性 D" /></div> |
| <div><img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-12.jpg" title="女性 E" /></div> |
| </div> |
|
|
|
|
| <script> |
| $(function() { |
| $('.img_awesome').watermark({ |
| |
| text: '透かしのテキスト DRAFT', |
| textWidth: 500, |
| textSize: 36, |
| textColor: 'white', |
| textBg: 'rgba(0, 0, 0, 0.4)', |
| gravity: 'c', |
| opacity: 0.7, |
| margin: 10, |
| }); |
| }); |
| </script> |
|
|
|
|
| <script> |
| $(document).ready(function(){ |
| |
| $('.my-bxslider1').bxSlider({ |
| |
| mode: 'fade', |
| captions: true, |
| auto: true, |
| pause: 5000, |
| slideWidth: 920 |
| }); |
|
|
| }); |
| </script> |
|
|
| <a href="https://bxslider.com/" target="_balnk">bxSlider by Steven Wanderski </a><br> |
| <a href="https://lelinhtinh.github.io/watermark/" target="_blank">jQuery plugin Watermark - MIT License (c) lelinhtinh</a> |
|
|
| <hr> |
| <div style="text-align:center"> |
| <a href="http://urbanqee.com" target="_top"> |
| <img src="http://urbanqee.com/cgi-ssi/counter/wwwcount.cgi?hide+m3ico2_on.gif" border=0 title="HOME"> |
| </a> |
| <br> |
| <font color=gray><small><small>最終更新日</small>:2022. 5. 5</font></small> |
| </div> |
| |
| </body> |
| </html> |
| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>slick 画像透かし(watermark)サンプル</title> |
| <meta charset="UTF-8"> |
|
|
| |
| <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> |
| <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> |
|
|
|
|
| <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> |
|
|
| <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/> |
|
|
|
|
| <script src="jquery.watermark.min.js" type="text/javascript"></script> |
|
|
|
|
| <style type="text/css"> |
| html, body { |
| margin: 0; |
| padding: 0; |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| .slider { |
| width: 50%; |
| margin: 20px auto; |
| } |
|
|
| .slick-slide { |
| margin: 0px 20px; |
| } |
|
|
| .slick-slide img { |
| width: 100%; |
| } |
|
|
| .slick-prev:before, |
| .slick-next:before { |
| color: black; |
| } |
|
|
|
|
| .slick-slide { |
| transition: all ease-in-out .3s; |
| opacity: .2; |
| } |
| |
| .slick-active { |
| opacity: .5; |
| } |
|
|
| .slick-current { |
| opacity: 1; |
| } |
| </style> |
| </head> |
| <body> |
| <h1 style="text-align:center">slick 画像透かし(watermark)サンプル</h1> |
|
|
| <section class="regular slider"> |
| <div> |
| <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-11.jpg" class="mark"> |
| </div> |
| <div> |
| <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-12.jpg" class="mark"> |
| </div> |
| <div> |
| <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-13.jpg" class="mark"> |
| </div> |
| <div> |
| <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-14.jpg" class="mark"> |
| </div> |
| <div> |
| <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-09.jpg" class="mark"> |
| </div> |
| <div> |
| <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-16.jpg" class="mark"> |
| </div> |
| </section> |
|
|
|
|
|
|
| <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> |
|
|
|
|
|
|
| <script> |
| $(function() { |
| $('.mark').watermark({ |
| path: 'http://urbanqee.com/webutil/photo/fancybox3/img/wartermark-2-2095933.png', |
| gravity: 'c', |
| }); |
| }); |
| </script> |
|
|
|
|
| <script type="text/javascript"> |
| $(function() { |
| $(".regular").slick({ |
| autoplay: true, |
| autoplaySpeed: 5000, |
| dots: true, |
| infinite: true, |
| slidesToShow: 1, |
| slidesToScroll: 1 |
| }); |
| }); |
| </script> |
|
|
|
|
| $('.slider').slick({ |
| // アクセシビリティ。左右ボタンで画像の切り替えをできるかどうか |
| accessibility: true, |
| // 自動再生。trueで自動再生される。 |
| autoplay: false, |
| // 自動再生で切り替えをする時間 |
| autoplaySpeed: 3000, |
| // 自動再生や左右の矢印でスライドするスピード |
| speed: 400, |
| // 自動再生時にスライドのエリアにマウスオンで一時停止するかどうか |
| pauseOnHover: true, |
| // 自動再生時にドットにマウスオンで一時停止するかどうか |
| pauseOnDotsHover: true, |
| // 切り替えのアニメーション。ease,linear,ease-in,ease-out,ease-in-out |
| cssEase: 'ease', |
| // 画像下のドット(ページ送り)を表示 |
| dots: false, |
| // ドットのclass名をつける |
| dotsClass: 'dot-class', |
| // ドラッグができるかどうか |
| draggable: true, |
| // 切り替え時のフェードイン設定。trueでon |
| fade: false, |
| // 左右の次へ、前へボタンを表示するかどうか |
| arrows: true, |
| // 無限スクロールにするかどうか。最後の画像の次は最初の画像が表示される。 |
| infinite: true, |
| // 最初のスライダーの位置 |
| initialSlide: 0, |
| // 画像の遅延表示。‘ondemand’or'progressive' |
| lazyLoad: 'ondemand', |
| // スライドのエリアにマウスオーバーしている間、自動再生を止めるかどうか。 |
| pauseOnHover: true |
| // スライドのエリアに画像がいくつ表示されるかを指定 |
| slidesToShow: 4, |
| // 一度にスライドする数 |
| slidesToScroll: 1, |
| // タッチスワイプに対応するかどうか |
| swipe: true, |
| // 縦方向へのスライド |
| vertical: false, |
| // 表示中の画像を中央へ |
| centerMode: true, |
| // 中央のpadding |
| centerPadding: '160px' |
| }); |
| --> |
|
|
| <a href="https://kenwheeler.github.io/slick/" target="_blank">Copyright (c) 2017 Ken Wheeler</a><br> |
| <a href="https://lelinhtinh.github.io/watermark/" target="_blank">jQuery plugin Watermark - MIT License (c) lelinhtinh</a> |
|
|
| <hr> |
| <div style="text-align:center"> |
| <a href="http://urbanqee.com" target="_top"> |
| <img src="http://urbanqee.com/cgi-ssi/counter/wwwcount.cgi?hide+m3ico2_on.gif" border=0 title="HOME"> |
| </a> |
| <br> |
| <font color=gray><small><small>最終更新日</small>:2022. 5. 5</font></small> |
| </div> |
|
|
| </body> |
| </html> |
| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>slick 文字透かし(watermark)サンプル)</title> |
| <meta charset="UTF-8"> |
|
|
| |
| <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> |
| <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> |
|
|
|
|
| <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> |
|
|
| <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/> |
|
|
|
|
| <script src="jquery.watermark.min.js" type="text/javascript"></script> |
|
|
| <style type="text/css"> |
| html, body { |
| margin: 0; |
| padding: 0; |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| .slider { |
| width: 50%; |
| margin: 20px auto; |
| } |
|
|
| .slick-slide { |
| margin: 0px 20px; |
| } |
|
|
| .slick-slide img { |
| width: 100%; |
| } |
|
|
| .slick-prev:before, |
| .slick-next:before { |
| color: black; |
| } |
|
|
| .slick-slide { |
| transition: all ease-in-out .3s; |
| opacity: .2; |
| } |
| |
| .slick-active { |
| opacity: .5; |
| } |
|
|
| .slick-current { |
| opacity: 1; |
| } |
| </style> |
| </head> |
| <body> |
| <h1 style="text-align:center">slick 文字透かし(watermark)サンプル</h1> |
|
|
| <section class="regular slider"> |
| <div> |
| <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-11.jpg" class="mark"> |
| </div> |
| <div> |
| <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-12.jpg" class="mark"> |
| </div> |
| <div> |
| <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-13.jpg" class="mark"> |
| </div> |
| <div> |
| <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-14.jpg" class="mark"> |
| </div> |
| <div> |
| <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-09.jpg" class="mark"> |
| </div> |
| <div> |
| <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-16.jpg" class="mark"> |
| </div> |
| </section> |
|
|
| <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> |
|
|
|
|
|
|
| <script> |
| $(function() { |
| $('.mark').watermark({ |
| |
| text: '透かしのテキスト DRAFT', |
| textWidth: 500, |
| textSize: 36, |
| textColor: 'white', |
| textBg: 'rgba(0, 0, 0, 0.4)', |
| gravity: 'c', |
| opacity: 0.7, |
| margin: 10, |
| }); |
| }); |
| </script> |
|
|
|
|
| <script type="text/javascript"> |
| $(function() { |
| $(".regular").slick({ |
| autoplay: true, |
| autoplaySpeed: 5000, |
| dots: true, |
| infinite: true, |
| slidesToShow: 1, |
| slidesToScroll: 1 |
| }); |
| }); |
| </script> |
|
|
|
|
| $('.slider').slick({ |
| // アクセシビリティ。左右ボタンで画像の切り替えをできるかどうか |
| accessibility: true, |
| // 自動再生。trueで自動再生される。 |
| autoplay: false, |
| // 自動再生で切り替えをする時間 |
| autoplaySpeed: 3000, |
| // 自動再生や左右の矢印でスライドするスピード |
| speed: 400, |
| // 自動再生時にスライドのエリアにマウスオンで一時停止するかどうか |
| pauseOnHover: true, |
| // 自動再生時にドットにマウスオンで一時停止するかどうか |
| pauseOnDotsHover: true, |
| // 切り替えのアニメーション。ease,linear,ease-in,ease-out,ease-in-out |
| cssEase: 'ease', |
| // 画像下のドット(ページ送り)を表示 |
| dots: false, |
| // ドットのclass名をつける |
| dotsClass: 'dot-class', |
| // ドラッグができるかどうか |
| draggable: true, |
| // 切り替え時のフェードイン設定。trueでon |
| fade: false, |
| // 左右の次へ、前へボタンを表示するかどうか |
| arrows: true, |
| // 無限スクロールにするかどうか。最後の画像の次は最初の画像が表示される。 |
| infinite: true, |
| // 最初のスライダーの位置 |
| initialSlide: 0, |
| // 画像の遅延表示。‘ondemand’or'progressive' |
| lazyLoad: 'ondemand', |
| // スライドのエリアにマウスオーバーしている間、自動再生を止めるかどうか。 |
| pauseOnHover: true |
| // スライドのエリアに画像がいくつ表示されるかを指定 |
| slidesToShow: 4, |
| // 一度にスライドする数 |
| slidesToScroll: 1, |
| // タッチスワイプに対応するかどうか |
| swipe: true, |
| // 縦方向へのスライド |
| vertical: false, |
| // 表示中の画像を中央へ |
| centerMode: true, |
| // 中央のpadding |
| centerPadding: '160px' |
| }); |
| --> |
|
|
| <a href="https://kenwheeler.github.io/slick/" target="_blank">Copyright (c) 2017 Ken Wheeler</a><br> |
| <a href="https://lelinhtinh.github.io/watermark/" target="_blank">jQuery plugin Watermark - MIT License (c) lelinhtinh</a> |
|
|
| <hr> |
| <div style="text-align:center"> |
| <a href="http://urbanqee.com" target="_top"> |
| <img src="http://urbanqee.com/cgi-ssi/counter/wwwcount.cgi?hide+m3ico2_on.gif" border=0 title="HOME"> |
| </a> |
| <br> |
| <font color=gray><small><small>最終更新日</small>:2022. 5. 5</font></small> |
| </div> |
|
|
| </body> |
| </html> |
| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8" /> |
| <title>Swiper 画像透かし(watermark)サンプル</title> |
| <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /> |
| |
| <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> |
|
|
| |
| <style> |
| html, |
| body { |
| position: relative; |
| height: 100%; |
| } |
|
|
| body { |
| background: #f5f5f5; |
| font-family: Helvetica Neue, Helvetica, Arial, sans-serif; |
| font-size: 14px; |
| color: #000; |
| margin: 0; |
| padding: 0; |
| } |
|
|
| .swiper { |
| width: 100%; |
| height: 100%; |
| } |
|
|
| .swiper-slide { |
| text-align: center; |
| font-size: 18px; |
| background: #f5f5f5; |
|
|
| |
| display: -webkit-box; |
| display: -ms-flexbox; |
| display: -webkit-flex; |
| display: flex; |
| -webkit-box-pack: center; |
| -ms-flex-pack: center; |
| -webkit-justify-content: center; |
| justify-content: center; |
| -webkit-box-align: center; |
| -ms-flex-align: center; |
| -webkit-align-items: center; |
| align-items: center; |
| } |
|
|
| .swiper-slide img { |
| display: block; |
| width: 960pv; |
| height: 720px; |
| object-fit: cover; |
| } |
| </style> |
|
|
|
|
| <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script> |
|
|
|
|
| <script src="https://unpkg.com/watermark@1.0.2/dist/jquery.watermark.min.js" type="text/javascript"></script> |
|
|
| </head> |
| <body> |
| <h1 style="text-align:center">Swiper 画像透かし(watermark)サンプル</h1> |
| |
| <div class="swiper mySwiper"> |
| <div class="swiper-wrapper"> |
| <div class="swiper-slide"><img src="http://urbanqee.com/webutil/slideshow/img/rose-165819_960_720.jpg" class="img_awesome" ></div> |
| <div class="swiper-slide"><img src="http://urbanqee.com/webutil/slideshow/img/rose-pink-185961_960_720.jpg" class="img_awesome" ></div> |
| <div class="swiper-slide"><img src="http://urbanqee.com/webutil/slideshow/img/rose-3802424_960_720.jpg" class="img_awesome" ></div> |
| <div class="swiper-slide"><img src="http://urbanqee.com/webutil/slideshow/img/rose-2417334_960_720.jpg" class="img_awesome" ></div> |
| <div class="swiper-slide"><img src="http://urbanqee.com/webutil/slideshow/img/white-rose-2907862_960_720.jpg" class="img_awesome" ></div> |
| </div> |
| <div class="swiper-button-next"></div> |
| <div class="swiper-button-prev"></div> |
| <div class="swiper-pagination"></div> |
| </div> |
| <br> |
| <br> |
| <a href="https://swiperjs.com/" target="_balnk">MIT Licensed Swiper </a><br> |
| <a href="https://lelinhtinh.github.io/watermark/" target="_blank">jQuery plugin Watermark - MIT License (c) lelinhtinh</a> |
| <hr> |
| <div style="text-align:center"> |
| <a href="http://urbanqee.com" target="_top"> |
| <img src="http://urbanqee.com/cgi-ssi/counter/wwwcount.cgi?hide+m3ico2_on.gif" border=0 title="HOME"> |
| </a> |
| <br> |
| <font color=gray><small><small>最終更新日</small>:2022. 5. 5</font></small> |
| </div> |
|
|
| |
| <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> |
|
|
| |
| <script> |
| var swiper = new Swiper(".mySwiper", { |
| cssMode: true, |
| navigation: { |
| nextEl: ".swiper-button-next", |
| prevEl: ".swiper-button-prev", |
| }, |
| pagination: { |
| el: ".swiper-pagination", |
| }, |
| mousewheel: true, |
| keyboard: true, |
| }); |
| </script> |
|
|
|
|
| <script> |
| $(function() { |
| $('.img_awesome').watermark({ |
| path: 'http://urbanqee.com/webutil/photo/fancybox3/img/wartermark-2-2095933.png', |
| gravity: 'n', |
| }); |
| }); |
| </script> |
|
|
| </body> |
| </html> |
| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8" /> |
| <title>Swiper 文字透かし(watermark)サンプル</title> |
| <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /> |
| |
| <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> |
|
|
| |
| <style> |
| html, |
| body { |
| position: relative; |
| height: 100%; |
| } |
|
|
| body { |
| background: #eee; |
| font-family: Helvetica Neue, Helvetica, Arial, sans-serif; |
| font-size: 14px; |
| color: #000; |
| margin: 0; |
| padding: 0; |
| } |
|
|
| .swiper { |
| width: 100%; |
| height: 100%; |
| } |
|
|
| .swiper-slide { |
| text-align: center; |
| font-size: 18px; |
| background: #fff; |
|
|
| |
| display: -webkit-box; |
| display: -ms-flexbox; |
| display: -webkit-flex; |
| display: flex; |
| -webkit-box-pack: center; |
| -ms-flex-pack: center; |
| -webkit-justify-content: center; |
| justify-content: center; |
| -webkit-box-align: center; |
| -ms-flex-align: center; |
| -webkit-align-items: center; |
| align-items: center; |
| } |
|
|
| .swiper-slide img { |
| display: block; |
| width: 960pv; |
| height: 720px; |
| object-fit: cover; |
| } |
| </style> |
|
|
|
|
| <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script> |
|
|
|
|
| <script src="https://unpkg.com/watermark@1.0.2/dist/jquery.watermark.min.js" type="text/javascript"></script> |
|
|
| </head> |
| <body> |
| <h1 style="text-align:center">Swiper 文字透かし(watermark)サンプル</h1> |
| |
| <div class="swiper mySwiper"> |
| <div class="swiper-wrapper"> |
| <div class="swiper-slide"><img src="http://urbanqee.com/webutil/slideshow/img/rose-165819_960_720.jpg" class="img_awesome" ></div> |
| <div class="swiper-slide"><img src="http://urbanqee.com/webutil/slideshow/img/rose-pink-185961_960_720.jpg" class="img_awesome" ></div> |
| <div class="swiper-slide"><img src="http://urbanqee.com/webutil/slideshow/img/rose-3802424_960_720.jpg" class="img_awesome" ></div> |
| <div class="swiper-slide"><img src="http://urbanqee.com/webutil/slideshow/img/rose-2417334_960_720.jpg" class="img_awesome" ></div> |
| <div class="swiper-slide"><img src="http://urbanqee.com/webutil/slideshow/img/white-rose-2907862_960_720.jpg" class="img_awesome" ></div> |
|
|
| <div class="swiper-slide">Slide 1</div> |
| <div class="swiper-slide">Slide 2</div> |
| <div class="swiper-slide">Slide 3</div> |
| <div class="swiper-slide">Slide 4</div> |
| <div class="swiper-slide">Slide 5</div> |
| <div class="swiper-slide">Slide 6</div> |
| <div class="swiper-slide">Slide 7</div> |
| <div class="swiper-slide">Slide 8</div> |
| <div class="swiper-slide">Slide 9</div>--> |
| </div> |
| <div class="swiper-button-next"></div> |
| <div class="swiper-button-prev"></div> |
| <div class="swiper-pagination"></div> |
| </div> |
|
|
| <br> |
| <a href="https://swiperjs.com/" target="_balnk">MIT Licensed Swiper </a><br> |
| <a href="https://lelinhtinh.github.io/watermark/" target="_blank">jQuery plugin Watermark - MIT License (c) lelinhtinh</a> |
| <hr> |
| <div style="text-align:center"> |
| <a href="http://urbanqee.com" target="_top"> |
| <img src="http://urbanqee.com/cgi-ssi/counter/wwwcount.cgi?hide+m3ico2_on.gif" border=0 title="HOME"> |
| </a> |
| <br> |
| <font color=gray><small><small>最終更新日</small>:2022. 5. 5</font></small> |
| </div> |
|
|
| |
| <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> |
|
|
| |
| <script> |
| var swiper = new Swiper(".mySwiper", { |
| cssMode: true, |
| navigation: { |
| nextEl: ".swiper-button-next", |
| prevEl: ".swiper-button-prev", |
| }, |
| pagination: { |
| el: ".swiper-pagination", |
| }, |
| mousewheel: true, |
| keyboard: true, |
| }); |
| </script> |
|
|
|
|
| <script> |
| $(function(){ |
| $('.img_awesome').watermark({ |
| text: 'これは透かしのテキストです・・・', |
| textWidth: 500, |
| textSize: 30, |
| textColor: 'white', |
| textBg: 'rgba(0, 0, 0, 0.4)', |
| gravity: 'c', |
| opacity: 0.7, |
| margin: 10, |
| }); |
| }); |
| </script> |
|
|
| </body> |
| </html> |