TinyPortal

Development => Resources => Topic started by: NeoMorph on March 25, 2010, 11:46:45 AM

Title: Image Slider With Links?
Post by: NeoMorph on March 25, 2010, 11:46:45 AM
I'm getting to be a big fan of Tinyportal but there is one thing I would really like to see... a current image slider.

I've tried various scripts but none work because for some reason when I select HTML+Javascript it does nothing but show the script on the page. PHP blocks work fine but not the scripts one it seems.

So, can anyone point me in the direction of a solution for this (because most scripts for image sliding I have seen on here are OLD and the links lead nowhere!
Title: Re: Image Slider With Links?
Post by: IchBin on March 25, 2010, 02:07:06 PM
Are you putting your code into the editor in "code mode"? If you put code into editor without clicking the <> button, it will show the code.
Title: Re: Image Slider With Links?
Post by: Xarcell on March 25, 2010, 03:38:36 PM
Yes, when you insert code in a HTML/Javascript block, make sure you select show source [<>} button. Other wise the editor may alter your code.

There are alot of sliders out there that work well with TP & SMF.

If your not good at coding, you can do what I do fro blocks. Use the global header & footer mod for SMF. Post your code that goes between the <head> </head> of the script into the head part of the global header & footer mod. Then just post your xhtml in the blocks(HTML/Javascript).

You'll get more scripts to work this way, across all themes...
Title: Re: Image Slider With Links?
Post by: NeoMorph on March 26, 2010, 11:17:24 PM
Quote from: Xarcell on March 25, 2010, 03:38:36 PM
Yes, when you insert code in a HTML/Javascript block, make sure you select show source [<>} button. Other wise the editor may alter your code.

There are alot of sliders out there that work well with TP & SMF.

If your not good at coding, you can do what I do fro blocks. Use the global header & footer mod for SMF. Post your code that goes between the <head> </head> of the script into the head part of the global header & footer mod. Then just post your xhtml in the blocks(HTML/Javascript).

You'll get more scripts to work this way, across all themes...

DOH!  :uglystupid2:

Yup, that helped a lot... I couldn't see the wood for the trees.

I used to be a programmer/analyst back in the day but I got injured and have to take lotsa pain meds which tend to fritz the old brain cells. As I used to know a LOT of programming languages and dialects it's made it very diffcult for me... because my meds screw up my memory I tend to mix coding languages... and even though the syntax is correct it is correct from a mulitude of languages.

I used to have Joomla as a front page and used SMF for the forums... but nobody used the Joomla site. Everyone was using the forums. So that's where TinyPortal came to the rescue... I ditched the Joomla pages and used TP to make a cohesive system... well... once I finish the work it will be cohesive heh.

Thanks for the fix...
Title: Re: Image Slider With Links?
Post by: NeoMorph on March 27, 2010, 01:26:12 AM
Arrgghh...

Been trying to use SlideItMoo from here...

http://www.php-help.ro/mootools-12-javascript-examples/slideitmoo-v11-image-slider/

The examples work on the server... but when I insert them into SMF I get the first slide to occur and then it... stops.

I put this in index.template.php...



//Banner Rotator
echo '
<link rel="stylesheet" type="text/css" href="stylesheet/simple_spinner.css" />

<script language="javascript" type="text/javascript" src="script/mootools-1.2.1-core.js"></script>
<script language="javascript" type="text/javascript" src="script/mootools-1.2-more.js"></script>
<script language="javascript" type="text/javascript" src="script/slideitmoo-1.1.js"></script>
<script language="javascript" type="text/javascript">
window.addEvents({
\'load\': function(){

/* info rotator example */
new SlideItMoo({overallContainer: \'SlideItMoo_info_outer\',
elementScrolled: \'SlideItMoo_info_inner\',
thumbsContainer: \'SlideItMoo_info_items\',
itemsVisible:1,
itemsSelector: \'.info_item\',
itemWidth:700,
showControls:0,
autoSlide: 500,
transition: Fx.Transitions.Sine.easeIn,
duration: 500,
direction:1});
}
});
</script>';


