You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

Yomas

Intermediate

  • "Yomas" started this thread

Posts: 190

Location: Anglet, France

  • Send private message

1

Thursday, December 15th 2011, 4:25pm

Addthis social share dock HTML5 compatible help needed

Hi all !!
I was trying to add a Addthis social sharing dock on my tours, and the solutions I've found wasn't satisfactory at all.
I got it to work with the use of viewer.addParam set to transparent to get a <div> over my pano, but it's kind of slowing the tour
so I'd like to use the possibilities of linking the html code with XML. *cool*

Here's the deal :

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!-- my HTML page -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-fr" lang="fr-fr">
        <script type="text/javascript" src="tour.js"></script>
	<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4ede519f0d89f3ad"></script>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Eboovisite Démo Tour</title>
	<style>
		body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; background-color: #000000; margin: 0; padding: 0; text-align: center;			} 
		* html, * html body { overflow: hidden; }
		html, body, #pano { width:100%; height:99.9%; z-index:1;}
		a { color: #AAAAAA; text-decoration: underline; }           
		a:hover { color: #FFFFFF; text-decoration: underline; } 
		#align_centre { width: 20%; float: left; margin: 20% 40% 0 40%; background-color: #FFFFFF; border: 2px solid #FF0000; }
	</style>
</head>

<body>
	
        <!-- AddThis Buttons START-->
        <div class="addthis_toolbox addthis_default_style">
            <a class="addthis_button_google_plusone"></a>
            <a class="addthis_button_facebook"></a>
            <a class="addthis_button_twitter"></a>
            <a class="addthis_button_email"></a>
            <a class="addthis_button_compact"></a>
            <a class="addthis_counter addthis_bubble_style"></a>
            </div>
		<!-- AddThis Buttons END -->

      <!-- The tour itself-->
<script>
  var viewer = createPanoViewer({swf:"tour.swf",target:"pano"});
  viewer.addVariable("xml", "<?php echo $mypath; ?>");
  viewer.embed();
</script> 

<div id="pano">
		<noscript> 
			<div id="align_centre"> <br/> 
				<b>Attention:</b> <br/> 
				<br/> 
				Javascript is not activated. <br/> 
				<br/> 
				Please activate it to see the virtual tour <br/> 
				<br/> 
			</div> <!-- end of align_centre --> 
		</noscript> 
	</div>
       <!-- end of krpanoDIV --> 

</html>


What I'd like to do is link my AddThis Buttons in the html with image plugins in krpano like:

Source code

1
<plugin name="facebook_button" url="img/facebook.png" crop="0|0|32[32" ondowncrop="0|32|32|32" onclick="Here I want to link with the concerned href in the html" />


Can someone give a tip cause I went trough the documentation and forum but very few information about all this ! *cry*
That thing could be great cause no flash needed neither than overlay a div on the tour. Means it'll work perfectly on all devices *squint*
Thanks in advance I'll continue searching for a solution and let you know if I get one ^^
Regards.
My website: www.eboovisite.com, See me also on www.Viewat.com, Facebook and Twitter

Posts: 1,850

Occupation: Virtual Tours - Photography - Krpano developer

  • Send private message

2

Thursday, December 15th 2011, 5:28pm

You do or do NOT want an overlayed div? This is quite unclear.

otherwise, use openurl
onclick="openurl(url,target*)"

otherwise, do you want to ONLY show the div overlay onclick?
I don't think that gives any performance benefit, once you change the window mode, you are already down in performance, whether or not you have content showing does not matter.
"i think"
KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

Yomas

Intermediate

  • "Yomas" started this thread

Posts: 190

Location: Anglet, France

  • Send private message

3

Friday, December 16th 2011, 1:30am

Hi sacha;-)
Thank you for your reply!
Sorry if I wasn't clear in my explanations ^^
In fact I do not want to use the wmode transparent cause of the performance.
The openurl isn't possible as you can see the href in the html page is managed by the addthis script.
I went further in my investigations on the addthis Javascript method to link it with krpano plugins.
I havn't found a solution yet ;-)
What I would like to do is create plugin buttons in my krpano tour, and get it linked with the href in the html...
I'm on my phone right now I'll post tomorow the things I've seen about the addthis script^^
Thanks again and have a good night...
Depends on where you live;-)
Regards.
My website: www.eboovisite.com, See me also on www.Viewat.com, Facebook and Twitter

Posts: 1,850

Occupation: Virtual Tours - Photography - Krpano developer

  • Send private message

4

Friday, December 16th 2011, 4:42am

Then you must try to get the url any way you can with javascript. Perhaps its outputted someplace in the dom.
KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

Yomas

Intermediate

  • "Yomas" started this thread

Posts: 190

Location: Anglet, France

  • Send private message

5

Friday, December 16th 2011, 10:38am

Hi again;-)
Here is the addthis page link to Javascript usages:
http://www.addthis.com/help/client-api#rendering-js
I think the answer is not far from there^^
I continue working on it!!
My website: www.eboovisite.com, See me also on www.Viewat.com, Facebook and Twitter

Zephyr

Professional

Posts: 994

Location: Netherlands

Occupation: Web developer

  • Send private message

6

Friday, December 16th 2011, 10:55am

Add the addthis bar like you normally would in html. Apply a css style of display:none to it. The block is hidden now, but still in the DOM.

Create your own buttons (download the ones from add this or something)

create a plugin

<plugin name="fb" url="facebook.png" onclick="js(share('addthis_button_facebook')" />

in the html you create a javascript function:

function share(link_class){
window.open($(link_class).attr('href'));
}

the idea is, that every link in the addthis has a class. With this class you can reference to the link.

I haven't researched this. But I think this is the only solution. This will only work if the links are references to domains, not javascript. To get the number of tweets/facebook likes, you perhaps could do some extra DOM reads from the element.

Addthis is ment as a javascript plugin, that adds DOM elements through an api. I dont think it will work nicely in krpano, unless you put your own wrapper around it. I usually solved such problems by creating a border/frame like experience around the panorama. In this html frame, I have room for html objects like addthis.
3d childrens game using krpano Game
Minify your xml with my krpano XML Compressor
Krpano XML Parsing Error Checklist
Available for hire (krpano xml, javascript, actionscript, flash, php and ipad plugins).

Yomas

Intermediate

  • "Yomas" started this thread

Posts: 190

Location: Anglet, France

  • Send private message

7

Friday, December 16th 2011, 4:56pm

Hi Zephyr !!
Thank you for your help !
I've try your example code but no surprise it didn't work, it would have been such perfect if it did ^^
In fact I think I'm just gonna make some xml custom buttons for sharing cause in all case i'll have to set the wmode to transparent using addthis,
cause of it's pop up :
When hovering the addthis logo it opens a kind of pop up, wich passes behind the tour if not settle to wmode transparent :'(
And even using as you say an area of the HTML to make them visible without the wmode transparent activated, the addthis popup problem persists.
I'm so disappointed !
I'll have to get throughtout each social network ducumentation to make a simple share button dock...
Crap !!
Otherwise I was thinking about another solution : I'm using a lightbox to show my tours, and maybe it's possible to put the sharing buttons on the lightbox top,
like in the following screenshot attachement.
I'm searching furthur and I'll let you lnow if i find an issue ^^
Thanks again !
Regards.
My website: www.eboovisite.com, See me also on www.Viewat.com, Facebook and Twitter

Yomas

Intermediate

  • "Yomas" started this thread

Posts: 190

Location: Anglet, France

  • Send private message

8

Friday, December 16th 2011, 6:52pm

Okay hi again again !!
I found a starting of solution using addthis using the Addthis Sharing Endpoints.
This may work on a openurl button in krpano xml ^^ (not tested yet !)
Furthur I think the best way for me is to be able to add the addthis api on top of my lightbox...
More complicated but I'll try !!!
Here is the lightbox I use if you want to have an idea : HERE
And the sharing addthis models : HERE.
I'll get back when done, and be thankfull for a little help ^^
Have a nice weekend !!
Cheers.
My website: www.eboovisite.com, See me also on www.Viewat.com, Facebook and Twitter

Yomas

Intermediate

  • "Yomas" started this thread

Posts: 190

Location: Anglet, France

  • Send private message

9

Monday, January 9th 2012, 11:50am

Hi all ^^
After many tries I've opted for your solution Zephyr ;-)
I made a HTML template around my tours so that the sharing dock appears in top of it ^^
You can see it here click on any picture you want ^^
Furthur I'd be happy if you could give me your oppinions about the global website, I'm working on the traduction so actually is only French ^^
Thanks in advance and have a nice day.
Regards.
My website: www.eboovisite.com, See me also on www.Viewat.com, Facebook and Twitter

Zephyr

Professional

Posts: 994

Location: Netherlands

Occupation: Web developer

  • Send private message

10

Monday, January 9th 2012, 4:56pm

Hi,

Your site looks great :) The share icons on top work nice too. One issue I came accross, but not much you can do about is: When you hover over the icons, they enlarge, but when moving down to the panorama, they stay enlarged, this is because the onmouseout doesnt get triggered. Small issue.

I alsoo liked your previous site (the long gallery hall, which sliding pages :)).

I see you use the Ipad Interface. Hows that working? I've been thinking to pick that up too, to learn some code here and there.
3d childrens game using krpano Game
Minify your xml with my krpano XML Compressor
Krpano XML Parsing Error Checklist
Available for hire (krpano xml, javascript, actionscript, flash, php and ipad plugins).

Yomas

Intermediate

  • "Yomas" started this thread

Posts: 190

Location: Anglet, France

  • Send private message

11

Monday, January 9th 2012, 6:48pm

Glad you appreciate it ^^
I changed the website theme cause of an smart concurrent (I'm ironic here) who has used the same one :-(
I will improve the gallery page when I get a little bit time using the same jquery effect to render a gallery wall ;-)
The default of the previous template was that all the pages were loaded at once with Ajax, that wasn't that great for SEO cause I only had one page for the all site ^^
For the issue about the social dock I've noticed it too but there's not much I can do here so...

Therfore about the iPad interface, it's working perfectly, the only thing I'd reproach is that on iPhone the help button is hard to click, but that's not so bad ^^
The interest of that interface is that it's very qick to make a new tour, and I think that using only one template for the demo tours on the site is better than have
many different templates, so that visitors get used to it.
I have a demo folder on the other side with the different works I've made to show my clients the things we can do with krpano ;-)
Hoping to read you soon ^^
Regards.
My website: www.eboovisite.com, See me also on www.Viewat.com, Facebook and Twitter

Posts: 1,850

Occupation: Virtual Tours - Photography - Krpano developer

  • Send private message

12

Monday, January 9th 2012, 9:26pm

Turn off the log key and that will fix that.
KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

Similar threads