It is currently Wed Aug 20, 2014 10:47 am Advanced search

HighSlide and YouTube video

Technical support, bug reports, feature requests and more.

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

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: 9197
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

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

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

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: 8209
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

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

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

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: 8209
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

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

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

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: 8209
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

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

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

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: 1705
Joined: Sun Nov 11, 2007 11:22 pm
Location: Sector R

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

Next

Return to Highslide JS Usage

Who is online

Users browsing this forum: No registered users and 11 guests