... and then in a block I put this...

<div class="container">
<h1>SlideItMoo 1.1</h1>
<h2>Demo: simple banner rotator</h2>
   
<!-- banner rotator start -->
<p>
On mouse over the slider stops. In can enter from right too. It takes only a parameter to do so.<br>
        Remember to set a CSS class on the banners to be used as selector.
</p>
<!--thumbnails slideshow begin-->
<div id="SlideItMoo_banners_outer">
<div id="SlideItMoo_banners_inner">
<div id="SlideItMoo_banners_items">
<a class="banner" href="Fishy" target="_blank"><img src="banners/1.jpg" width="557" height="134" />FISHY</a>
<a class="banner" href="Bibby" target="_blank"><img src="banners/2.jpg" width="557" height="134" />STICKY</a>
<a class="banner" href="Nippy" target="_blank"><img src="banners/3.jpg" width="557" height="134" />BIPPY</a>
</div>
</div>
</div>
<!-- banner rotator end -->
     <p class="notes">
    Visit <a href="http://www.php-help.ro/mootools-12-javascript-examples/slideitmoo-v11-image-slider/" title="SlideItMoo image slider">SlideItMoo homepage</a> for more information on how to implement this script.
    </p>
</div>


The url for the script itself can be found at http://www.php-help.ro/downloads/SlideItMoo+v1.1

Any help would be greatly appreciated because atm I'm tearing my hair out (and I don't have much left as it is).
Title: Re: Image Slider With Links?
Post by: IchBin on March 27, 2010, 01:55:25 AM
It's much, much easier to just include stuff like this. What I did to get this to work is just create a folder called slideitmoo in the root of my smf directory. Then I uploaded all the files in this script you pointed to. I created a PHP type block and added this line to test it.

include('slideitmoo/fancy_slider.html');

Then you have to change a few lines in the fancy_slider.html file to reference the correct path for the files that it includes. Here are the changes I made to fancy_slider.html. All I'm doing is modifying the path.

Find these lines:

<link rel="stylesheet" type="text/css" href="stylesheet/fancy.css" />
<script language="javascript" type="text/javascript" src="script/mootools-1.2.1-core.js"></script>
<script language="javascript" type="text/javascript" src="script/mootools-1.2-more.js"></script>
<script language="javascript" type="text/javascript" src="script/slideitmoo-1.1.js"></script>


Change them to:
<link rel="stylesheet" type="text/css" href="slideitmoo/stylesheet/fancy.css" />
<script language="javascript" type="text/javascript" src="slideitmoo/script/mootools-1.2.1-core.js"></script>
<script language="javascript" type="text/javascript" src="slideitmoo/script/mootools-1.2-more.js"></script>
<script language="javascript" type="text/javascript" src="slideitmoo/script/slideitmoo-1.1.js"></script>


Find these lines: (These lines of code are on different lines towards the bottom of the page)

                <a href="http://www.php-help.ro/mootools-12-javascript-examples/wordpress-youtube-playlist-plugin/" title="Wordpress YouTube playlist plugin"><img src="info_images/mytube.jpg" alt="" /></a>

                <a href="http://www.php-help.ro/mootools-12-javascript-examples/wordpress-271-featured-articles-plugin/" title="Wordpress 2.7.1 featured articles plugin"><img src="info_images/featured_articles.jpg" alt="" /></a>

                <a href="http://www.php-help.ro/php-tutorials/javascript-chained-select-with-mootools-12/" title="JavaScript chained select with MooTools 1.2"><img src="info_images/chained_select1.jpg" alt="" /></a>

                <a href="http://www.php-help.ro/mootools-12-javascript-examples/moohover-css-hover-mootools-way/" title="MooHover Ã,â€" CSS hover the MooTools way"><img src="info_images/moohover1.jpg" alt="" /></a>


