In map-tour-storytelling, can 2 or more icons link to one picture panel?

2974
3
09-30-2015 03:45 AM
JayThakur
New Contributor

Hi,

I have a storytelling map tour, i want to customize it.

In my map tour i have 2 different locations which take about same event.I want to link those 2 icons to same picture panel (cross fader), and with one thumbnail on footer.

Is it possible? Is so how?

Another question is how can i toggle the picture panel?

As it occupies nearly 50 % of the screen. I want to toggle the picture panel (similar to the description box)

Any advice would be helpful

Dr. Jay Krishna Thakur,

CEO, Thakur International, Nepal

CEO, UIZ, Germany

​​

Neue Grünstraße

38, 10179, Berlin, Germany
0 Kudos
3 Replies
GregoryL_Azou
Occasional Contributor III

Hi,

Do you want two icons on the map? If that's your case, I think you should hide one image in the footer using a CSS rule. So you are creating 2 points and you are duplicating the text and image. I don't recommend that, I would rather recommend to only have one point on the map and use a feature of the picture panel to display more than one image.

The picture panel can embed an image gallery, see for example that blog post about Flickr Add a Flickr Gallery to your Story Map Tour | ArcGIS Blog ; if that's not exactly what you want, you could develop your own little html page that display multiple images.

There is two settings for the picture panel: three-panel and integrated (see settings). It's not very simple to toggle the picture panel in the three-panel layout. There would be Javascript and CSS involved but It's easier to do it with integrated, if you can attach a button to the following code it should work.

$("#picturePanel").fadeToggle()

0 Kudos
JayThakur
New Contributor

Hi,

Thank you so much

I am using integrated setting.

I tried adding a button like the same toggle button as shown in picture by using the following code in picturePanel.js

Capture.PNG

var _toggle;

_toggle = $("<div id='toggle'></div>");

  $("#picturePanel").append(_toggle);

$(_toggle).fastClick(function() {

  $(_toggle).toggleClass('closed', $(#picturePanel).css('display') != 'none');

  $(#picturePanel).slideToggle();

});

But i get error using the last 3 lines of code

I think i am not able to using   $(#picturePanel).slideToggle(); in a correct way.

Could some suggest the correct way to use this function.

Thank you,

Dr. Jay Krishna Thakur,

CEO, Thakur International, Nepal

CEO, UIZ, Germany

Neue Grünstraße

38, 10179, Berlin, Germany

0 Kudos
JayThakur
New Contributor

Thx for your answer. I will update here. UIZ team: http://uizentrum.de/en/

0 Kudos