Camera - Camera dans des Iframes

→ Aller plus loin en intégrant Camera dans des Iframes

Cela peut être utile, si on veut, par exemple afficher en même temps (dans la même page, ou bien dans des boîtes différentes apparaissant en même temps...ou dans une boîte et une page apparaissant en même temps...), plusieurs occurrences de Camera avec des réglages de style différents.

Cela peut être utile aussi pour utiliser Camera dans un autre CMS, ou encore dans un site en pur html...

Pour installer cette option simplement, il suffit d'installer la version décrite dans cette page (si ce n'est déjà fait...), puis de télécharger ce fichier : jquery.min.zip, de l'extraire du zip et de le placer dans le dossier skin/js (inutile par contre de le déclarer dans skin.inc : c'est le fichier décrit ci-dessous qui s'en charge. Et si on ne souhaite qu'utiliser Camera dans des Iframes, inutile de déclarer quelques fichiers que ce soit...).

Le fichier ci-dessous est un fichier type .html il peut être copié et édité dans un logiciel de taitement de texte pur comme notepad++ et enregistré au format .html et modifié à sa guise. D'ailleurs, si vous utilisez ces fichiers .html, veuillez, s'il vous plait en laisser les origines en haut du fichier... Merci...

→ Dans la partie [style]...[/style] vous trouverez le même type de réglage que dans les tutoriels précédents

→ Dans la partie [script]...[/script] vous trouverez exactement le même script de lancement que dans les tutoriels précédents

→ Dans la partie [body]...[/body] vous trouverez le même type de code que dans les tutoriels précédents... sauf que les chemins (et notamment des vignettes...) n'auront pas à être modifiés... s'ils sont corrects au départ.

Dans mes exemples, ce fichier cameraslider_test_camera.html est placé dans le dossier pages d'adHoc : il appelle les fichiers à partir de cette place : il remonte donc d'un niveau dans l'arborescence, suivi du chemin où il doit trouver ses sources (sans espace !) :

.. / skin / css / camera.css pour le fichier de style

.. / skin / js / ... pour les fichiers javascript

.. / images / test_camera / ... pour mes fichiers images

Le fichier fichier cameraslider_test_camera.html ci-dessus est appelé dans un Iframe qui peut être responsive (voir le tutoriel le permettant) ou non comme le présente le code ci-dessous :


<iframe scrolling="no" src="pages/cameraslider_test_camera.html" style="background:transparent;" width="100%" height="250px" frameborder="0"></iframe>

Ci-dessous le rendu dans cet Iframe

-----=====+++++=====-----

Me contacter pour toute aide ou information supplémentaire.


Index |Info | Imprimer | Permalien
Astuces

adHoc

Iframes responsives

Camera

Unite Gallery

Animations au survol

Autres astuces en CSS

Audio-Players

Carousels