Change them to:

                <a href="http://www.php-help.ro/mootools-12-javascript-examples/wordpress-youtube-playlist-plugin/" title="Wordpress YouTube playlist plugin"><img src="slideitmoo/info_images/mytube.jpg" alt="" /></a>

                <a href="http://www.php-help.ro/mootools-12-javascript-examples/wordpress-271-featured-articles-plugin/" title="Wordpress 2.7.1 featured articles plugin"><img src="slideitmoo/info_images/featured_articles.jpg" alt="" /></a>

                <a href="http://www.php-help.ro/php-tutorials/javascript-chained-select-with-mootools-12/" title="JavaScript chained select with MooTools 1.2"><img src="slideitmoo/info_images/chained_select1.jpg" alt="" /></a>

                <a href="http://www.php-help.ro/mootools-12-javascript-examples/moohover-css-hover-mootools-way/" title="MooHover Ã,â€" CSS hover the MooTools way"><img src="slideitmoo/info_images/moohover1.jpg" alt="" /></a>


Oh and one other thing I just noticed, you'll need to remove the "body" section in the CSS file, as it over-rides the themes body and shows a white backgroud if you don't. Let us know how you get along.

Title: Re: Image Slider With Links?
Post by: NeoMorph on March 27, 2010, 10:45:58 AM
Tried that... exactly the same problem... changes once and then stops.

It must be something to do with my other plugins I have installed... *sigh* :-\

It is showing an error in the js... line 189 of the full source...

QuoteWebpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; GTB6.4; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; eSobiSubscriber 2.0.4.16)
Timestamp: Sat, 27 Mar 2010 10:41:30 UTC


Message: 'this.myFx' is null or not an object
Line: 189
Char: 3

As I've never touched Javascript I'm bit of at a loss here...

Edit:tried it in an installation of SMF but only including TinyPortal... same problem... slides once and then stops. Looks like that bug in the script is what is the big problem... but I have no clue how to fix it.
Title: Re: Image Slider With Links?
Post by: dismal shadow on March 27, 2010, 03:22:09 PM
Quote from: Xarcell on March 25, 2010, 03:38:36 PM
There are alot of sliders out there that work well with TP & SMF.
Mind pointing me to the correct direction for the slider?
Title: Re: Image Slider With Links?
Post by: ZarPrime on March 28, 2010, 06:04:15 AM
Nathan,

I'm not sure what you are looking for.   NeoMorph gave a link to the slider in his post above (http://www.tinyportal.net/index.php?topic=32152.msg258079#msg258079).  Is that what you were looking for?

ZarPrime
Title: Re: Image Slider With Links?
Post by: Xarcell on March 28, 2010, 06:07:44 AM
Ok here's what you should try. Install the global headers/footers mod. Put the javascript into the header part.

<script language="javascript" type="text/javascript" src="script/mootools-1.2.1-core.js"></script>
<script language="javascript" type="text/javascript" src="script/mootools-1.2-more.js"></script>
<script language="javascript" type="text/javascript" src="script/slideitmoo-1.1.js"></script>
<script language="javascript" type="text/javascript">
window.addEvents({
\'load\': function(){

/* info rotator example */
new SlideItMoo({overallContainer: \'SlideItMoo_info_outer\',
elementScrolled: \'SlideItMoo_info_inner\',
thumbsContainer: \'SlideItMoo_info_items\',
itemsVisible:1,
itemsSelector: \'.info_item\',
itemWidth:700,
showControls:0,
autoSlide: 500,
transition: Fx.Transitions.Sine.easeIn,
duration: 500,
direction:1});
}
});
</script>';


See if that works.

...

Another thing. Sometimes I have issues with global headers %& footers. I recommend putting in the whole URL starting with http://. Or you could use ', $settings['default_theme_url'], '/scripts/ but it doesn't always work. Don't ask why.

But I definitely recommend placing:

[code<script language="javascript" type="text/javascript">
   window.addEvents({
      \'load\': function(){
         
         /* info rotator example */   
         new SlideItMoo({overallContainer: \'SlideItMoo_info_outer\',
                     elementScrolled: \'SlideItMoo_info_inner\',
                     thumbsContainer: \'SlideItMoo_info_items\',      
                     itemsVisible:1,
                     itemsSelector: \'.info_item\',
                     itemWidth:700,
                     showControls:0,
                     autoSlide: 500,
                     transition: Fx.Transitions.Sine.easeIn,
                     duration: 500,
                     direction:1});   
      }
   });[/code]

