Post by azalenth on Jul 4, 2016 21:09:00 GMT -8
Good afternoon
Not sure if this is in the correct section so please move if necessary
I would like to have a snapshot of the various themes I have showing on the home page (a custom page) so that guests can see them. If possible I would like them to rotate either automatically or with an arrow like a slideshow.
Many thanks as ever
<style>
#my_spec_box{
width:824px;
height:682px;
background-color:gray;
margin:auto;
border:1px solid #000000;
}
.boxes{
font-size:12px;
padding:4px;
margin:2px;
text-align:center;
}
.boxes div img{margin:auto;
text-align:center;
}
h2{font-size:16px;color:#ffffff;font-weight:bold;text-align:center;
}
</style>
<div id="my_spec_box">
<div class="boxes">
<div class="fade-effect box1">
<h2>Theme Title here</h2><br>
<img src="http://storage.proboards.com/6132784/i/oEBapMxQAqd540pn0Drk.png">
</div>
<div class="fade-effect box2" style="display:none;">
<h2>Theme Title here</h2><br>
<img src="http://linktoimage.png">
</div>
<div class="fade-effect box3" style="display:none;">
<h2>Theme Title here</h2><br>
<img src="http://linktoimage.png">
</div>
</div>
</div>
<br><br>
<script>
$(document).ready(function () {
var allBoxes = $("div.boxes").children("div");
transitionBox(null, allBoxes.first());
});
function transitionBox(from, to) {
function next() {
var nextTo;
if (to.is(":last-child")) {
nextTo = to.closest(".boxes").children("div").first();
} else {
nextTo = to.next();
}
to.fadeIn(500, function () {
setTimeout(function () {
transitionBox(to, nextTo);
}, 5000);
});
}
if (from) {
from.fadeOut(500, next);
} else {
next();
}
}
</script>
I have one screen cap image in there. You'll have to do the screen caps yourself. I made mine rather large: 800px by 622px. You can make yours smaller of course but then you'll need to change the width and height of the css:
#my_spec_box{
width:824px;
height:682px;
background-color:gray;
margin:auto;
border:1px solid #000000;
}
To add more theme screen shots just add the bolded section like I did below in blue and change the class to "fade-effect box4" and so on as you add:
<div id="my_spec_box">
<div class="boxes">
<div class="fade-effect box1">
<h2>Theme Title here</h2><br>
<img src="http://storage.proboards.com/6132784/i/oEBapMxQAqd540pn0Drk.png">
</div>
<div class="fade-effect box2" style="display:none;">
<h2>Theme Title here</h2><br>
<img src="http://linktoimage.png">
</div>
<div class="fade-effect box3" style="display:none;">
<h2>Theme Title here</h2><br>
<img src="http://linktoimage.png">
</div>
<div class="fade-effect box4" style="display:none;">
<h2>Theme Title here</h2><br>
<img src="http://linktoimage.png">
</div>
</div>
</div>
<br><br>
Let me know if you need further help with this.
I tried using this in my site uxhal.boards.net
Placed it in forum wrapper for my homepage (wanted to make a fade-in/out slideshow.
But the <script> would mess the whole forum up (everything would be stuck to the sides/edges of the window < >)
and it wouldn't fade in/out as it should.
When I remove the <script> the image loads up, the forum gets fixed, andthe slideshow fade-in/out still wont play.
Please help
<style>
#my_spec_box{
width:900px;
height:300px;
background-color:transparent;
margin:auto;
border:1px transparent #000000;
}
.boxes{
font-size:12px;
padding:4px;
margin:2px;
text-align:center;
}
.boxes div img{margin:auto;
text-align:center;
}
h2{font-size:16px;color:#ffffff;font-weight:bold;text-align:center;
}
img {
max-width: 100%;
height: auto;
}
}
</style>
<div id="my_spec_box">
<div class="boxes">
<div class="fade-effect box1">
<h2></h2><br>
<img src="http://i.imgur.com/IQCtkAH.png">
</div>
<div class="fade-effect box2" style="display:none;">
<h2>Theme Title here</h2><br>
<img src="http://i.imgur.com/KvnfLSv.png">
</div>
<div class="fade-effect box3" style="display:none;">
<h2>Theme Title here</h2><br>
<img src="http://i.imgur.com/YYH8EjP.png">
</div>
</div>
</div>
<br><br>That's my code in forum wrapper, placed it below $[header]
I removed the <script> cause it ruins the whole site.
