E90Post
 


Bimmer Retrofit
 
BMW 3-Series (E90 E92) Forum > BMW E90/E92/E93 3-series General Forums > Regional Forums > UK > UK Off-Topic Discussions > Help - HTML and Thickbox Help



Reply
 
Thread Tools Search this Thread
      05-04-2012, 10:57 AM   #1
Anneka @ Sytner
 
Anneka @ Sytner's Avatar
 
Drives: -
Join Date: Jan 2010
Location: -

Posts: 834
iTrader: (0)

Help - HTML and Thickbox Help

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

Last edited by Anneka @ Sytner; 05-04-2012 at 12:29 PM.
Anneka @ Sytner is offline   United Kingdom
0
Reply With Quote
      05-04-2012, 11:59 AM   #2
nicktyler
Major
 
Drives: 335i (sadly gone)
Join Date: Jan 2012
Location: Essex

Posts: 1,156
iTrader: (3)

Garage List
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.
nicktyler is offline   United Kingdom
0
Reply With Quote
      05-04-2012, 12:28 PM   #3
Anneka @ Sytner
 
Anneka @ Sytner's Avatar
 
Drives: -
Join Date: Jan 2010
Location: -

Posts: 834
iTrader: (0)

Anneka @ Sytner is offline   United Kingdom
0
Reply With Quote
      05-04-2012, 02:00 PM   #4
dopper99
Brigadier General
 
dopper99's Avatar
 
Drives: F30 335d M Sport
Join Date: Jun 2011
Location: UK

Posts: 3,798
iTrader: (1)

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.
dopper99 is offline   England
0
Reply With Quote
      05-04-2012, 02:35 PM   #5
Anneka @ Sytner
 
Anneka @ Sytner's Avatar
 
Drives: -
Join Date: Jan 2010
Location: -

Posts: 834
iTrader: (0)

Quote:
Originally Posted by dopper99 View Post
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.
Anneka @ Sytner is offline   United Kingdom
0
Reply With Quote
      05-04-2012, 04:09 PM   #6
nicktyler
Major
 
Drives: 335i (sadly gone)
Join Date: Jan 2012
Location: Essex

Posts: 1,156
iTrader: (3)

Garage List
I forgot to post back but if I had done it would be exactly the same as dopper99's post.
nicktyler is offline   United Kingdom
0
Reply With Quote
      05-04-2012, 04:22 PM   #7
Anneka @ Sytner
 
Anneka @ Sytner's Avatar
 
Drives: -
Join Date: Jan 2010
Location: -

Posts: 834
iTrader: (0)

Quote:
Originally Posted by nicktyler View Post
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.
Anneka @ Sytner is offline   United Kingdom
0
Reply With Quote
      05-04-2012, 04:27 PM   #8
dopper99
Brigadier General
 
dopper99's Avatar
 
Drives: F30 335d M Sport
Join Date: Jun 2011
Location: UK

Posts: 3,798
iTrader: (1)

Quote:
Originally Posted by Anneka @ Sytner View Post


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.
dopper99 is offline   England
0
Reply With Quote
      05-08-2012, 07:45 AM   #9
Anneka @ Sytner
 
Anneka @ Sytner's Avatar
 
Drives: -
Join Date: Jan 2010
Location: -

Posts: 834
iTrader: (0)

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 is offline   United Kingdom
0
Reply With Quote
      05-08-2012, 08:27 AM   #10
Anneka @ Sytner
 
Anneka @ Sytner's Avatar
 
Drives: -
Join Date: Jan 2010
Location: -

Posts: 834
iTrader: (0)

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

Anneka @ Sytner is offline   United Kingdom
0
Reply With Quote
      05-08-2012, 02:48 PM   #11
Desmondo
Lieutenant
 
Desmondo's Avatar
 
Drives: E90 330i M-Sport
Join Date: Feb 2011
Location: Braintree, Essex

Posts: 428
iTrader: (0)

Might have just been a cache not updating. Working fine here
__________________
Desmondo is offline  
0
Reply With Quote
      05-25-2012, 10:32 AM   #12
Anneka @ Sytner
 
Anneka @ Sytner's Avatar
 
