0

See demo @ https://timeline.knightlab.com

Advance one slide to Ada Lovelace. As you can see in this JSBin, wrapping this image with jQuery is simple. However, I'm not able to do it on the actual website that I've integrated Timeline JS3.

HTML:

<div class="tl-media-content"><img class="tl-media-item tl-media-image tl-media-shadow" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Ada_Lovelace_portrait.jpg/713px-Ada_Lovelace_portrait.jpg" style="max-height: 412px;"></div>

<div class="tl-credit" style="width: 286px;">Wikimedia Commons</div>

<div class="tl-caption" style="width: 286px;"><a href="https://en.wikipedia.org/wiki/Ada_Lovelace#/media/File:Ada_Lovelace_portrait.jpg" title="">Portrait by Alfred Edward Chalon</a></div>

JS:

jQuery(document).ready(function($){
    jQuery('.tl-media-item').wrap('<div class="wrappingdiv" />');
});

CSS:

.wrappingdiv {background:red; padding:10px;}

I've tried refining the order of execution (ensuring it executes after timeline.js loads), but it still doesn't seem to work.

Any ideas?

WebMW
  • 514
  • 2
  • 13
  • 26
  • @PatrickEvans No problem. Edited! – WebMW Jul 10 '16 at 18:27
  • Possible duplicate of: [jQuery/JavaScript: accessing contents of an iframe](http://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe) – Patrick Evans Jul 10 '16 at 18:29
  • @PatrickEvans, this has nothing to do with the same origin policy. The contents of my embedded timeline are being hosted on my server, and the timeline isn't even in an iframe. – WebMW Jul 10 '16 at 18:32
  • But it is in an iframe, http://i.imgur.com/ISShmOo.png, your `.tl-media-item` element is in an iframe at `cdn.knightlab.com`, while the link you posted is `timeline.knightlab.com`. That makes them a different origin as the (sub)domain are not the same – Patrick Evans Jul 10 '16 at 18:37
  • @PatrickEvans, wow you're right, that's interesting! The actual timeline embedding in Timeline JS3 doesn't use an iframe. What I have on my site is a timeline not embedded in an iframe, and without an src to another domain. – WebMW Jul 10 '16 at 18:45
  • _"What I have on my site"_ Then you need to provide what is actually on your site, eg make/show a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) of the problem – Patrick Evans Jul 10 '16 at 18:56
  • @PatrickEvans, if you venture into the iframe in this demo, it is exactly what I have on my site: https://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk&font=Default&lang=en&initial_zoom=2&height=650 I'm using this as a demonstration because it is an example that applies exactly to my use. What I am wondering is simply how to wrap the image rendered in the media with an additional div element. – WebMW Jul 10 '16 at 19:03
  • Well in that iframe jQuery isn't included so doing any `jQuery()` calls would end up with a `ReferenceError` stating that jQuery is not defined. So if its exactly like that page you wouldn't have jQuery defined either, have you looked at your javascript console for errors? Note that TimelineJS seems to define their own `$` global that seems to have similar api calls like jQuery, so you might be able to use that if jQuery isnt defined. – Patrick Evans Jul 10 '16 at 19:22

0 Answers0