TP-Docs
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

Welcome to TinyPortal. Please login or sign up.

March 28, 2024, 12:29:55 PM

Login with username, password and session length
Members
Stats
  • Total Posts: 195,104
  • Total Topics: 21,212
  • Online today: 212
  • Online ever: 3,540 (September 03, 2022, 01:38:54 AM)
Users Online
  • Users: 0
  • Guests: 65
  • Total: 65

photo block from frontpage

Started by SamoanOnion, September 20, 2022, 08:24:34 AM

Previous topic - Next topic

0 Members and 2 Guests are viewing this topic.

SamoanOnion

hello,

I was looking for the code to create the block like the one on the frontpage that scrolls through a few selected images.

@rjen

Welcome to TinyPortal.

The block you are referring to is using a html code with a 'slider'.
It was asked about before here: https://www.tinyportal.net/index.php?topic=36201.msg295560#msg295560

Mind you: you will need to install some script...
The slider code comes from here: https://bxslider.com/

And to give you an example: the block is a HTML/Javascript block, that holds below code...


<!-- Start HEAD section --> <!-- add to the <head> of your page -->
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> -->
<!-- End HEAD section -->
<!-- Start BODY section --> <!-- add to the <body id="tpbody" class="tpcontnainer"> of your page -->

<script type="text/javascript">
  $(document).ready(function(){
   
$('.bxslider').bxSlider({
  auto: true,
  autoControls: true,
  speed: 600,
  responsive: true,
  captions: true,
});
  });
</script>

<ul class="bxslider">
  <li><img src="data1/images/articles.png" title="A Powerful Article System"/></li>
  <li><img src="data1/images/blocks.png" title="Blocks Built in, or Create Your Own"/></li>
  <li><img src="data1/images/downloads.png" title="A Built In Downloads System"/></li>
  <li><img src="data1/images/menu.png" title="Menu's and Site Maps"/></li>
  <li><img src="data1/images/shoutbox.png" title="A Great Shoutbox"/></li>
  <li><img src="data1/images/adminp.png" title="A Neat Admin Panel"/></li>
</ul>

<!-- bxSlider Javascript file -->
<script src="https://tinyportal.net/bxslider/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="https://tinyportal.net/bxslider/jquery.bxslider.css" rel="stylesheet" /> <!-- replace with link to the css -->
Running Latest TP on SMF2.1 at: www.fjr-club.nl