into the header part. It will resolve your javascript errors 90% of the time if your not a programmer. You also may need to remove the backslashes if you place it in the header mod.
Title: Re: Image Slider With Links?
Post by: NeoMorph on March 28, 2010, 10:43:41 AM
Yup, tried that too... still the same problem.

It all comes down to the browser saying there is a bug in the javascript code (which is something I haven't touched). It's something to do with the transition.

The bug is on line 189 of slideitmoo-1.1_full_source.js apparently.
Title: Re: Image Slider With Links?
Post by: Xarcell on March 28, 2010, 05:58:53 PM
You may just need to try another script. I personally have found issues with mootools an try to stick with jQuery.

Here are some of the resources I use. They list several and they should all have demos. Hopefully you can find something you like.

http://visionwidget.com/inspiration/web/295-jquery-content-sliders.html

http://webdesignledger.com/tutorials/13-super-useful-jquery-content-slider-scripts-and-tutorials

http://speckyboy.com/2009/06/03/15-amazing-jquery-image-galleryslideshow-plugins-and-tutorials/

http://sixrevisions.com/resources/14-jquery-plugins-for-working-with-images/

http://www.noupe.com/design/sliding-content.html
Title: Re: Image Slider With Links?
Post by: IchBin on March 28, 2010, 11:48:46 PM
Need a link to your site. I'm betting you have another javascript function or file conflicting with this. I had a mootools script running that conflicted with this script and it did the same thing as yours.
Title: Re: Image Slider With Links?
Post by: Freddy on March 29, 2010, 08:40:48 PM
Thank you for that list of sliders Xarcell.  I found those very useful and inspiring.  :)
Title: Re: Image Slider With Links?
Post by: NeoMorph on March 31, 2010, 01:14:53 AM
Solved it....

TinyPortal inserted its own MooTools which was screwing up my code...

Thanks for all the help guys...
Title: Re: Image Slider With Links?
Post by: dismal shadow on March 31, 2010, 08:00:04 AM
Speaking of slider...will it implement as a block feature. Would be super cool to have. 
Title: Re: Image Slider With Links?
Post by: NeoMorph on April 01, 2010, 11:42:50 AM
 :'(

Turns out that the slider code I used works fine in IE8 Compatability mode but indents in Firefox and iE8 native mode.

Time to look for a better one lol...
Title: Re: Image Slider With Links?
Post by: NeoMorph on April 01, 2010, 03:17:42 PM
Is it me or do all these sliders break the CSS of unordered lists in order to work???
Title: Re: Image Slider With Links?
Post by: Xarcell on April 01, 2010, 06:54:57 PM
Quote from: NeoMorph on April 01, 2010, 03:17:42 PM
Is it me or do all these sliders break the CSS of unordered lists in order to work???

eeeerrrr .... no?
Title: Re: Image Slider With Links?
Post by: NeoMorph on April 01, 2010, 09:21:25 PM
I found the UL tags in two sliders I was trying.... removing the tag in the CSS file busted the slider it seemed.

There was this other slider I tried which looked great but the CSS code had no explanations (even though it was supposed to be a tutorial) and when I used my larger images it overlayed the next slide 26 pixels over the top of the current one even though I changed all the CSS values to try to fix it...

I'm really hating not doing Javascript now and being on pain meds is screwing with my memory so I can't learn anything new it seems.

:-\

I'm not giving up... I WILL conquer this damned slider...
Title: Re: Image Slider With Links?
Post by: Xarcell on April 02, 2010, 03:44:27 AM
You have to have the UL tags and the LI tags. Just make sure th CSS is right for the tags. What slider are you trying to use?
Title: Re: Image Slider With Links?
Post by: NeoMorph on April 02, 2010, 09:45:01 AM
After banging my head on my keyboard I have finally got the slider to work and display perfectly in all the main browsers including IE8 compatibility and native modes.

It was thanks to your links Xarcell that I was able to find one that worked...

This is the one I finally went with...

http://www.queness.com/resources/archives/jquery-newsslider.zip

Title: Re: Image Slider With Links?
Post by: SN on April 08, 2010, 07:34:49 AM
Quote from: NeoMorph on April 02, 2010, 09:45:01 AM
After banging my head on my keyboard I have finally got the slider to work and display perfectly in all the main browsers including IE8 compatibility and native modes.

It was thanks to your links Xarcell that I was able to find one that worked...

This is the one I finally went with...

http://www.queness.com/resources/archives/jquery-newsslider.zip



Glad to hear it!

you should post how you did it, it can help others if they want a similar feature.
Title: Re: Image Slider With Links?
Post by: othg_weasel on April 12, 2010, 02:28:18 PM
I have been using this php code image scroller with links on my site and its worked fine for older versions of TP as well as TP1.0b5

When I upgraded to TP1.0.b5-1 this morning I got an error  ??? Can this code be mortified to work with TP1.0b5-1? or should I look for an alternative?

echo '<style type="text/css"><!--

#stormscontainer«
position: relative;
width: 140px; /*marquee width */
height: 280px; /*marquee height */
overflow: hidden;
border: 0px solid #CF2E2E;
padding: 0px;
margin: 0px;
text-align: left;
»
--></style>';

echo "
<script type=\"text/javascript\">

/***********************************************
* Cross browser Marquee II- ? Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var delaybbeforescroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var stormsspeed=1 //Specify storms scroll speed (larger is faster 1-10)
var pits=1 //Pause storms onMousever (0=no. 1=yes)?

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=stormsspeed
var pausespeed=(pits==0)? copyspeed: 0
var actualheight=''

function scrollstorms()Ã,«
if (parseInt(cross_storms.style.top)>(actualheight*(-1)+8))
cross_storms.style.top=parseInt(cross_storms.style.top)-copyspeed+\"px\"
else
cross_storms.style.top=parseInt(stormsheight)+8+\"px\"
Ã,»

function initializestorms()Ã,«
cross_storms=document.getElementById(\"vstorms\")
cross_storms.style.top=0
stormsheight=document.getElementById(\"stormscontainer\").offsetHeight
actualheight=cross_storms.offsetHeight
if (window.opera || navigator.userAgent.indexOf(\"Netscape/7\")!=-1)Ã,« //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_storms.style.height=stormsheight+\"px\"
cross_storms.style.overflow=\"scroll\"
return
Ã,»
setTimeout('lefttime=setInterval(\"scrollstorms()\",30)', delaybbeforescroll)
Ã,»

if (window.addEventListener)
window.addEventListener(\"load\", initializestorms, false)
else if (window.attachEvent)
window.attachEvent(\"onload\", initializestorms)
else if (document.getElementById)
window.onload=initializestorms


</script>";

echo '<div align="center">
<div id="stormscontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=stormsspeed">
<div id="vstorms"  style="position: absolute; width: 98%;">

<!--YOUR SCROLL CONTENT HERE-->



</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/fox.jpg" alt="" border="0px" width="125px" />

</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/dunlop.jpg" alt="" border="0px" width="125px" />

</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/amsoil.jpg" alt="Davids Laser" border="0px" width="125px" />

</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/hazardous.jpg" alt="Davids Laser" border="0px" width="125px" />

</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/racetech.jpg" alt="" border="0px" width="125px" />

</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/shoel.jpg" alt="" border="0px" width="125px" />

</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/spyoptic.jpg" alt="" border="0px" width="105px" />

</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/surdyke.jpg" alt="" border="0px" width="97px" />

</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/taper.jpg" alt="" border="0px" width="125px" />

</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/thor.jpg" alt="" border="0px" width="125px" />

</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/twin_air.jpg" alt="" border="0px" width="125px" />

<!--YOUR SCROLL CONTENT HERE-->

</div>
</div></div>';
Title: Re: Image Slider With Links?
Post by: Blue Steel on April 12, 2010, 02:52:40 PM
you need to do a search and replace on
Ã,«
Ã,»

and replace with
{
}
respectivly
Title: Re: Image Slider With Links?
Post by: othg_weasel on April 12, 2010, 03:21:09 PM
Quote from: BlueSteel on April 12, 2010, 02:52:40 PM
you need to do a search and replace on
Ã,«
Ã,»


and replace with
{
}
respectivly


I am not a coder by any means but I am trying to learn and get a better understanding of how this works.

I tried to replace all Ã,« Ã,» with {} and I don't get the error any more But It does not show the images?
Title: Re: Image Slider With Links?
Post by: Blue Steel on April 12, 2010, 03:54:16 PM
please try reposting your code here in case you've made a mistake or something..
Title: Re: Image Slider With Links?
Post by: othg_weasel on April 12, 2010, 03:58:10 PM
Quote from: BlueSteel on April 12, 2010, 03:54:16 PM
please try reposting your code here in case you've made a mistake or something..

Ok sorry. echo '<style type="text/css"><!--

#stormscontainer«
position: relative;
width: 140px; /*marquee width */
height: 280px; /*marquee height */
overflow: hidden;
border: 0px solid #CF2E2E;
padding: 0px;
margin: 0px;
text-align: left;
»   
--></style>';

