Login  |  Register
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

Welcome, Guest. Please login or register.
Did you miss your activation email?

December 03, 2022, 08:01:29 AM

Login with username, password and session length
Members
  • Total Members: 3853
  • Latest: tty456
Stats
  • Total Posts: 193625
  • Total Topics: 21107
  • Online today: 100
  • Online ever: 3540
  • (September 02, 2022, 06:38:54 PM)
Users Online
Users: 1
Guests: 97
Total: 98

Author Topic: photo block from frontpage  (Read 388 times)

0 Members and 1 Guest are viewing this topic.

Offline SamoanOnion

  • Newbie
  • *
  • Posts: 2
photo block from frontpage
« on: September 20, 2022, 01:24:34 AM »
hello,

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

Offline @rjen

  • Support Team
  • *
  • Posts: 3342
    • FJR-club Nederland
Re: photo block from frontpage
« Reply #1 on: September 20, 2022, 03:45:13 AM »
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...

Code: [Select]
<!-- 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

Offline SamoanOnion

  • Newbie
  • *
  • Posts: 2
Re: photo block from frontpage
« Reply #2 on: September 20, 2022, 03:48:30 AM »
Thanks!