[Anneka @ Sytner]

Hi Everyone,

Is anyone able to help me with a problematic bit of HTML Code?

The following code opens up a thickbox data popup when the word "Click" is selected by the viewer.

Code:

<td style="WIDTH: 10px"><p align="justify"> </p></td></tr></tbody></table></p><p align="justify">Click <a class="thickbox" href="#TB_inline?go=go&height=390&width=300&inline Id=scopeMenuDealer">here</a>

I'm trying to swap the word "Click" for an image, but can't figure out how to achieve this.

Any help will be gratefully appreciated.

Fingers crossed,
Anneka

[nicktyler]

I can answer this but I can't copy paste the edited code on my phone. Of no one else answers in the next hour or 2 I'll post when I get home.

[Anneka @ Sytner]

[dopper99]

Nothing will happen if you click the word "click". But it will if you click "here".
Not entirely sure what you are trying to do but it looks like you want an image that is a hyperlink? If so you want something like:

<p align="justify"><a class="thickbox" href="#TB_inline?go=go&height=390&width=300&inline Id=scopeMenuDealer"><img src="YourImage.JPG"></a>

where YourImage.JPG is the image you want to display.

[Anneka @ Sytner]

Originally Posted by dopper99

Nothing will happen if you click the word "click". But it will if you click "here".
Not entirely sure what you are trying to do but it looks like you want an image that is a hyperlink? If so you want something like:

<p align="justify"><a class="thickbox" href="#TB_inline?go=go&height=390&width=300&inline Id=scopeMenuDealer"><img src="YourImage.JPG"></a>

where YourImage.JPG is the image you want to display.

Sorry, yes I want to replace "here" with an image.

Thank you so much for helping me out, I can't wait to try this.

[nicktyler]

I forgot to post back but if I had done it would be exactly the same as dopper99's post.

[Anneka @ Sytner]

Originally Posted by nicktyler

I forgot to post back but if I had done it would be exactly the same as dopper99's post.

I appreciate you both taking the time to help me out. Sitecore; a world of possibilities... if you know html.

[dopper99]

Originally Posted by Anneka @ Sytner

Sorry, yes I want to replace "here" with an image.

Thank you so much for helping me out, I can't wait to try this.

No problem Anneka, glad I could help .

If you want to set the height and width use:

<p align="justify"><a class="thickbox" href="#TB_inline?go=go&height=390&width=300&inline Id=scopeMenuDealer"><img src="YourImage.JPG" height="32" width="32"></a>

Just change the numbers to the values you want.

Cheers.

[Anneka @ Sytner]

This worked a treat, but I now have another issue; having substituted the "click here" for an image", I now find that upon clicking on the image the thickbox opens, but the text from it (originally a menu) is now missing.

Originally text:
<a class="thickbox" href="#TB_inline?go=go&height=390&width=300&inline Id=scopeMenuDealer">here</a> to find your local Sytner MINI. </p><p><a></a>

Now Image:
<a class="thickbox" href="#TB_inline?go=go&height=390&width=300&inline Id=scopeMenuDealer"><img style="WIDTH: 330px; HEIGHT: 77px" border="0" src="~/media/MINI/Anneka%20Sanghera/Main%20Image%20%20%20MINI/Home%20%20%20Find%20a%20Dealer.ashx"></a>

Can be seen in action at www.sytner.co.uk/mini

See button "Find a Dealer" and 'click here' text beneath for the comparison.

Any ideas why this may have happened?

[Anneka @ Sytner]

I think it was just being temperamental. Seems to work fine now .

[Desmondo]

Might have just been a cache not updating. Working fine here

[Anneka @ Sytner]

Today's website ambition:

I'd like to embed a video from YouTube in a pop up box, so that when an icon image is clicked, the YouTube video pops and begins to play.

Does anyone know if it is possible to accomplish this using HTML?
I've looked into Video LightBox which looked perfect, but they're software requires access permissions to our website which I don't believe will be possible via SiteCore.

Thanks in advance,
Anneka

[Dave_3]

Originally Posted by Anneka @ Sytner

Today's website ambition:

I'd like to embed a video from YouTube in a pop up box, so that when an icon image is clicked, the YouTube video pops and begins to play.

Does anyone know if it is possible to accomplish this using HTML?
I've looked into Video LightBox which looked perfect, but they're software requires access permissions to our website which I don't believe will be possible via SiteCore.

Thanks in advance,
Anneka

You could use flowplayer or jwplayer.

