HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Adding 3rd party image slider to home (start) page?

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#78952 (In Topic #16118)
Avatar

Fan in training

Hi All,

I am trying to insert a 3rd party (Wow Slider) image slider into my home/start page but no luck.  I've tried the various "code" or "semihtml" tricks but no luck.  The result is either error or simple display of all images on the page (no slide/scroll effects).  Seems like I can't get the javascript part to run.  WOW Slider outputs an html page plus folders for the images and javascript code…  I've uploaded these folders to the ocPortal folder and experimented with paths in the html (still trying to figure out the relative path thing in ocPortal…).

My latest attempt (which seems to get me closest) is to create a new page (disabled wysiwyg), paste the WOW Slider html into the page, then use the "include] function on my home page to reference my new page.  I uploaded the WOW Slider folders to the custom_comcode folder (will fix once I figure out the relative path thing…).

Result is all image show on start page, no javascript runs though…

What is the best way for me to achieve this?  I'd like the slider to be inside my home page (or wherever else I decide to put it).

I managed to figure out the Google Adsense in the side bars but this one has me stumped!  Here is the WOW html code:

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

<!-- Start WOWSlider.com HEAD section -->
    <link rel="stylesheet" type="text/css" href="engine1/style.css" media="screen" />
    <style type="text/css">a#vlb{display:none}</style>
    <script type="text/javascript" src="engine1/jquery.js"></script>
    <script type="text/javascript" src="engine1/wowslider.js"></script>
<!-- End WOWSlider.com HEAD section -->
</HEAD>

 <BODY>

<!-- Start WOWSlider.com BODY section id=wowslider-container1 -->
    <div id="wowslider-container1">
    <div class="ws_images">
<span><img src="data1/images/20080308_029.jpg" alt="20080308_029" title="20080308_029" id="wows0"/></span>
<span><img src="data1/images/20080810_080.jpg" alt="20080810_080" title="20080810_080" id="wows1"/></span>
<span><img src="data1/images/catalina_062.jpg" alt="catalina_062" title="catalina_062" id="wows2"/></span>
<span><img src="data1/images/p1090559.jpg" alt="p1090559" title="p1090559" id="wows3"/></span>
<span><img src="data1/images/picsutah2_085.jpg" alt="picsutah2_085" title="picsutah2_085" id="wows4"/></span>
</div>
<div class="ws_bullets"><div>
<a href="#wows0" title="20080308_029"><img src="data1/tooltips/20080308_029.jpg" alt="20080308_029"/>1</a>
<a href="#wows1" title="20080810_080"><img src="data1/tooltips/20080810_080.jpg" alt="20080810_080"/>2</a>
<a href="#wows2" title="catalina_062"><img src="data1/tooltips/catalina_062.jpg" alt="catalina_062"/>3</a>
<a href="#wows3" title="p1090559"><img src="data1/tooltips/p1090559.jpg" alt="p1090559"/>4</a>
<a href="#wows4" title="picsutah2_085"><img src="data1/tooltips/picsutah2_085.jpg" alt="picsutah2_085"/>5</a>
</div></div>
<a style="display:none" href="http://wowslider.com">Photography Slideshow Software by WOWSlider.com v2.0</a>
    <div id="wowslider-shadow"></div>
    </div>
    <script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
</BODY>
</HTML>


I am in the "proof of concept" stage with all of this, trying to switch over from my old Mambo site to ocPortal and have spend a few weeks tweaking and testing various features just to make sure I have chosen the right system - so far I like it.

Any guidance is appreciated.  Thanks!
Back to the top
 
Posted
Rating:
#78961
Avatar

Community saint

Use this as startpoint for your own: If you want to see a preview look at this testsite

Code

[semihtml]
<div class="float_surrounder">
<div class="fp_col_block" style="float: left">
<head>
   <!-- Start WOWSlider.com HEAD section -->
   <link rel="stylesheet" type="text/css" href="slide1/engine1/style.css" />
   <style type="text/css">a#vlb{display:none}</style>
   <script type="text/javascript" src="slide1/engine1/jquery.js"></script>
   <script type="text/javascript" src="slide1/engine1/wowslider.js"></script>
   <!-- End WOWSlider.com HEAD section -->
