注文をクリックして画像を置き換えるコード？

私の質問を見ている人には、事前に感謝:)注文をクリックして画像を置き換えるコード？

私はむしろニュー・アイ・トゥ・トゥ・ウェブ・デザインであり、どんな種類のコーディングでも全く初心者です。だから、どんな助けでも大歓迎です！

私はウェブコミック用のウェブサイトを作っています。ページは次のように設定されている：{ページナビゲーション}で

{top nav} 
{comic page} 
{Page navigation} 
{Update blog}

私は、これらのアイコンは、コード化されてい：

<< (first page) | < (previous page) | Page # | > (next page) | >> (newest page)

私はクリックでページを切り替えるには、{漫画ページ}画像をコーディングしたいと思います。ただし、{ページのナビゲーション}リンクをクリックして正しいページに移動することもおすすめします。

私は、漫画のすべてのページに新しいhtmlページを作成する必要がないように、ページを自動的に切り替えるJavascriptコードまたは別の方法があるのだろうかと思っています約150になる）。テンプレートファイルを作成してから、javascriptを使ってイメージを置き換えることができますか？

私はまた、ページを順番に一覧表示するアーカイブページを持っています。このコードを自動的に更新する方法はありますか？

私はphpを使うのがうまくいくのか疑問に思っていますが、どこから始めたらいいのか分かりません。私のウェブホストは現在GoDaddyですが、それは私にいくつかのデータベースを与えますが、私はどのようにすべてのドットを接続するために失われています！

@charset "utf-8"; /* CSS Document */ 
 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t border: 0; 
 
\t font-size: 100%; 
 
\t font: inherit; 
 
\t vertical-align: baseline; 
 
} 
 
/* HTML5 display-role reset for older browsers */ 
 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
 
\t display: block; 
 
} 
 
.top_nav { 
 
\t margin: 0 auto; 
 
\t width: 100%; 
 
\t padding-top: 5px; 
 
\t padding-bottom: 5px; 
 
\t background-color: black; 
 
\t text-align:center; 
 
} 
 

 
.page { 
 
\t margin: 0 auto; 
 
\t width:48%; 
 
\t max-width: 900px; 
 
\t min-width: 300px; 
 
\t margin-top: 3%; 
 
\t margin-bottom: 1.5%; 
 
\t height: 100%; 
 
\t box-shadow: 0 0 20px black; 
 
} 
 
.comic_nav { 
 
\t width: 100%; 
 
\t padding-top: 30px; 
 
\t padding-bottom: 30px; 
 
\t background-color: black; 
 
\t text-align:center; 
 
} 
 
body { 
 
\t background-color:#3A3A3A; 
 
\t color: #505050; 
 
\t font-family: 'Lato', sans-serif; 
 
\t font-size: 17px; 
 
\t line-height: 1.5; 
 
} 
 
h2 { 
 
\t color: white; 
 
\t font-family: 'Cinzel', serif; 
 
\t padding: 5px 7px; 
 
\t font-size: 20px; 
 
\t text-decoration: none; \t 
 
\t display: inline-block; 
 
} 
 

 
/* ============================================================ 
 
    LISTS 
 
============================================================ */ 
 
nav ul { 
 
\t list-style: none; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t text-align: center; 
 
} 
 
nav li { 
 
\t display: inline-block; 
 
} 
 
li a:link, a:visited { 
 
\t padding: 5px 7px; 
 
\t text-align: center; 
 
\t font-size: 20px; 
 
\t text-decoration: none; 
 
\t display: inline-block; 
 
\t color: white; 
 
\t font-family: 'Cinzel', serif; 
 
} 
 
li a:hover, a:active { 
 
\t background-color:#CCC; 
 
} 
 

 
a { 
 
\t text-decoration: none; 
 
\t color: white; 
 
\t font-family: 'Cinzel', serif; 
 
} 
 
a:hover { 
 
\t color: gray; 
 
}

<body> 
 
<div class="wrapper"> 
 
    <!-- TOP NAVIGATION --> 
 
    <div class="top_nav"> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="miragecomic.html">Home</a> |</li> 
 
     <li> <a href="#">Archive</a> |</li> 
 
     <li> <a href="#">About</a> |</li> 
 
     <li> <a href="#">Cast</a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
    <!-- END TOP NAVIGATION --> 
 
    <!-- COMIC PAGE --> 
 
    <div class="page"> <a href="miragecomic.html"><img src="img/pages/1.jpg" style="width:100%; max-width: 900px; min-width: 400px; height:auto;" alt="Page 1" /></a> </div> 
 
    <!-- END COMIC PAGE--> 
 
    <!-- COMIC NAVIGATION --> 
 
    <div class="comic_nav"> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="#"><<</a> |</li> 
 
     <li> <a href="#"><</a> |</li> 
 
     <li> 
 
      <h2>Page#</h2> 
 
      |</li> 
 
     <li> <a href="#">></a></li> 
 
     | 
 
     <li> <a href="#">>></a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
    <!-- END COMIC NAVIGATION -->

出典

2016-12-01 M. Nels

私が推薦する何をJSONで（あなたのデータを送信し、APIのようなサーバー（express, for example）である：ここでは

は現在、コミックページのコードとナビゲーションがありますあなたはJQueryを解析することができます。次に、JQueryは適切なdivにデータを配置できます。サーバーに/comic/:idルートがあるとします。（あなたが最初のページにあるため）あなたは<li><a href="/comic/2">></a></li>をクリックすると、それはあなたをお送りします：

{ 現在： '2'、画像： '新しい-url.jpg' }

jQueryを使って

