Squarespace - How to display description/custom text on index thumbnail on hover

问题

Basically, I want to be able to show title and some text on hover on all my index thumbnail like this website. http://www.timboelaars.nl/

However, in the current squarespace template that I am using (I believe it's called York), the markup is only grabbing the page title and therefore displaying the page title on hover. (See the below code block, you can see the page title in there, that's the only thing that the template displays on Hover)

<div class="index-item-text-wrapper">
                    <h2 class="index-item-title">
                        <a class="index-item-title-link" href="/google-shopping/" data-ajax-loader="ajax-loader-binded"><span class="index-item-title-text">**PAGE TITLE**</span></a>
                    </h2>
                </div>

There's no field for me to put any HTML so I am seeking help to use javascript to manually inject custom HTML markup to every single thumbnail, then show them on hover.

TL;DR I want to be able to display more than just the title on hover (ideally my own HTML markup so I can customize the style) on my thumbnails but that's not supported by the template.

Here is my website http://shensamuel.com/

I am really weak at Javascript and I've searched for a solution for this problem for quite long. Any help will be much appreciated!

Thanks!

回答1:

The following Javascript can be used to insert text for each tile on the page. The code would be inserted using the footer code injection area (unless you're using Developer Mode in which case you'd insert it with the rest of your scripts).

<script>
(function() {
    var tiles = document.getElementsByClassName('index-section');
    var thisTile;
    var titleText;
    var description;
    var parent;
    var i, I;

    for (i=0, I=tiles.length; i<I; i++) {
        thisTile = tiles[i];
        titleText = thisTile.getElementsByClassName('index-item-title-text')[0];
        parent = thisTile.getElementsByClassName('index-item-text-wrapper')[0];
        description = document.createElement('span');
        description.className = 'index-item-description-text';
        switch(titleText.innerHTML.toLowerCase()) {
            case "google shopping":
                description.innerHTML = "Some custom text.";
                break;
            case "hana":
                description.innerHTML = "More text that's custom.";
                break;
            case "wali":
                description.innerHTML = "Custom text here.";
                break;
            case "cypress":
                description.innerHTML = "Type anything you want.";
                break;
            case "ryde":
                description.innerHTML = "Just another bit of text.";
                break;
            default:
                description.innerHTML = "";
        }
        parent.appendChild(description);
    }
})();
</script>

Observe the pattern in the code in order to add new tiles or edit existing ones. You will see that the script attempts to match (a lower case version of) the 'title' text and then inserts text based on each title. This allows you to add more in the future by repeating this 'case' pattern. Of course if you ever change the title of a tile you'd have to correspondingly change this Javascript code.

You can then style the description by inserting CSS via the Squarespace CSS Editor (or via your base.less file if using Developer Mode). For example:

.index-item-description-text {
    display: block;
    font-size: 1.2em;
    color: #FFFFFF
}

Note that while there is an alternative method that would use each tile's respective URL to do an AJAX query and obtain meta data about each project (and therefore allow you to use the Squarespace content manager to insert this 'description'), that method seems unnecessarily complex for your case.

Update 8/17/2016: Regarding AJAX and how to disable AJAX loader in Squarespace: Jason Barone has suggested adding this snippet to your Code Injection > Footer to disable the "AJAX" pageloader. He noted that it will disable the smooth, AJAX transitions between pages, but will allow custom Javascript like usual.

<script>
    //Credit: Jason Barone, http://jasonbarone.com/
    window.Template.Constants.AJAXLOADER = false;
</script>

Also, some templates have an option to disable AJAX within the style editor (image credit: SSSUPERS):

Update 9/28/2016: It has been reported that the code provided above no longer disable AJAX. However, some newer templates have added an 'Enable AJAX Loading' setting that can be toggled off.

来源：https://stackoverflow.com/questions/38914191/squarespace-how-to-display-description-custom-text-on-index-thumbnail-on-hover

标签

javascript

thumbnails

squarespace