This isnt' right and not sure where to place it.
Code: Select all
$('#home-blogrowinner').delay(1000).fadeToggle();Moderator: General Moderators
Code: Select all
$('#home-blogrowinner').delay(1000).fadeToggle();Code: Select all
$(document).ready(function() {
var elements = $('#home-blogrowinner').children();
var currentIndex = 0;
function fadeToggle() {
var nextIndex = currentIndex + 1;
if (nextIndex >= elements.length) { nextIndex = 0; }
$(elements[currentIndex]).fadeOut(400);
setTimeout(function() {
$(elements[nextIndex]).fadeIn();
}, 400);
currentIndex = nextIndex;
setTimeout(fadeToggle, 6000);
}
setTimeout(fadeToggle, 6000);
fadeToggle();
});Code: Select all
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.js"></script>
<style>
div.textContent { display:none; }
</style>
<script>
$(window).load(function(){
var cnt=0, texts=[];
// save the texts in an array for re-use
$(".textContent").each(function() {
texts[cnt++]=$(this).text();
});
function slide() {
if (cnt>=texts.length) cnt=0;
$('#textMessage').html(texts[cnt++]);
$('#textMessage')
.fadeIn('slow').animate({opacity: 1.0}, 5000).fadeOut('slow',
function() {
return slide()
}
);
}
slide()
});
</script>
<div id="textMessage"></div>
<div class="textContent">
<img src='48143917air-fright.jpg' width='50px'/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet risus vitae ligula lobortis feugiat. Aenean a lorem vitae nisi vehicula tempor. Donec suscipit ornare dui, sit amet tincidunt lorem aliquet id. Donec egestas sollicitudin consectetur. Donec ante dolor, bibendum a ultrices scelerisque, sagittis imperdiet sapien. Maecenas sagittis, sem et pharetra sollicitudin, orci nisi commodo augue, id molestie velit ipsum eget est. </div>
<div class="textContent">In sit amet diam et arcu aliquam tincidunt. Vestibulum quis mi id lacus fringilla pulvinar in nec lorem. Duis sed est at nunc euismod scelerisque. Nulla venenatis augue non urna sollicitudin et molestie neque aliquet. Proin odio ligula, sodales a auctor ac, iaculis ut urna. Nam tellus felis, ultrices sed ornare a, pretium eget odio. Suspendisse potenti. </div>Code: Select all
<script>
$(document).ready(function () {
var allBoxes = $("div.home-blogrowinner").children();
transitionBox(null, allBoxes.first());
});
function transitionBox(from, to) {
function next() {
var nextTo;
if (to.is(":last-child")) {
nextTo = to.closest("home-blogrowinner").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>Code: Select all
style>
.product-image-buttons
{
display: inline-block;
background-color: #cccccc;
color: #333333;
padding: 10px;
transition: background-color 0.2s;
border-bottom: 2px solid #cccccc;
cursor: pointer;
}
.product-image-buttons:hover
{
background-color: #555555;
color: #ffffff;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.5.js"></script>
<script type='text/javascript'>
$(window).load(function(){
$('#product-image-toggle > span').click(function() {
var ix = $(this).index();
$(this).css('border-bottom', '2px solid #555555');
$(this).siblings().css('border', 'none');
$('#product-image').toggle( ix === 0 );
$('#product-image-slab').toggle( ix === 1 );
$('#product-image-backlit').toggle( ix === 2 );
});
});
</script>
echo "<div id='product-image'><img src='/images/productphotos/$row->photo' alt='$row->photo' /></div>
<div id='product-image-slab'><img src='/images/bg-slab.jpg' alt='slab background' />
<div class='product-image-slab-fore'><img src='/images/slab/$row->photoslab' alt='$row->photoslab' /></div></div>
<div id='product-image-backlit'><img src='/images/backlit/$row->photobacklit' alt='$row->photobacklit' /></div>";
// only show toggle buttons if there is something to show
if (isset($row->photoslab) || isset($row->photobacklit))
{
echo "<div id='product-image-toggle'>
<span class='product-image-buttons'><i class='fa fa-camera' aria-hidden='true'></i> Main Photo</span> ";
}
if (isset($row->photoslab))
{
echo "<span class='product-image-buttons'><i class='fa fa-square-o' aria-hidden='true'></i> Slab</span> ";
}
if (isset($row->photobacklit))
{
echo "<span class='product-image-buttons'><i class='fa fa-lightbulb-o' aria-hidden='true'></i> Backlit</span>";
}
// only show closing toggle button container if there is something to show
if (isset($row->photoslab) || isset($row->photobacklit))
{
echo "<div style='clear: both'></div>
</div>";
}
Code: Select all
<script type="text/javascript" src="https://code.jquery.com/jquery-1.5.js"></script>
<script type='text/javascript'>
$(window).load(function(){
$('#product-image-toggle > span').click(function() {
var ix = $(this).index();
$(this).css('background-color', '#555555');
$(this).css('color', '#ffffff');
$(this).siblings().css('background-color', '#cccccc');
$(this).siblings().css('color', '#333333');
$('#product-image').toggle( ix === 0 );
$('#product-image-slab').toggle( ix === 1 );
$('#product-image-backlit').toggle( ix === 2 );
});
});
</script>