Do you really need a pop-up box, with a bit of HTML5 coding you can embed it in an ipad friendly manner, and until you actuallly press play it only loads the start image. Or just place the embed code in the div you use for your Thickbox.

D

[MEGA]

Too late to help by the look of things, but err - I can.. Just let me know if needed!

ps, avoid pop ups if at all possible. You want to use jquery or some other method to show a previously hidden div (a table structure) so that it works on iOS and android too ..

[Anneka @ Sytner]

My idea is to create a series of thumbnail images, and when clicked upon, the video appears for the viewer to watch as an overlay.

Originally Posted by Dave_3

Or just place the embed code in the div you use for your Thickbox.

D

This sounds like a great idea.

The code I had for the Thickbox was left by the webdesign company (they set it up).

How would you go about embedding a video from YouTube into a Thickbox? I hope I won't need access to Thickbox software to create a new code, because that would be a problem.

Thank you all for your help with this.

[dopper99]

Originally Posted by Anneka @ Sytner

How would you go about embedding a video from YouTube into a Thickbox

This is quite easy to do....

I downloaded your BMW website page (File - Save Web Page) so I could play around with it.
Opened up the HTML code for main page mini.htm
Then did a search for eg "Sytner Coventry" to locate the text that appears in the thickbox popop - note it will find it twice and you want the second occurance in the HTML.

You are looking for some code like this:

<li><a class="iconButton iconLeft basicArrowBlack" href="http://www.sytner.co.uk/mini/coventry/home.aspx">Sytner Coventry</a></li>

Then directly underneath this I added:

<li>
<iframe width="250" height="170" src="http://www.youtube.com/embed/mLQeV1f6sTw" frameborder="0" allowfullscreen></iframe>
</li>

Play around with the width and height to suit.

Now to get your chosen URL, open a Youtube video, in my case

http://www.youtube.com/watch?v=mLQeV1f6sTw

Then right click on the video itself and select "copy embed HTML".
Copy the iframe code and drop it in your code as I've done above.

If you want the video to play automatically and hide the video controls add ?autoplay=1&autohide=1 to the end of the URL, ie:


<li>
<iframe width="250" height="170" src="http://www.youtube.com/embed/mLQeV1f6sTw?autoplay=1&autohide=1" frameborder="0" allowfullscreen></iframe>
</li>

This may also help: https://developers.google.com/youtube/player_parameters

Cheers.
Andy

[Anneka @ Sytner]

Looks great.

I've just given this a go but have run into a problem. While I can locate the Thickbox content by viewing source direct from the website, in Sitecore's HTML tab I simply have:

<tr>
<td style="WIDTH: 10px" colspan="2"><a class="thickbox" href="#TB_inline?go=go&height=390&width=300&inline Id=scopeMenuDealer"><img style="WIDTH: 330px; HEIGHT: 77px" border="0" src="~/media/MINI/Anneka%20Sanghera/Main%20Image%20%20%20MINI/Home%20%20%20Find%20a%20Dealer.ashx"></a></td></tr>

...It looks like I can't edit the content that is in the Thickbox within SiteCore.

[Anneka @ Sytner]

I think I may have found a reasonable solution, waiting for the page to update (fingers crossed).

[dopper99]

Originally Posted by Anneka @ Sytner

Looks great.

I've just given this a go but have run into a problem. While I can locate the Thickbox content by viewing source direct from the website, in Sitecore's HTML tab I simply have:

<tr>
<td style="WIDTH: 10px" colspan="2"><a class="thickbox" href="#TB_inline?go=go&height=390&width=300&inline Id=scopeMenuDealer"><img style="WIDTH: 330px; HEIGHT: 77px" border="0" src="~/media/MINI/Anneka%20Sanghera/Main%20Image%20%20%20MINI/Home%20%20%20Find%20a%20Dealer.ashx"></a></td></tr>

...It looks like I can't edit the content that is in the Thickbox within SiteCore.

Hmmmmm.... cant help you there - without looking at the source code.

Did you get it sorted anyway?

[Anneka @ Sytner]

Originally Posted by dopper99

Hmmmmm.... cant help you there - without looking at the source code.

Did you get it sorted anyway?

Yes and no.

http://www.sytner.co.uk/bmw/new-cars/7-series.aspx

I've managed to embed a playlist of videos from Youtube into a page. What I didn't want was loads of videos taking up loads of space on the page, so this is a good solution.
It's not what I wanted visually, but it will do.

One annoying thing is that it doesn't seem to be possible to add YouTube videos from other users to create a Playlist to share.