Android PHP デザインまとめ

android php を使ったプログラム等の書き方 phpで取得する

WEBデザイン

【jquery】ブロック状に繰り返し画像が開くslider(coinslider)


サンプルはこちら

1.zipファイルダウンロードします
ダウンロード(coin-slider)

2.下記2つを取得します
coin-slider.min.js
coin-slider-styles.css

3.画像を配置します、
画像の指定
a1










<div id="coin">
<img src="images/a1.jpg" alt="" />
<img src="images/a2.jpg" alt="" />
<img src="images/a3.jpg" alt="" />
<img src="images/a4.jpg" alt="" />

<img src="images/a5.jpg" alt="" />
</div>

4.jsとcssコード
<script type="text/javascript" src="./js/jquery-1.7.1.min.js">
</script>
<script type="text/javascript" src="./js/coin-slider.min.js">
</script>
<link rel="stylesheet" type="text/css" href="./css/coin-slider-styles.css" />
<script>$(document).ready(function() {
$('#coin').coinslider({ hoverPause: false });
});
< /script>

5.coin-slider.min.js の書換え (最後の行の、最後の方)

width:100,
height:190,
spw:15,
sph:5,
delay:3000,
sDelay:20,
opacity:0.7,
titleSpeed:500,
effect:'rain',navigation:true,links:true,hoverPause:true};})(jQuery);

にほんブログ村 IT技術ブログ 在宅プログラマーへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ IT技術情報へ

【jquery】jQuery Easing Pluginの使い方(jQuery Cycle Plugin)

スライドショーを表示するAjaxライブラリです。
jQuery Easing Plugin 取得
easing








<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.cycle.all.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>

<script type="text/javascript">
$('#scrolldown').cycle({
    fx: 'scrollDown',
    easing: 'easeOutBounce',
    delay: -2000
});
</script>

<!-- 【画像の配置】 -->

<div id="cycle">
    <img src="./images/image1.jpg" width="100" height="100" alt="" />
    <img src="./images/image2.jpg" width="100" height="100" alt="" />
    <img src="./images/image3.jpg" width="100" height="100" alt="" />
</div>
>>>>>>>>>>

サンプル【6


にほんブログ村 IT技術ブログ 在宅プログラマーへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ IT技術情報へ

【jquery】jQuery Cycle Pluginの使い方

スライドショーを表示するAjaxライブラリです。
jQuery Cycle Plugin 取得

※jQuery必須⇒こちらから


<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.cycle.all.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
    $('div#cycle').cycle();
});
</script>

<!-- 【画像の配置】 -->

<div id="cycle">
    <img src="./images/image1.jpg" width="100" height="100" alt="" />
    <img src="./images/image2.jpg" width="100" height="100" alt="" />
    <img src="./images/image3.jpg" width="100" height="100" alt="" />
</div>
>>>>>>>>>>

サンプル

1000000-s






にほんブログ村 IT技術ブログ 在宅プログラマーへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ IT技術情報へ

【jquery】jQueryを使うには

jQuery公式サイト の ダウンロードページ
ファイルをダウンロードし、自分のブログや、レンタルサーバに配置します
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

リンクを指定するだけの方法
CDN(Contents Delivery Network)、コンテンツデリバリーネットワークを使う方法
Google Ajax API CDN

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

※SSL(https://)でも可能

にほんブログ村 IT技術ブログ 在宅プログラマーへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ IT技術情報へ

【jquery】プログラム ColorBoxカラーボックス

1.jQueryのダウンロード

2.ColorBoxのダウンロード
2-1.zipファイル解凍します。


3.ファイルの取得
3-1.解凍したファイルを取得する
①/colorbox/jquery.colorbox-min.js

example1~5 のうち どれか1つ(5パターンある、表示の仕方が違う)
②/colorbox/example1/colorbox.css
③/colorbox/example1/images/

colorbox1
「jquery」
・/js/jquery-1.7.1.min.js

「新規ファイル」
・index.html
・t01.jpg


>>>>>>>>>>>>>>>>>>>>
HTMLファイル index.html
>>>>>>>>>>>>>>>>>>>>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>colorboxテスト</title>
<meta name="description" content="" />
<meta name="keywords" content="" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./jquery.colorbox-min.js"></script>
<link rel="stylesheet" type="text/css" href="./colorbox.css" />

<script>
$(document).ready(function(){
    $("#photo a").colorbox();
});
</script>

</head>

<body id="bio">
<p id="photo"><a href="./t01.jpg">写真</a></p>

</html>

>>>>>>>>>>>>>>>>>>>>>>>>>>>>
colorbox2






colorbox3




にほんブログ村 IT技術ブログ 在宅プログラマーへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ IT技術情報へ
スポンサードリンク









にほんブログ村 IT技術ブログへ
にほんブログ村

にほんブログ村 IT技術ブログ PHPへ
にほんブログ村

にほんブログ村 IT技術ブログ IT技術情報へ
にほんブログ村

QRコード
QRコード
  • ライブドアブログ