can anybody help me on how to get this to work on TP?
http://www.hotajax.org/mootools/photos-other-plugins/619-tpnice-slideshow.html
Assuming your using TinyPortal v1.0 beta 4 as you didn't Read the Posting Guidelines (http://www.tinyportal.net/index.php?topic=581) I managed to place this in Upper Panel, using HTML/javascript code block, but it doesnt seem to be working correctly, http://www.tinyportal.net/smf1/index.php
Download:TPNice Slideshow from the URL you pointed to, inside the TPNice Slideshow folder upload the files folder to your forum root, remove the mootools.js file, as this is already in TinyPortal v1.0 beta 4, then have a play see what you can do with it 8)
use this code in the HTML/javascript code in a block Upper Panel
<script type="text/javascript" src="tp-files/tp-plugins/javascript/mootools.js"></script>
<link rel="stylesheet" type="text/css" href="files/tpniceslideshow.css" title="default" />
<script type="text/javascript" src="files/tpniceslideshow.js"></script>
<style type="text/css">
.TPNSSwrapper {
width: 626px;
}
#TPNiceSlideShowMenu div img {
float: left;
margin: 8px;
}
#TPNiceSlideShowMenu div {
height: 60px;
width: 246px;
}
.TPNiceSlideShowMenuContent {
text-align: left;
}
#TPNiceSlideShow {
height: 300px;
width: 356px;
float: left;
}
#TPNiceSlideShowMenuWrp {
height: 300px;
width: 246px;
overflow:hidden;
}
.tpniceslideshow_scrollbar-vert{
height: 300px;
width: 22px;
float:right;
}
.tpniceslideshow_handle-vert{
width: 22px;
}
.TPNiceSlideShowGallery .slideInfoZone {
height: 300px;
width: 200px;
background: #333333;
position: absolute;
left: 50%;
top: 50%;
margin-top: -150px;
margin-left: -100px;
}
</style>
<script type="text/javascript">
/* <![CDATA[ */
function startTPNiceSlideShow() {
var TPNiceSlideShow = new TPSlideShowClass($('TPNiceSlideShow'), {
timed: true,
showInfopane: true,
showMenu: true,
embedLinks: true,
fadeDuration: 500,
readMore: true,
readMoreText: 'Read More',
showTitle: true,
titleLink: true,
showDescription: true,
scrollBar: true,
itemCount: 10,
scrollBarContent: $('TPNiceSlideShowMenuWrp'),
scrollBarArea: $('tpniceslideshow_scrollbar'),
scrollBarHandle: $('tpniceslideshow_handle'),
delay: 3000
});
}
window.onDomReady(startTPNiceSlideShow);
/* ]]> */
</script>
<div class="TPNSSwrapper">
<div id="TPNiceSlideShow">
<div class="imageElement">
<h3>
The Celebrities</h3>
<p>
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse</p>
<a href="#" title="open link" class="open"></a><img src="files/11193000.jpg" class="full" alt="The Celebrities" /></div>
<div class="imageElement">
<h3>
Eaque ipsa quae
</h3>
<p>
illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas
</p>
<a href="#" title="open link" class="open"></a>
<img src="files/69460000.jpg" class="full" alt="Eaque ipsa quae " />
</div>
<div class="imageElement">
<h3>
The Celebrities</h3>
<p>
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse</p>
<a href="#" title="open link" class="open"></a>
<img src="files/11193000.jpg" class="full" alt="The Celebrities" />
</div>
<div class="imageElement">
<h3>
Bolt - Box Office</h3>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam</p>
<a href="#" title="open link" class="open"></a>
<img src="files/12629000.jpg" class="full" alt="Bolt - Box Office" />
</div>
<div class="imageElement">
<h3>
Voluptatem sequi nesciunt</h3>
<p>
Neque porro quisquam est, qui dolorem ipsum quia dolor
</p>
<a href="#" title="open link" class="open"></a>
<img src="files/17018000.jpg" class="full" alt="Voluptatem sequi nesciunt" />
</div>
<div class="imageElement">
<h3>
From Oprah to Springsteen</h3>
<p>
Sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
quaerat voluptatem. Ut enim a</p>
<a href="#" title="open link" class="open"></a>
<img src="files/37400000.jpg" class="full" alt="From Oprah to Springsteen" />
</div>
<div class="imageElement">
<h3>
Eaque ipsa quae
</h3>
<p>
illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas
</p>
<a href="#" title="open link" class="open"></a>
<img src="files/69460000.jpg" class="full" alt="Eaque ipsa quae " />
</div>
<div class="imageElement">
<h3>
Red Carpet</h3>
<p>
Architecto beatae vitae dicta beatae vitae dicta</p>
<a href="#" title="open link" class="open"></a>
<img src="files/22176000.jpg" class="full" alt="Red Carpet" />
</div>
<div class="imageElement">
<h3>
Eaque ipsa quae
</h3>
<p>
illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas
</p>
<a href="#" title="open link" class="open"></a>
<img src="files/69460000.jpg" class="full" alt="Eaque ipsa quae " />
</div>
<div class="imageElement">
<h3>
2009 Grammy Nomination Concert</h3>
<p>
Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
ex ea commodi consequatur?
</p>
<a href="#" title="open link"
class="open"></a>
<img src="files/23785000.jpg" class="full" alt="2009 Grammy Nomination Concert" />
</div>
</div>
<div id="TPNiceSlideShowMenuWrp">
<div id="TPNiceSlideShowMenu">
<div class="TPNiceSlideShowMenuContent">
<img src="files/11193001.jpg" alt="The Celebrities" />
<p>
<a href="javascript:void(0);"><span class="tpnssmenu_title">The Celebrities</span><br />
<span class="tpnssmenu_desc">Quis autem vel eum iure re</span> </a>
</p>
</div>
<div class="TPNiceSlideShowMenuContent">
<img src="files/17018001.jpg" alt="The Celebrities" />
<p>
<a href="javascript:void(0);"><span class="tpnssmenu_title">The Celebrities</span><br />
<span class="tpnssmenu_desc">Quis autem vel eum iure re</span> </a>
</p>
</div>
<div class="TPNiceSlideShowMenuContent">
<img src="files/12629001.jpg" alt="Bolt - New Box Office" />
<p>
<a href="javascript:void(0);"><span class="tpnssmenu_title">Bolt - New Box Office</span><br />
<span class="tpnssmenu_desc">Sed ut perspiciatis unde omnis iste natus </span>
</a>
</p>
</div>
<div class="TPNiceSlideShowMenuContent">
<img src="files/17018001.jpg" alt="Voluptatem sequi nesciunt" />
<p>
<a href="javascript:void(0);"><span class="tpnssmenu_title">Voluptatem sequi nesciunt</span><br />
<span class="tpnssmenu_desc">Neque porro quisquam est, qui dolorem </span></a>
</p>
</div>
<div class="TPNiceSlideShowMenuContent">
<img src="files/23785001.jpg" alt="2009 Grammy Nominat .." />
<p>
<a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />
<span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>
</p>
</div>
<div class="TPNiceSlideShowMenuContent">
<img src="files/37400001.jpg" alt="From Oprah to Springs ..." />
<p>
<a href="javascript:void(0);"><span class="tpnssmenu_title">From Oprah to Springs ...</span><br />
<span class="tpnssmenu_desc">Sed quia non numquam eius modi tempora incidunt ut
</span></a>
</p>
</div>
<div class="TPNiceSlideShowMenuContent">
<img src="files/69460001.jpg" alt="Eaque ipsa quae " />
<p>
<a href="javascript:void(0);"><span class="tpnssmenu_title">Eaque ipsa quae </span>
<br />
<span class="tpnssmenu_desc">Eaque ipsa quae ab illo </span></a>
</p>
</div>
<div class="TPNiceSlideShowMenuContent">
<img src="files/23785001.jpg" alt="2009 Grammy Nominat .." />
<p>
<a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />
<span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>
</p>
</div>
<div class="TPNiceSlideShowMenuContent">
<img src="files/22176001.jpg" alt="Red Carpet" />
<p>
<a href="javascript:void(0);"><span class="tpnssmenu_title">Red Carpet</span><br />
<span class="tpnssmenu_desc">Architecto beatae vitae dicta</span> </a>
</p>
</div>
<div class="TPNiceSlideShowMenuContent">
<img src="files/23785001.jpg" alt="2009 Grammy Nominat .." />
<p>
<a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />
<span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>
</p>
</div>
</div>
</div>
<div id="tpniceslideshow_scrollbar" class="tpniceslideshow_scrollbar-vert">
<div id="tpniceslideshow_handle" class="tpniceslideshow_handle-vert">
</div>
</div>
<div style="clear: both;">
</div>
</div>
Quote from: Lesmondâ„¢ on February 22, 2010, 04:59:19 PM
Assuming your using TinyPortal v1.0 beta 4 as you didn't Read the Posting Guidelines (http://www.tinyportal.net/index.php?topic=581) I managed to place this in Upper Panel, using HTML/javascript code block, but it doesnt seem to be working correctly, http://www.tinyportal.net/smf1/index.php
Download:TPNice Slideshow from the URL you pointed to, inside the TPNice Slideshow folder upload the files folder to your forum root, remove the mootools.js file, as this is already in TinyPortal v1.0 beta 4, then have a play see what you can do with it 8)
use this code in the HTML/javascript code in a block Upper Panel
<script type="text/javascript" src="tp-files/tp-plugins/javascript/mootools.js"></script>
<link rel="stylesheet" type="text/css" href="files/tpniceslideshow.css" title="default" />
<script type="text/javascript" src="files/tpniceslideshow.js"></script>
<style type="text/css">
.TPNSSwrapper {
width: 626px;
}
#TPNiceSlideShowMenu div img {
float: left;
margin: 8px;
}
#TPNiceSlideShowMenu div {
height: 60px;
width: 246px;
}
.TPNiceSlideShowMenuContent {
text-align: left;
}
#TPNiceSlideShow {
height: 300px;
width: 356px;
float: left;
}
#TPNiceSlideShowMenuWrp {
height: 300px;
width: 246px;
overflow:hidden;
}
.tpniceslideshow_scrollbar-vert{
height: 300px;
width: 22px;
float:right;
}
.tpniceslideshow_handle-vert{
width: 22px;
}
.TPNiceSlideShowGallery .slideInfoZone {
height: 300px;
width: 200px;
background: #333333;
position: absolute;
left: 50%;
top: 50%;
margin-top: -150px;
margin-left: -100px;
}
</style>
<script type="text/javascript">
/* <![CDATA[ */
function startTPNiceSlideShow() {
var TPNiceSlideShow = new TPSlideShowClass($('TPNiceSlideShow'), {
timed: true,
showInfopane: true,
showMenu: true,
embedLinks: true,
fadeDuration: 500,
readMore: true,
readMoreText: 'Read More',
showTitle: true,
titleLink: true,
showDescription: true,
scrollBar: true,
itemCount: 10,
scrollBarContent: $('TPNiceSlideShowMenuWrp'),
scrollBarArea: $('tpniceslideshow_scrollbar'),
scrollBarHandle: $('tpniceslideshow_handle'),
delay: 3000
});
}
window.onDomReady(startTPNiceSlideShow);
/* ]]> */
</script>
<div class="TPNSSwrapper">
<div id="TPNiceSlideShow">
<div class="imageElement">
<h3>
The Celebrities</h3>
<p>
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse</p>
<a href="#" title="open link" class="open"></a><img src="files/11193000.jpg" class="full" alt="The Celebrities" /></div>
<div class="imageElement">
<h3>
Eaque ipsa quae
</h3>
<p>
illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas
</p>
<a href="#" title="open link" class="open"></a>
<img src="files/69460000.jpg" class="full" alt="Eaque ipsa quae " />
</div>
<div class="imageElement">
<h3>
The Celebrities</h3>
<p>
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse</p>
<a href="#" title="open link" class="open"></a>
<img src="files/11193000.jpg" class="full" alt="The Celebrities" />
</div>
<div class="imageElement">
<h3>
Bolt - Box Office</h3>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam</p>
<a href="#" title="open link" class="open"></a>
<img src="files/12629000.jpg" class="full" alt="Bolt - Box Office" />
</div>
<div class="imageElement">
<h3>
Voluptatem sequi nesciunt</h3>
<p>
Neque porro quisquam est, qui dolorem ipsum quia dolor
</p>
<a href="#" title="open link" class="open"></a>
<img src="files/17018000.jpg" class="full" alt="Voluptatem sequi nesciunt" />
</div>
<div class="imageElement">
<h3>
From Oprah to Springsteen</h3>
<p>
Sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
quaerat voluptatem. Ut enim a</p>
<a href="#" title="open link" class="open"></a>
<img src="files/37400000.jpg" class="full" alt="From Oprah to Springsteen" />
</div>
<div class="imageElement">
<h3>
Eaque ipsa quae
</h3>
<p>
illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas
</p>
<a href="#" title="open link" class="open"></a>
<img src="files/69460000.jpg" class="full" alt="Eaque ipsa quae " />
</div>
<div class="imageElement">
<h3>
Red Carpet</h3>
<p>
Architecto beatae vitae dicta beatae vitae dicta</p>
<a href="#" title="open link" class="open"></a>
<img src="files/22176000.jpg" class="full" alt="Red Carpet" />
</div>
<div class="imageElement">
<h3>
Eaque ipsa quae
</h3>
<p>
illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas
</p>
<a href="#" title="open link" class="open"></a>
<img src="files/69460000.jpg" class="full" alt="Eaque ipsa quae " />
</div>
<div class="imageElement">
<h3>
2009 Grammy Nomination Concert</h3>
<p>
Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
ex ea commodi consequatur?
</p>
<a href="#" title="open link"
class="open"></a>
<img src="files/23785000.jpg" class="full" alt="2009 Grammy Nomination Concert" />
</div>
</div>
<div id="TPNiceSlideShowMenuWrp">
<div id="TPNiceSlideShowMenu">
<div class="TPNiceSlideShowMenuContent">
<img src="files/11193001.jpg" alt="The Celebrities" />
<p>
<a href="javascript:void(0);"><span class="tpnssmenu_title">The Celebrities</span><br />
<span class="tpnssmenu_desc">Quis autem vel eum iure re</span> </a>
</p>
</div>
<div class="TPNiceSlideShowMenuContent">
<img src="files/17018001.jpg" alt="The Celebrities" />
<p>
<a href="javascript:void(0);"><span class="tpnssmenu_title">The Celebrities</span><br />
<span class="tpnssmenu_desc">Quis autem vel eum iure re</span> </a>
</p>
</div>
<div class="TPNiceSlideShowMenuContent">
<img src="files/12629001.jpg" alt="Bolt - New Box Office" />
<p>
<a href="javascript:void(0);"><span class="tpnssmenu_title">Bolt - New Box Office</span><br />
<span class="tpnssmenu_desc">Sed ut perspiciatis unde omnis iste natus </span>
</a>
</p>
</div>
<div class="TPNiceSlideShowMenuContent">
<img src="files/17018001.jpg" alt="Voluptatem sequi nesciunt" />
<p>
<a href="javascript:void(0);"><span class="tpnssmenu_title">Voluptatem sequi nesciunt</span><br />
<span class="tpnssmenu_desc">Neque porro quisquam est, qui dolorem </span></a>
</p>
</div>
<div class="TPNiceSlideShowMenuContent">
<img src="files/23785001.jpg" alt="2009 Grammy Nominat .." />
<p>
<a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />
<span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>
</p>
</div>
<div class="TPNiceSlideShowMenuContent">
<img src="files/37400001.jpg" alt="From Oprah to Springs ..." />
<p>
<a href="javascript:void(0);"><span class="tpnssmenu_title">From Oprah to Springs ...</span><br />
<span class="tpnssmenu_desc">Sed quia non numquam eius modi tempora incidunt ut
</span></a>
</p>
</div>
<div class="TPNiceSlideShowMenuContent">
<img src="files/69460001.jpg" alt="Eaque ipsa quae " />
<p>
<a href="javascript:void(0);"><span class="tpnssmenu_title">Eaque ipsa quae </span>
<br />
<span class="tpnssmenu_desc">Eaque ipsa quae ab illo </span></a>
</p>
</div>
<div class="TPNiceSlideShowMenuContent">
<img src="files/23785001.jpg" alt="2009 Grammy Nominat .." />
<p>
<a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />
<span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>
</p>
</div>
<div class="TPNiceSlideShowMenuContent">
<img src="files/22176001.jpg" alt="Red Carpet" />
<p>
<a href="javascript:void(0);"><span class="tpnssmenu_title">Red Carpet</span><br />
<span class="tpnssmenu_desc">Architecto beatae vitae dicta</span> </a>
</p>
</div>
<div class="TPNiceSlideShowMenuContent">
<img src="files/23785001.jpg" alt="2009 Grammy Nominat .." />
<p>
<a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />
<span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>
</p>
</div>
</div>
</div>
<div id="tpniceslideshow_scrollbar" class="tpniceslideshow_scrollbar-vert">
<div id="tpniceslideshow_handle" class="tpniceslideshow_handle-vert">
</div>
</div>
<div style="clear: both;">
</div>
</div>
Hi thanks for trying to help.
yeah you are right, im tp beta 4.
the link you posted, it seems to be working fine for me when i look at it, but i see what you mean because when i do what you said it doesn't appear properly for me on my site.
Im not very good with installing these scripts, but thanks for trying
Well, I think there is no mootools.js in TP v1.0 beta 5.1
Another problem is that:
QuoteYou have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'TPNiceSlideShow'), {
timed: true,
showInfopane: true,
showM' at line 1
File: /xxxxxx/Sources/TPortalAdmin.php
Row: 2362