Forums (Obsolete)

Member

ahmad.mai-edata-tc - 12/13/2011 2:34:27 AM

image slider link

i had create image slideshow "image slider"
and I added URL field to the "file document type"
and edit the image slider "Transformations"
now when user click on slide
he go to the image url
this is the slideshow Transformations

<li class="s3sliderImage">
<div id="videogallery">

<a href="<%# Eval("url") %> title="<%# Eval("FileName", true) %>">
<img src="<%# GetFileUrl("FileAttachment") %>" alt="<%# Eval("FileName", true) %>" width="100%" height="100%" />
</a></div>
<span style="display:none;"><b><%# Eval("FileName", true) %></b><br/>
<%# Eval("FileDescription", true) %>
</span>
</li>

then I created video popup
and add the link to JavaScript in master page head
and add tha css in css file
now
its work in any page
this is the html code that i put in a page to run the video as popup
""
<script type="text/javascript">

function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("video_overlay");
ytplayer.setVolume(100);
}

</script>
<div id="videogallery">
<a href="http://www.youtube.com/v/SPG_iYotfYY?autoplay=1&rel=0&enablejsapi=1&playerapiid=ytplayer" rel="#voverlay" title="AQtime Integration into Embarcadero RAD Studio"><img alt="AQtime Integration into Embarcadero RAD Studio" src="../CMSWebParts/edata/v/data/thumbnails/0.png" /></a></div>
..

now i need to make the file url as rel="#voverlay"
to show popup video on click

any suggestion ??

Kentico Support

kentico_janh - 12/13/2011 7:08:45 AM

RE:image slider link

Hello,

Could you please describe your issue in more details. You can also link or write here whole sourcecode, you are using, because the javascript you have mentioned only set the volume of the player and it miss any code for pop-up windows.

If you have some general problems with generating links for pop-up windows, you can just add taget="_blank" atribut to your a tag or implement some javascript code for it -> you can use following popup window generator:

http://www.javascriptsource.com/generators/popup-window.html

Best regards,
Jan Hermann

Member

ahmad.mai-edata-tc - 12/13/2011 7:29:36 AM

RE:image slider link

hi i connect the JavaScript in head tag in master page

<script src="../CMSWebParts/edata/v/engine/js/jquery.tools.min.js" type="text/javascript"></script>
<script src="../CMSWebParts/edata/v/engine/js/swfobject.js" type="text/javascript"></script>

<script src="../CMSWebParts/edata/v/engine/js/videolightbox.js" type="text/javascript"></script>

and popup work fine in pages when i write this html code

<script type="text/javascript">

function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("video_overlay");
ytplayer.setVolume(100);
}

</script>
<div id="videogallery">
<a href="http://www.youtube.com/v/SPG_iYotfYY?autoplay=1&rel=0&enablejsapi=1&playerapiid=ytplayer" rel="#voverlay" title="AQtime Integration into Embarcadero RAD Studio"><img alt="AQtime Integration into Embarcadero RAD Studio" src="../CMSWebParts/edata/v/data/thumbnails/0.png" /></a></div>

but need to make popup when user click on slide show


Kentico Support	kentico_janh - 12/13/2011 8:16:11 AM RE:image slider link Hello, Yes, but I need content of those javascript files, so please write here the download links to .js files you connected and also the link to a site, from where you got that videolightbox.js* file. Best regards, Jan Hermann


Member	ahmad.mai-edata-tc - 12/13/2011 9:14:37 AM RE:image slider link http://www.4shared.com/folder/HGFKUdM5/_online.html http://videolightbox.com/

Kentico Support

kentico_janh - 12/14/2011 3:35:02 AM

RE:image slider link

Hello,

The problem is, that this video light box gallery is generated by software from the url you have mentioned, but it can be simulated by adding all important javascripts, css stylesheets and html code from a gallery located on - for example - this page http://videolightbox.com/android-template.html. If you display the source code of the previous page, you can see, that there are some javascripts and css styles. These files need to be placed also on your page (head html code web part):

<link rel="stylesheet" type="text/css" href="~/css/overlay-minimal.css">
<script src="~/js/jquery.tools.min.js" type="text/javascript"></script>
<script src="~/js/swfobject.js" type="text/javascript"></script>
<script src="~/js/videolightbox.js" type="text/javascript"></script>

One of those scripts opens videos in the div element with the voverlay id, so this div element has to be contained on the page (static text web part):

<div style="background-image: none; top: 87.5px; left: 281.5px; position: fixed; z-index: 10000; display: none;" id="voverlay"><a class="close"></a><div id="vcontainer"></div></div>

Every single video needs its own exact link code (transformation code):

<p>
<a rel="#voverlay" href='<%# Eval("URL") %>?autoplay=1&rel=0&enablejsapi=1&playerapiid=ytplayer' title='<%# Eval("URLTitle") %>'><img src='<%# Eval("URLImagePath") %>' alt='<%# Eval("URLImageName") %>' /></a>
</p>

And finally, you need to fill the Content Before and After properties of the repeater, which uses the transformation above with:

Content Before: <div id="videogallery">
Content After: </div>

Best regards,
Jan Hermann