Drives: -
Join Date: Jan 2010
Location: -

Posts: 834
iTrader: (0)

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
Anneka @ Sytner is offline   United Kingdom
0
Reply With Quote
      05-25-2012, 01:12 PM   #13
Dave_3
Colonel
 
Dave_3's Avatar
 
Drives: F32 430D sDrive Msport
Join Date: Oct 2006
Location: CH / SCO

Posts: 2,750
iTrader: (0)

Garage List
Quote:
Originally Posted by Anneka @ Sytner View Post
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
__________________
Escort Mk1 RS2000 (2.1 2x44IDFS, BVH, Kent FR32, 5spd, 180 BHP) : Fully Loaded F32 430D M Sport sDrive : Previously Full-Spec 335D E92 2006 : Capri MK1 full rebuild in progress

Dave_3 is offline   Scotland
0
Reply With Quote
      05-25-2012, 04:28 PM   #14
MEGA
Dieseasal
 
MEGA's Avatar
 
Drives: LCI E92 335d M-Sport
Join Date: Jan 2009
Location: Harrow, London

Posts: 6,834
iTrader: (2)

Send a message via MSN to 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 ..
__________________
Previously: 2003 Peugeot 206 1.6 8v | 2006 E90 320d M-Sport, 19" BBS CH, Full Ice-cold JL audio install, August 2010 Total BMW 6 page feature car. | 2003 Nissan 350Z GT Coupe 286BHP
Now:2010 E92 LCI 335d M-Sport
MEGA is offline   United Kingdom
0
Reply With Quote
      05-26-2012, 02:32 PM   #15
Anneka @ Sytner
 
Anneka @ Sytner's Avatar
 
Drives: -
Join Date: Jan 2010
Location: -

Posts: 834
iTrader: (0)

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.

Quote:
Originally Posted by Dave_3 View Post
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.
Anneka @ Sytner is offline   United Kingdom
0
Reply With Quote
      05-26-2012, 06:46 PM   #16
dopper99
Brigadier General
 
dopper99's Avatar
 
Drives: F30 335d M Sport
Join Date: Jun 2011
Location: UK

Posts: 3,798
iTrader: (1)

Quote:
Originally Posted by Anneka @ Sytner View Post
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
Code:
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

Attached Images
 

Last edited by dopper99; 05-26-2012 at 07:08 PM.
dopper99 is offline   England
0
Reply With Quote
      05-28-2012, 04:23 AM   #17
Anneka @ Sytner
 
Anneka @ Sytner's Avatar
 
Drives: -
Join Date: Jan 2010
Location: -

Posts: 834
iTrader: (0)

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 is offline   United Kingdom
0
Reply With Quote
      05-28-2012, 05:05 AM   #18
Anneka @ Sytner
 
Anneka @ Sytner's Avatar
 
Drives: -
Join Date: Jan 2010
Location: -

Posts: 834
iTrader: (0)

I think I may have found a reasonable solution, waiting for the page to update (fingers crossed).
Anneka @ Sytner is offline   United Kingdom
0
Reply With Quote
      05-28-2012, 11:09 AM   #19
dopper99
Brigadier General
 
dopper99's Avatar
 
Drives: F30 335d M Sport
Join Date: Jun 2011
Location: UK

Posts: 3,798
iTrader: (1)

Quote:
Originally Posted by Anneka @ Sytner View Post
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?
dopper99 is offline   England
0
Reply With Quote
      05-28-2012, 01:13 PM   #20
Anneka @ Sytner
 
Anneka @ Sytner's Avatar
 
Drives: -
Join Date: Jan 2010
Location: -

Posts: 834
iTrader: (0)

Quote:
Originally Posted by dopper99 View Post
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.
Anneka @ Sytner is offline   United Kingdom
0
Reply With Quote
Reply

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -5. The time now is 11:50 PM.




e90post
Powered by vBulletin® Version 3.7.0
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
1Addicts.com, BIMMERPOST.com, E90Post.com, F30Post.com, M3Post.com, ZPost.com, 5Post.com, 6Post.com, 7Post.com, XBimmers.com logo and trademark are properties of BIMMERPOST