Image Slider With Links?

NeoMorph · 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!

IchBin · 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.

Xarcell · 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...

NeoMorph · 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!

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...

NeoMorph · 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...

Code Select


	
	//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...

Code Select

<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).

IchBin · 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.

Code Select

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:

Code Select


<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:

Code Select

<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)

Code Select


                	<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:

Code Select


                	<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.

NeoMorph · 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.

dismal shadow · 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?

ZarPrime · 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

Xarcell · 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.

Code Select

<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

Code Select

', $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.

Recent

User

Stats

Members

Stats

Users Online

Image Slider With Links?

NeoMorph

IchBin

Xarcell

NeoMorph

NeoMorph

IchBin

NeoMorph

dismal shadow

ZarPrime

Xarcell