</head>
<body style="background-color:#ffffff">
   <!-- Start WOWSlider.com BODY section -->
   <div id="wowslider-container1">
   <div class="ws_images">
<span><img src="slide1/data1/images/bb1.jpg" alt="Hoofdingang" title="Hoofdingang" id="wows0"/></span>
<span><img src="slide1/data1/images/20080308184530.jpg" alt="He.. kijk bezoekers" title="He.. kijk bezoekers" id="wows1"/></span>
<span><img src="slide1/data1/images/bb2.jpg" alt="Theehuisje" title="Theehuisje" id="wows2"/></span>
<span><img src="slide1/data1/images/bb3.jpg" alt="zicht op speeltuin" title="zicht op speeltuin" id="wows3"/></span>
<span><img src="slide1/data1/images/bb4.jpg" alt="Geitenweide" title="Geitenweide" id="wows4"/></span>
<span><img src="slide1/data1/images/dscn3536.jpg" alt="schapenweide" title="schapenweide" id="wows5"/></span>
<span><img src="slide1/data1/images/img_0169.jpg" alt="centraalplein" title="centraalplein" id="wows6"/></span>
</div>
<div class="ws_bullets"><div>
<a href="#wows0" title="Hoofdingang"><img src="slide1/data1/tooltips/bb1.jpg" alt="Hoofdingang"/>1</a>
<a href="#wows1" title="He... kijk bezoekers"><img src="slide1/data1/tooltips/20080308184530.jpg" alt="He.. kijk bezoekers"/>2</a>
<a href="#wows2" title="Theehuisje"><img src="slide1/data1/tooltips/bb2.jpg" alt="Theehuisje"/>3</a>
<a href="#wows3" title="zicht op speeltuin"><img src="slide1/data1/tooltips/bb3.jpg" alt="zicht op speeltuin"/>4</a>
<a href="#wows4" title="Geitenweide"><img src="slide1/data1/tooltips/bb4.jpg" alt="Geitenweide"/>5</a>
<a href="#wows5" title="schapenweide"><img src="slide1/data1/tooltips/dscn3536.jpg" alt="schapenweide"/>6</a>
<a href="#wows6" title="centraalplein"><img src="slide1/data1/tooltips/img_0169.jpg" alt="centraalplein"/>7</a>
</div></div>
<a style="display:none" href="http://wowslider.com">jQuery Ajax Slider by WOWSlider.com v2.0</a>
   </div>
   <script type="text/javascript" src="slide1/engine1/script.js"></script>
   <!-- End WOWSlider.com BODY section -->
</body>


http://digiflash.nl Photo community  (dutch)
Back to the top
 
Posted
Rating:
#78967
Avatar

Fan in training

Harry,

Thanks for the example and proof that this can be done!  One question, where did you put the WOW folders?

Thanks
Back to the top
 
Posted
Rating:
#78981
Avatar

Community saint

I created a new map in the root of OCportal with a name of slide1, there place all the stuff from WOW in. You need in the code the right path to it. see the preview code.


http://digiflash.nl Photo community  (dutch)
Back to the top
 
Posted
Rating:
#78982
Avatar

Community saint

By the way, all other scripts like visual slide show are working the same way


http://digiflash.nl Photo community  (dutch)
Back to the top
 
Posted
Rating:
#78989
Avatar

Community saint

Harry,

Thanks for the explanation+code and particularly the live "test site".

Well done and very useful!
:thumbs::)
Back to the top
 
Posted
Rating:
#78990
Avatar

Community saint

You are welcome.
From the same programmers you can use Lightbox to set up a com page with a gallery or other images, very usefull :)


http://digiflash.nl Photo community  (dutch)
Back to the top
 
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: