Our support has moved

Instead of continuing the battle against spammers, we decided to close the forum for new users and topics. But don't worry, there are still plenty of ways to reach us. Most notably, we will move our attention to Stack Overflow, where we will monitor questions under the tags [highcharts], [highstock] and [highslide].

For other ways of getting in touch with us, see Highcharts Support or Highslide Support.

Torstein Hønsi, CTO, 2013-01-29

HighSlide and YouTube video

Technical support, bug reports, feature requests and more.
Post a reply

HighSlide and YouTube video

Postby Picard » Mon Sep 22, 2008 12:32 pm

Hi, first time in forum for me ;-)
I'd like to know the right way to insert YouTube video in a web-page starting from a text link.

Thanks so many!
JollyJoker
Picard
 
Posts: 11
Joined: Mon Sep 22, 2008 12:26 pm
Location: Italy
Top

Postby torstein.honsi » Tue Sep 23, 2008 8:56 am

See the source code of this example: http://highslide.com/example-youtube.html .
User avatar
torstein.honsi
Site Admin
 
Posts: 9150
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway
Top

Postby Picard » Tue Sep 23, 2008 6:30 pm

Thanks, Admin, it was just what I needed but, unfortunately, once in my directory (on site, not yet on line) it does'nt work ;-(

Now I try to find the reason of!
JollyJoker
Picard
 
Posts: 11
Joined: Mon Sep 22, 2008 12:26 pm
Location: Italy
Top

Postby Picard » Wed Sep 24, 2008 9:35 am

Hi Admin, here I am again ....... :oops:

I put my page on the net: http://www.tonidirossi.it/HighSlide/example.html

It does'nt still work! And the same does your page inserted in my directory where I put the entire file of Highslide as unzipped from your site.

I suppose there must be something wrong in my archive ..... :cry: I did'nt change anything in the .js files, so I cannot image what can be wrong :?: Can you?
Bye
JollyJoker
Picard
 
Posts: 11
Joined: Mon Sep 22, 2008 12:26 pm
Location: Italy
Top

Postby RoadRash » Wed Sep 24, 2008 11:15 am

You need to upgrade your Highslide to the latest version 4.0.6.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8175
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway
Top

Postby Picard » Wed Sep 24, 2008 1:31 pm

RoadRash wrote:You need to upgrade your Highslide to the latest version 4.0.6.

Thank you very much RoadRash! I had already uploaded the latest version but I had forgotten to place it in the mentioned directory, so ....... :cry:

Now it works; obviously :D Bye :wink:
JollyJoker
Picard
 
Posts: 11
Joined: Mon Sep 22, 2008 12:26 pm
Location: Italy
Top

Postby Picard » Wed Sep 24, 2008 3:46 pm

:oops: Another question, if you don' mind .....

In which file and how can I personalize the code in order to put the pop-up in the center of the page?

Thanx
JollyJoker
Picard
 
Posts: 11
Joined: Mon Sep 22, 2008 12:26 pm
Location: Italy
Top

Postby RoadRash » Wed Sep 24, 2008 4:34 pm

See hs.align.
Note that this function require that you use the highslide-full.js file that comes with the zip package or that you enable "Advanced positioning" in the Configurator.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8175
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway
Top

Postby Picard » Thu Sep 25, 2008 12:46 pm

RoadRash wrote:See hs.align.
Note that this function require that you use the highslide-full.js file that comes with the zip package or that you enable "Advanced positioning" in the Configurator.


I've made both and now everything works well! Thanks so many :D
JollyJoker
Picard
 
Posts: 11
Joined: Mon Sep 22, 2008 12:26 pm
Location: Italy
Top

Re: HighSlide and YouTube video

Postby azeriboy » Tue Dec 14, 2010 7:49 pm

Hi

how to do configure a dark background in this script to make it as highslide-with-gallery.js?
azeriboy
 
Posts: 7
Joined: Tue Dec 14, 2010 7:30 pm
Top

Re: HighSlide and YouTube video

Postby RoadRash » Wed Dec 15, 2010 2:02 am

Hi,

See this reference page: http://highslide.com/ref/hs.dimmingOpacity
Note: dimmingOpacity requires highslide-full.js instead of highslide-with-html.js
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8175
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway
Top

Re: HighSlide and YouTube video

Postby azeriboy » Thu Dec 16, 2010 3:58 pm

THANK YOU :)
azeriboy
 
Posts: 7
Joined: Tue Dec 14, 2010 7:30 pm
Top

Re: HighSlide and YouTube video

Postby azeriboy » Thu Dec 16, 2010 5:29 pm

HI.

I have one more question:
how to fit two scripts on one page, so they do not conflict with each other?

highslide-with-gallery.js and highslide-full.js
azeriboy
 
Posts: 7
Joined: Tue Dec 14, 2010 7:30 pm
Top

Re: HighSlide and YouTube video

Postby EarlyOut » Thu Dec 16, 2010 6:04 pm

Just use highslide-full.js. That includes all functions. The highslide-with-gallery.js is just a subset of highslide-full.js.
User avatar
EarlyOut
 
Posts: 1699
Joined: Sun Nov 11, 2007 11:22 pm
Location: Sector R
Top

Re: HighSlide and YouTube video

Postby azeriboy » Fri Dec 17, 2010 4:13 pm

I can not to place the 2 scripts on one page ... I beg you to help me ...
PLEASE LOOK. .. Where is wrong?
Code: Select all
<!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" dir="ltr" lang="ru-RU">

<head >

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title> </title>

<link rel="stylesheet" href="stile/style.css" type="text/css" media="screen" />



<script type="text/javascript" src="highslide/highslide-full.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />

<script type="text/javascript">
   hs.dimmingOpacity = 0.75;
</script>
<style type="text/css">
.highslide-dimming {
   background: black;
}
</style>




<script src="ad.js"></script>


<link rel="stylesheet" href="/plugins/count-per-day/counter.css" type="text/css" />

<script src="/themes/theme/maxheight.js" type="text/javascript"></script>
   
<script type="text/javascript">
// Apply the Highslide settings
hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.outlineWhileAnimating = true;
hs.allowSizeReduction = false;
// always use this with flash, else the movie will be stopped on close:
hs.preserveContent = false;
hs.wrapperClassName = 'draggable-header no-footer';


// create a shorthand function so we don't need to put all this in the opener's onclick
function openYouTube(opener) {
   var returnValue;
   
   // Safari Mobile doesn't have Flash, so we just let the device use the built-in
   // YouTube viewer.
   
      
   if (/(iPhone|iPod|iPad)/.test(navigator.userAgent)) {
      opener.href = opener.href.replace('/v/', '/watch?v=');
      returnValue = true;      
   }

   else returnValue = hs.htmlExpand(opener, {
      objectType: 'swf',
      objectWidth: 480,
      objectHeight: 385,
      width: 480,
      swfOptions: {
         params: {
            allowfullscreen: 'true'
         }
      },
      maincontentText: 'You need to upgrade your Flash player'
   });
   
   return returnValue;
} 
</script>


<script type="text/javascript" src="highslide/highslide-with-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />

<script type="text/javascript">
   hs.graphicsDir = 'highslide/graphics/';
   hs.align = 'center';
   hs.transitions = ['expand', 'crossfade'];
   hs.fadeInOut = true;
   hs.dimmingOpacity = 0.8;
   hs.outlineType = 'rounded-white';
   hs.captionEval = 'this.thumb.alt';
   hs.marginBottom = 105 // make room for the thumbstrip and the controls
   hs.numberPosition = 'caption';

   // Add the slideshow providing the controlbar and the thumbstrip
   hs.addSlideshow({
      //slideshowGroup: 'group1',
      interval: 5000,
      repeat: false,
      useControls: true,
      overlayOptions: {
         className: 'text-controls',
         position: 'bottom center',
         relativeTo: 'viewport',
         offsetY: -60

      },
      thumbstrip: {
         position: 'bottom center',
         mode: 'horizontal',
         relativeTo: 'viewport'
      }
   });
</script>
   
</head>
                     
<body  scroll1.scroll();">
   <div class="main">
      <!--header-->
      <div id="header">
         <div class="container">
            <div class="logo">
               <h1 onclick="location.href='index.html'">name </h1>
            </div>         
            <div class="menu"><ul>
                <li><a href="index.html" title="главная"><span><span>главная</span></span></a></li>
                <li><a href="about.html" title="о себе "><span><span>О себе</span></span></a></li>
                <li><a href="book.html" title=""><span><span>книги </span></span></a></li>
                <li><a href="qallery.html" title="Галерея"><span><span>Галлерея</span></span></a></li>
                <li><a href="contacts.html" title="контакты"><span><span>Контакты</span></span></a></li></ul></div>
             <div class="search">
                 <a href="index_az.html" target="_top"><img src="/az.png" width="40" height="40" alt="AZ" /></a>
                 <a href="index.html" target="_top"><img src="/ru.png" width="40" height="40" alt="RU" /></a>
                 <a href="index_en.html" target="_top"><img src="/uk.png" width="40" height="40" alt="EN" /></a>
                 </div>
         </div>
      </div>
      <!--header end-->
      <!--content -->
      <div class="content"><div class="side-bar-left maxheight">
   <div class="ind">
   
                <!-- Author information is disabled per default. Uncomment and fill in your details if you want to use it.
         <li><h2>Author</h2>
         <p>A little something about you, the author. Nothing lengthy, just an overview.</p>
         </li>
         -->

                    
            <div id="linkcat-4" class="widget widget_mylinkorder"><h2><span>Книги</span></h2><div class="inside-widget">
   <ul class='xoxo blogroll'>
<li><a href="1.html">1</a></li>
<li><a href="2.html">2</a></li>
<li><a href="3.html">3</a></li>
<li><a href="4.html">4</a></li>
<li><a href="5.html">5</a></li>
<li><a href="6.html">6</a></li>
<li><a href="7.html">7</a></li>
<li><a href="8.html">8</a></li>
<li><a href="9.html">9</a></li>
<li><a href="10.html">10</a></li>

   </ul>
</div></div>
<div id="linkcat-5" class="widget widget_links"><h2><span>Новости</span></h2><div class="inside-widget">
   <ul class='xoxo blogroll'>

 
  <br>
<table border="0" width="100%" height=250>
      <tr>
         <td align="center">
         <div id="ad1"></div>
      </td>
   </table>
</ul>


   
</div></div>
 
           
    </div>
</div>
<div class="column-center maxheight">
   <div class="indent-center">
   
             
      <div class="post" id="post-2">
            <div class="title">
                <h2 class="pages">Фото Галерея </h2>
            </div>
         <div class="text-box">
               <div class="ind">
                   
<div class="highslide-gallery">
      <!--
   4) This is how you mark up the thumbnail image with an anchor tag around it.
   The anchor's href attribute defines the URL of the full-size image.
-->
      <a id="thumb1" href="images/gallery1.jpg" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 1 } )"><img src="images/gallery1.thumb.jpg" width="120" height="120" title="Просмотреть Альбом" /></a>
      <!--
   5 (optional). This is how you mark up the caption. The correct class name is important.
-->
      <div class="highslide-caption"> Caption for the first image. This caption can be styled using CSS. </div>
      <!--
   6) Put the subsequent thumbnails in a hidden container. The thumbnailId parameter ensures
   these thumbnails zoom back out to the right thumbnail when closed.
-->
      <div class="hidden-container">
     
      <a class='highslide' href='images/thumbstrip01.jpg' onclick="return hs.expand(this,
      { thumbnailId: 'thumb1', slideshowGroup: 1 })"><img src='images/thumbstrip01.thumb.png'/></a>
        <div class="highslide-caption">Комментарии к рисунку</div>

       <a class='highslide' href='images/thumbstrip02.jpg' onclick="return hs.expand(this,
      { thumbnailId: 'thumb1', slideshowGroup: 1 })"><img src='images/thumbstrip02.thumb.png' alt=''/></a>
        <div class="highslide-caption">Windy landscape</div>

      </div>
    </div>
                </div>
         </div>
      </div>
       
   
             
      <div class="post" id="post-2">
            <div class="title">
                <h2 class="pages">Видео Галерея работ</h2>
            </div>
         <div class="text-box">
               <div class="ind">
                   
<div class="ind">
                   
<div class="highslide-youtube">

<!--
   5) This is how you mark up the thumbnail or text link. The href is extracted
   from the "Embed" code snippet found at the YouTube page for this video.
-->
<a href="http://www.youtube.com/v/bfV53pYLgfM?fs=1" onclick="return openYouTube(this)"
      class="highslide">
   <img src="images/thumbnail.jpg" alt="" width="107" height="120" />
</a>
</div>

                </div>

                </div>
         </div>
      </div>
       
            
<br> <p align="center">Copyright  2011</p>
   
    </div>
</div>
   </div>
   <!--content end-->
   <div id="footer">
      <div class="box">
        <table border="0">
          <tr>
            <td style="padding-left:60px; padding-top:5px;"><!--LiveInternet counter-->

              <!--/LiveInternet--></td>
           </tr>
          <tr>
            <td></td>
           </tr>
         </table>
      </div>&nbsp;
   </div>
       <!--footer-->
   </div>
</body>
</html>
azeriboy
 
Posts: 7
Joined: Tue Dec 14, 2010 7:30 pm
Top
Next
Post a reply

Return to Highslide JS Usage

Who is online

Users browsing this forum: No registered users and 7 guests

Powered by phpBB® Forum Software © phpBB Group