Below is the complete JavaScript code:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="assets/templates/default/_scripts/jquery.innerfade.js"></script>
<script type="text/javascript">
$(document).ready( function(){
$('.rotation ul').addClass('image_rotation');
$('.image_rotation').css("display","block");
$('.image_rotation').innerfade({
speed: 'slow',
timeout: 10000,
type: 'sequence'
});
});
</script>
<script type="text/javascript">
var save_url = "background-font-size-save.html"
$(document).ready(function () {
/* Images: rotate, frame, shadow */
$('.rotation ul li img').each(function() {
if ($(this).is(":first-child")) {
var m_left=0;
var m_top=0;
}
else {
var m_left=0;
var m_top=0;
m_left = parseInt($(this).prev().attr("width")) + parseInt($(this).prev().css('margin-left'));
if (parseInt(m_left)+parseInt($(this).attr("width")) > 430) {
m_left=0;
m_top=250-parseInt($(this).attr("height"));
}
}
var r_rand = Math.floor(Math.random() * 10) - 5;
$(this).css({'border':'5px #ffffff solid','border-radius':'10px','transform':'rotate('+r_rand+'deg)','-moz-transform':'rotate('+r_rand+'deg)','-webkit-transform':'rotate('+r_rand+'deg)','-ms-transform':'rotate('+r_rand+'deg)','box-shadow':'4px 4px 10px -3px #000000','position':'absolute','margin':m_top+'px 0 0 '+m_left+'px'});
});
/* images end */
background(5);
$('html').css('font-size', 14);
var originalFontSize = $('html').css('font-size');
});
function background(n) { $('.wrap').css("background","url(assets/templates/default/images/bg"+n+".jpg)"); $.ajax({ type: "POST", url: save_url, data: { background: n } }); return false; }
function big_font() {
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.1;
$('html').css('font-size', newFontSize);
$.ajax({ type: "POST", url: save_url, data: { font_size: newFontSize } });
return false;
}
function small_font() {
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.9;
$('html').css('font-size', newFontSize);
$.ajax({ type: "POST", url: save_url, data: { font_size: newFontSize } });
return false;
}
</script>
I have multiple images that I want to rotate, add border, and shadow to. However, when using a jQuery plugin to rotate content within li tags, I am encountering an issue. The HTML structure looks like this:
<div class="rotation">
<ul>
<li><img src=".." width=".." height=".." /></li>
<li><img src=".." width=".." height=".." /><img src=".." width=".." height=".." /></li>
<li><img src=".." width=".." height=".." /><img src=".." width=".." height=".." /><img src=".." width=".." height=".." /></li>
</ul>
</div>
The problem I'm facing is that when I apply styles such as shadows, rotation, and borders to each image using the jQuery code, all li contents are displayed simultaneously. Removing these styles results in only one li content being shown at a time. Why does this happen? How can I apply my desired styles to each image without affecting the carousel functionality?