Comment puis-je obtenir du contenu dans mes pages de projet? (data-url)

J'ai un problème pour obtenir du contenu dans les pages du projet. (J'ai littéralement essayé de comprendre ça pendant 4 jours maintenant, en cherchant sur le web - je vais donner mon bras droit pour résoudre ça)Comment puis-je obtenir du contenu dans mes pages de projet? (data-url)

J'ai donc une simple page index.html avec 7 projets (7 images représentant chaque portfolio projet). Quand je clique sur l'une des images, je voudrais aller à la page montrant son contenu - j'arrive à la nouvelle page/#/WORK1/mais je ne peux pas comprendre où/comment insérer mon contenu dans cette nouvelle URL?

Vous pouvez voir le problème sur mon site ici: awesth.dk

Voici le code que je utilise pour les 7 projets. Travail1, Work2 etc.

<div id="projectPages"> 

<div class="project page-project" data-url="/WORK1/" > 

    <!-- Will be fetched on-demand --> 

</div> 
...

(Je ne sais pas comment je l'obtiens d'être "tiré par les cheveux à la demande")

Et voici les 7 pouces cliquables:

<div id="projectThumbs" > 
<div class="wrapper"> 

    <a class="project "href="/WORK1/" > 
    <div> 
     <div class="project-image"><div class="intrinsic"><div class="content-fill"><img data-src="/img/upcoming.png" data-image="/img/upcoming.png" data-image-dimensions="2500x1401" data-image-focal-point="0.5,0.5" alt="work" data-load="false"/><noscript><img src="/img/upcoming.png"></noscript></div></div><div class="project-item-count">0</div></div> 
     <div class="project-title">Titel1</div> 
    </div> 
    </a> 
    ...

Aide de Pleaaase

Source

2015-07-12 Aske W

Que voulez-vous dire en fait par "tiré par les cheveux à la demande"? –

Vous devez utiliser du code JavaScript en utilisant JQuery.

Il existe des méthodes dont vous avez besoin:

click() - pour ajouter gestionnaire d'événements de clic.
data() - pour obtenir la valeur de l'attribut data.
load() - pour charger le contenu d'une URL vers un élément.

UPD

Il est un exemple de l'utilisation de ces méthodes. Est-ce que cela correspond à votre cas?

https://jsfiddle.net/up495fzs/

UPD2

Vous devez mettre à jour votre code HTML sur le serveur.

Faites attention aux codes data-project-id="1" et id="project-id-1". Et mettre à jour les numéros respectivement.

Dans data-url définissez votre chemin relatif. Si vous voulez charger le fichier WORK1.html, vous devez écrire: data-url='/WORK1.html' (sans / à la fin).

UPD3

La connexion entre les blocs sont constitués par data-project-id="1" et id="project-id-1" attributs.

Je change le chemin pour obtenir l'URL.Je le laisse dans <a href="..."> et retiré de <div class="project page-project">.

https://jsfiddle.net/up495fzs/6/

Mais pour l'instant je réalisais que je ne comprends pas pourquoi vous avez besoin de nombreux éléments <div class="project page-project">. Pourquoi ne pas en utiliser un seul?

https://jsfiddle.net/up495fzs/5/

UPD4

Et vous devez savoir sur CORS (partage des ressources intersites origine) - https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

Vous pouvez charger le contenu directement depuis votre site Web. Il échouera si vous essayez de charger la page à partir du site Web externe.

UPD4

Vous pouvez utiliser history.pushState(null, null, link.href); mettre à jour l'URL de la page.

http://diveintohtml5.info/history.html

Mise à jour jsFiddle: https://jsfiddle.net/up495fzs/8/

Vous ne verrez pas les changements d'URL à jsFiddle parce qu'il fonctionne dans un cadre. Essayez-le sur votre page.

UPD5

Ajouter un lien à la bibliothèque JQuery à la <head> de votre page, mais avant mon script.

Ajoutez mon script encapsulé avec $(function() { /* JS code */ }); pour l'exécuter correctement.

<head> 
... 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
... 
<script> 
    $(function() { 
    /* JS code from JSFiddle */ 
    }); 
</script>

Source

2015-07-12 12:02:32

Vous devez fournir un code plus complet. Veuillez mettre à jour ce JSFiddle avec votre code HTML. –

Je vois que l'exemple fonctionne à jsfiddle - mais malheureusement je ne peux pas le faire fonctionner sur ma page même si je copie le html de jsfiddle et mets le JQuery en haut de mon . Si je le fais, mon pouce n'est soudainement plus cliquable? Dans l'exemple jsfiddle, vous avez écrit: data-url = "/ user/login /", puis l'utilisateur se connecte à jsfiddle. (parfait) Alors, est-ce que je le remplace par une page html que je télécharge sur mon serveur? Exemple: Je télécharge WORK1.html sur mon serveur et écris data-url = "/ WORK1.html /"? –

@AskeW Mise à jour de ma réponse. –

Comment puis-je obtenir du contenu dans mes pages de projet? (data-url)

Répondre

Questions connexes