echo "
<script type=\"text/javascript\">

/***********************************************
* Cross browser Marquee II- ? Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var delaybbeforescroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var stormsspeed=1 //Specify storms scroll speed (larger is faster 1-10)
var pits=1 //Pause storms onMousever (0=no. 1=yes)?

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=stormsspeed
var pausespeed=(pits==0)? copyspeed: 0
var actualheight=''

function scrollstorms(){
if (parseInt(cross_storms.style.top)>(actualheight*(-1)+8))
cross_storms.style.top=parseInt(cross_storms.style.top)-copyspeed+\"px\"
else
cross_storms.style.top=parseInt(stormsheight)+8+\"px\"
}

function initializestorms(){
cross_storms=document.getElementById(\"vstorms\")
cross_storms.style.top=0
stormsheight=document.getElementById(\"stormscontainer\").offsetHeight
actualheight=cross_storms.offsetHeight
if (window.opera || navigator.userAgent.indexOf(\"Netscape/7\")!=-1)Ã,« //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_storms.style.height=stormsheight+\"px\"
cross_storms.style.overflow=\"scroll\"
return
}
setTimeout('lefttime=setInterval(\"scrollstorms()\",30)', delaybbeforescroll)
}

if (window.addEventListener)
window.addEventListener(\"load\", initializestorms, false)
else if (window.attachEvent)
window.attachEvent(\"onload\", initializestorms)
else if (document.getElementById)
window.onload=initializestorms


</script>";

echo '<div align="center">
<div id="stormscontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=stormsspeed">
<div id="vstorms"  style="position: absolute; width: 98%;">

<!--YOUR SCROLL CONTENT HERE-->



</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/fox.jpg" alt="" border="0px" width="125px" />

</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/dunlop.jpg" alt="" border="0px" width="125px" />

</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/amsoil.jpg" alt="Davids Laser" border="0px" width="125px" />

</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/hazardous.jpg" alt="Davids Laser" border="0px" width="125px" />

</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/racetech.jpg" alt="" border="0px" width="125px" />

</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/shoel.jpg" alt="" border="0px" width="125px" />

</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/spyoptic.jpg" alt="" border="0px" width="105px" />

</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/surdyke.jpg" alt="" border="0px" width="97px" />

</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/taper.jpg" alt="" border="0px" width="125px" />

</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/thor.jpg" alt="" border="0px" width="125px" />

</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/twin_air.jpg" alt="" border="0px" width="125px" />

<!--YOUR SCROLL CONTENT HERE-->

</div>
</div></div>';
Title: Re: Image Slider With Links?
Post by: Blue Steel on April 12, 2010, 04:11:18 PM
youve missed one on line 47


if (window.opera || navigator.userAgent.indexOf(\"Netscape/7\")!=-1)Ã,« //if Opera or Netscape 7x, add scrollbars to scroll and exit
Title: Re: Image Slider With Links?
Post by: othg_weasel on April 12, 2010, 04:20:55 PM
Quote from: BlueSteel on April 12, 2010, 04:11:18 PM
youve missed one on line 47


if (window.opera || navigator.userAgent.indexOf(\"Netscape/7\")!=-1)Ã,« //if Opera or Netscape 7x, add scrollbars to scroll and exit


Again sorry I had two many windows up. I'm slowing down and promise Ill check and recheck before I post again.

ok I know I didn't miss anything this time and still no scrolling pics..?

Thank you so much for your patients I know you prob have more important things to do. But I really appreciate you.

echo '<style type="text/css"><!--

#stormscontainer«
position: relative;
width: 140px; /*marquee width */
height: 280px; /*marquee height */
overflow: hidden;
border: 0px solid #CF2E2E;
padding: 0px;
margin: 0px;
text-align: left;
»   
--></style>';

