javascript - 人々が画像をクリックして、関連するコードを GIthubPage にコピーできるようにするにはどうすればよいですか?

Question

画像をクリックしてボックスを開き、関連するコードをコピーしますか?

Wolfram の参照 Web サイトにはこの機能がありますが、Github ページに実装するにはどうすればよいですか? またはいくつかの同様のもの？（JSコード？）

現在の人のページ、テーマはありますか?

http://reference.wolfram.com/mathematica/ref/Part.html

Answer 1

You can see the result of my description here

This effect my be achieved completely without javascript, keeping the code really simple.

We have to wrap the image and the code in a container, so that we know which one goes where. I'd suggest a <figure> element, as those are thoughtfor exactly this reason. We can then wrap our code example, explanation and whatnot in a nice <figcaption> element.

I'd say a code example should be in a <textarea>, as there it's already preformatted, has monospaced font and most importantly can be completely selected for copying with strg+a

So we have the following structure:

<figure>
    <img />
    <figcaption>
        <textarea />
    </figcaption>
</figure>

We can then hide the <figcaption>, with CSS so by default it's not visible

figure figcaption {
    display: none;
}

Now, how do we make it visible? There is a neat, very underused feature called tabindex, wich allows us to make single html elements "focussable", either by keyboard or by mouse. By setting a tabindex of 0, the element would be insert in the normal tab flow of the page. By setting the tabindex to -1, the item is clickable, but not focussable by keyboard.

So we set a tabindex of -1 on all figure elements:

<figure tabindex="-1">
</figure>

And now, by clicking on the image, you give the entire figure element focus. We can use this to show the box with CSS:

figure:focus figcaption {
    display: block;
}

This is already nearly what we want, only as soon as we click into the <textarea>, it gets focus, and it disappears again, as only one item at a time can be focussed on a page.

Thus we can add the following piece of CSS, which keeps on showing us the figcaption when we hover it:

figure figcaption:hover {
    display: block;
}

By default, focussed elements get a outline in some browsers. This my be somehow ugly in your case, so we can turn it off globally with CSS:

*:focus {
    outline: none;
}

Then you only have to style the items like you wish they would look, position them, and you're done.

I built a small example, where you can see the code in action. Just check it out. The images are just sample pictures from Lorem Pixel, the code samples are from the ruby homepage.

Here's the code for my example (with just a bit of styling so you can see an example for that too):

HTML

<figure class="codeImage" tabindex="-1">
    <img src="http://lorempixel.com/400/200/" />
    <figcaption>
        Some sample code, maybe with some explanation:
        <textarea>
# The Greeter class
class Greeter
  def initialize(name)
    @name = name.capitalize
  end

  def salute
    puts "Hello #{@name}!"
  end
end

# Create a new object
g = Greeter.new("world")

# Output "Hello World!"
g.salute
        </textarea>
    </figcaption>
</figure>

<figure class="codeImage" tabindex="-1">
    <img src="http://lorempixel.com/400/200/" />
    <figcaption>
        Some other code smaple, maybe with some explaination:
        <textarea>
# Output "I love Ruby"
say = "I love Ruby"
puts say

# Output "I *LOVE* RUBY"
say['love'] = "*love*"
puts say.upcase

# Output "I *love* Ruby"
# five times
5.times { puts say }

# Create a new object
g = Greeter.new("world")

# Output "Hello World!"
g.salute
        </textarea>
    </figcaption>
</figure>

CSS

/**
 * Example for images with copyable code sample on click
 */
*:focus {
    outline: none;
}

figure {
    box-sizing: border-box;
    width: 440px;
    height: 250px;
    padding: 20px;
    display: inline-block;
    margin: 20px;
    border: 1px solid #333;
    color: #333;
    background-color: #ccc;
    position: relative;
    z-index: 1;
}

figure figcaption {
    box-sizing: border-box;
    border: 1px solid #333;
    background-color: white;
    position: absolute;
    top: 70px;
    left: 0; 
    display: none;
    z-index: 2;
    width: 440px;
    padding: 10px;
}

figure figcaption textarea {
    width: 400px;
    min-height: 200px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

figure:focus figcaption {
    display: block;
}

figure figcaption:hover {
    display: block;
}

Answer 2

これは私が@HyperGroupsで行うことです。ただし、単なるサンプルです。ケースに応じて変更できます。特にテキストは何を表示しますか。AJAXを使用することをお勧めします。

ポップアップにjqueryダイアログを使用しています。パラメータを受け取る関数。

HTML

<div id="popup"></div> ....

jQuery

function show_popup(particular_id){....

CSS

img{ display: inline-b...

このフィドルを開いて結果を確認します。