次に、：$('.page img').src = data.imageと$('#previousImage').href = data.current - 1と$('#nextImage').href = data.current + 1など

私が行うのは簡単で効率的と思われるものだけのアイデアだということを覚えておいてください:)

$(document).ready(function() { 
 
    $('#nextImage').click(function (event) { 
 
    $.get('https://my-server.com/api' + event.target.href, function (data) { 
 
     $('#previousImage').href = data.current - 1; 
 
     $('#nextImage').href = data.current + 1; 
 
     $('#currentImage').src = data.image; 
 
    }); 
 
    }); 
 
});

@charset "utf-8"; /* CSS Document */ 
 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t border: 0; 
 
\t font-size: 100%; 
 
\t font: inherit; 
 
\t vertical-align: baseline; 
 
} 
 
/* HTML5 display-role reset for older browsers */ 
 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
 
\t display: block; 
 
} 
 
.top_nav { 
 
\t margin: 0 auto; 
 
\t width: 100%; 
 
\t padding-top: 5px; 
 
\t padding-bottom: 5px; 
 
\t background-color: black; 
 
\t text-align:center; 
 
} 
 

 
.page { 
 
\t margin: 0 auto; 
 
\t width:48%; 
 
\t max-width: 900px; 
 
\t min-width: 300px; 
 
\t margin-top: 3%; 
 
\t margin-bottom: 1.5%; 
 
\t height: 100%; 
 
\t box-shadow: 0 0 20px black; 
 
} 
 
.comic_nav { 
 
\t width: 100%; 
 
\t padding-top: 30px; 
 
\t padding-bottom: 30px; 
 
\t background-color: black; 
 
\t text-align:center; 
 
} 
 
body { 
 
\t background-color:#3A3A3A; 
 
\t color: #505050; 
 
\t font-family: 'Lato', sans-serif; 
 
\t font-size: 17px; 
 
\t line-height: 1.5; 
 
} 
 
h2 { 
 
\t color: white; 
 
\t font-family: 'Cinzel', serif; 
 
\t padding: 5px 7px; 
 
\t font-size: 20px; 
 
\t text-decoration: none; \t 
 
\t display: inline-block; 
 
} 
 

 
/* ============================================================ 
 
    LISTS 
 
============================================================ */ 
 
nav ul { 
 
\t list-style: none; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t text-align: center; 
 
} 
 
nav li { 
 
\t display: inline-block; 
 
} 
 
li a:link, a:visited { 
 
\t padding: 5px 7px; 
 
\t text-align: center; 
 
\t font-size: 20px; 
 
\t text-decoration: none; 
 
\t display: inline-block; 
 
\t color: white; 
 
\t font-family: 'Cinzel', serif; 
 
} 
 
li a:hover, a:active { 
 
\t background-color:#CCC; 
 
} 
 

 
a { 
 
\t text-decoration: none; 
 
\t color: white; 
 
\t font-family: 'Cinzel', serif; 
 
} 
 
a:hover { 
 
\t color: gray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
<div class="wrapper"> 
 
    <!-- TOP NAVIGATION --> 
 
    <div class="top_nav"> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="miragecomic.html">Home</a> |</li> 
 
     <li> <a href="#">Archive</a> |</li> 
 
     <li> <a href="#">About</a> |</li> 
 
     <li> <a href="#">Cast</a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
    <!-- END TOP NAVIGATION --> 
 
    <!-- COMIC PAGE --> 
 
    <div class="page"> <a href="miragecomic.html"><img id="currentImage" src="img/pages/1.jpg" style="width:100%; max-width: 900px; min-width: 400px; height:auto;" alt="Page 1" /></a> </div> 
 
    <!-- END COMIC PAGE--> 
 
    <!-- COMIC NAVIGATION --> 
 
    <div class="comic_nav"> 
 
    <nav> 
 
     <ul> 
 
     <li><a id="firstImage" href="/comic/first"><<</a> |</li> 
 
     <li> <a id="previousImage" href="/comic/13"><</a> |</li> 
 
     <li> 
 
      <h2>Page 14</h2> 
 
      |</li> 
 
     <li> <a id="nextImage" href="/comic/15">></a></li> 
 
     | 
 
     <li> <a id="lastImage" href="/comic/last">>></a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
    <!-- END COMIC NAVIGATION -->

出典

2016-12-01 15:48:13 Fluf

うわー、そんなにありがとう！これは非常にきれいに見え、それが私のために働くように！私はAPIやサーバーで深いことをしたことがないので、ExpressとNodeを調べました。 GoDaddy共有サーバーにNodeを5ドルで追加できます。 GoDaddyサーバーでノードとエクスプレスを設定する方法に関するチュートリアルへのリンクはありますか？私はこれですべてのnewbだと認めて悲しい！ –

さて、私はGoDaddyの計画に何が含まれているのか分かりませんが、コマンドラインツールにアクセスできる場合は[node.js]（https://nodejs.org/ja/）をインストールし、[クイックスタートexpress for express]（http://expressjs.com/en/starter/installing.html）:) また、サードパーティのソフトウェアをインストールする計画がない場合は、PHPで同じ結果を得ることができますAPI。この場合、[Slim Framework]（http://www.slimframework.com/）を見てください。これは非常に軽量なPHPフレームワークで、素早いAPI開発に最適です。 – Fluf

これは本当にそれが私を助けるように聞こえる！ GoDaddyはPHP要素を許可します。素晴らしい、すべてのアドバイスをいただきありがとうございます！：D –

注文をクリックして画像を置き換えるコード？

答えて

関連する問題