echo "
<script type=\"text/javascript\">

/***********************************************
* Cross browser Marquee II- ? Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var delaybbeforescroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var stormsspeed=1 //Specify storms scroll speed (larger is faster 1-10)
var pits=1 //Pause storms onMousever (0=no. 1=yes)?

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=stormsspeed
var pausespeed=(pits==0)? copyspeed: 0
var actualheight=''

function scrollstorms(){
if (parseInt(cross_storms.style.top)>(actualheight*(-1)+8))
cross_storms.style.top=parseInt(cross_storms.style.top)-copyspeed+\"px\"
else
cross_storms.style.top=parseInt(stormsheight)+8+\"px\"
}

function initializestorms(){
cross_storms=document.getElementById(\"vstorms\")
cross_storms.style.top=0
stormsheight=document.getElementById(\"stormscontainer\").offsetHeight
actualheight=cross_storms.offsetHeight
if (window.opera || navigator.userAgent.indexOf(\"Netscape/7\")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_storms.style.height=stormsheight+\"px\"
cross_storms.style.overflow=\"scroll\"
return
}
setTimeout('lefttime=setInterval(\"scrollstorms()\",30)', delaybbeforescroll)
}

if (window.addEventListener)
window.addEventListener(\"load\", initializestorms, false)
else if (window.attachEvent)
window.attachEvent(\"onload\", initializestorms)
else if (document.getElementById)
window.onload=initializestorms


</script>";

echo '<div align="center">
<div id="stormscontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=stormsspeed">
<div id="vstorms"  style="position: absolute; width: 98%;">

<!--YOUR SCROLL CONTENT HERE-->



</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/fox.jpg" alt="" border="0px" width="125px" />

</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/dunlop.jpg" alt="" border="0px" width="125px" />

</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/amsoil.jpg" alt="Davids Laser" border="0px" width="125px" />

</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/hazardous.jpg" alt="Davids Laser" border="0px" width="125px" />

</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/racetech.jpg" alt="" border="0px" width="125px" />

</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/shoel.jpg" alt="" border="0px" width="125px" />

</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/spyoptic.jpg" alt="" border="0px" width="105px" />

</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/surdyke.jpg" alt="" border="0px" width="97px" />

</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/taper.jpg" alt="" border="0px" width="125px" />

</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/thor.jpg" alt="" border="0px" width="125px" />

</a></p><p align="center"><a href="" target="_self">
<img src="/sponsors/twin_air.jpg" alt="" border="0px" width="125px" />

<!--YOUR SCROLL CONTENT HERE-->

</div>
</div></div>';
Title: Re: Image Slider With Links?
Post by: othg_weasel on April 12, 2010, 05:27:36 PM
well the images are there just way out the the right..
See attached pic.
Title: Re: Image Slider With Links?
Post by: IchBin on April 12, 2010, 05:30:01 PM
Try this:
echo '<style type="text/css"><!--

#stormscontainer{
position: relative;
width: 140px; /*marquee width */
height: 280px; /*marquee height */
overflow: hidden;
border: 0px solid #CF2E2E;
padding: 0px;
margin: 0px;
text-align: left;
}   
--></style>';

echo "
<script type=\"text/javascript\">

/***********************************************
* Cross browser Marquee II- ? Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var delaybbeforescroll=2000; //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var stormsspeed=1; //Specify storms scroll speed (larger is faster 1-10)
var pits=1; //Pause storms onMousever (0=no. 1=yes)?

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=stormsspeed;
var pausespeed=(pits==0)? copyspeed: 0;
var actualheight='';

function scrollstorms(){
if (parseInt(cross_storms.style.top)>(actualheight*(-1)+8))
cross_storms.style.top=parseInt(cross_storms.style.top)-copyspeed+\"px\";
else
cross_storms.style.top=parseInt(stormsheight)+8+\"px\";
}

function initializestorms(){
cross_storms=document.getElementById(\"vstorms\");
cross_storms.style.top=0;
stormsheight=document.getElementById(\"stormscontainer\").offsetHeight;
actualheight=cross_storms.offsetHeight;
if (window.opera || navigator.userAgent.indexOf(\"Netscape/7\")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_storms.style.height=stormsheight+\"px\";
cross_storms.style.overflow=\"scroll\";
return;
}
setTimeout('lefttime=setInterval(\"scrollstorms()\",30)', delaybbeforescroll);
}

if (window.addEventListener)
window.addEventListener(\"load\", initializestorms, false);
else if (window.attachEvent)
window.attachEvent(\"onload\", initializestorms);
else if (document.getElementById)
window.onload=initializestorms;


</script>";

echo '<div align="center">
<div id="stormscontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=stormsspeed">
<div id="vstorms" style="position: absolute; width: 98%;">

<!--YOUR SCROLL CONTENT HERE-->

<p align="center">
<a href="" target="_self"><img src="/sponsors/fox.jpg" alt="" border="0px" width="125px" /></a>
</p>
<p align="center">
<a href="" target="_self"><img src="/sponsors/dunlop.jpg" alt="" border="0px" width="125px" /></a>
</p>
<p align="center">
<a href="" target="_self"><img src="/sponsors/amsoil.jpg" alt="Davids Laser" border="0px" width="125px" /></a>
</p>
<p align="center">
<a href="" target="_self"><img src="/sponsors/hazardous.jpg" alt="Davids Laser" border="0px" width="125px" /></a>
</p>
<p align="center">
<a href="" target="_self"><img src="/sponsors/racetech.jpg" alt="" border="0px" width="125px" /></a>
</p>
<p align="center">
<a href="" target="_self"><img src="/sponsors/shoel.jpg" alt="" border="0px" width="125px" /></a>
</p>
<p align="center">
<a href="" target="_self"><img src="/sponsors/spyoptic.jpg" alt="" border="0px" width="105px" /></a>
</p>
<p align="center">
<a href="" target="_self"><img src="/sponsors/surdyke.jpg" alt="" border="0px" width="97px" /></a>
</p>
<p align="center">
<a href="" target="_self"><img src="/sponsors/taper.jpg" alt="" border="0px" width="125px" /></a>
</p>
<p align="center">
<a href="" target="_self"><img src="/sponsors/thor.jpg" alt="" border="0px" width="125px" /></a>
</p>
<p align="center">
<a href="" target="_self"><img src="/sponsors/twin_air.jpg" alt="" border="0px" width="125px" /></a>
</p>

<!--YOUR SCROLL CONTENT HERE-->

</div>
</div></div>';
Title: Re: Image Slider With Links?
Post by: othg_weasel on April 12, 2010, 05:37:25 PM
works perfect IchBin!!

Thanks a bunch!!
Title: Re: Image Slider With Links?
Post by: Blue Steel on April 12, 2010, 05:38:46 PM
IchBin beat me to it .. lol

I was busy elsewhere .. sorry
Title: Re: Image Slider With Links?
Post by: othg_weasel on April 12, 2010, 05:55:59 PM
Thanks for all your help guys...