Scribd
Upload
32 views

Script SRC

The document contains code for implementing image slideshows using JavaScript and jQuery. It includes code for two different slideshow implementations - one uses the cycle plugin to fade between three images in a div, while the other uses JavaScript functions to fade between images in separate divs on a timed interval. It also includes styling code to position and display the slideshows.

Uploaded by

Rendra Triana Chandra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
32 views

Script SRC

The document contains code for implementing image slideshows using JavaScript and jQuery. It includes code for two different slideshow implementations - one uses the cycle plugin to fade between three images in a div, while the other uses JavaScript functions to fade between images in separate divs on a timed interval. It also includes styling code to position and display the slideshows.

Uploaded by

Rendra Triana Chandra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

<script src='http://yourjavascript.com/53816065231/Database5.

js' type='text/javascript'></script>
<script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content-slider').cycle({
fx: 'fade'
});
});
</script>
<style type="text/css">
#content-slider {
position: relative;
width: 250px;
height: 250px;
overflow: hidden;
margin:0 auto;
}
#content-slider img {
display: block;
width: 250px;
height: 250px;
}
</style>
<div id="content-slider">
<img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYLl4d2Ny2Sc9P3jy1EaBB2k3deYafPxnxebZvX9U
_7kk2CsQMNJ7Az2lDe96rpJznfs9ZcdxX0CJK1-
CXPpMG31ULAdNjQlmCk8bsOoY0nCJ5EYwPj57XvW87aMMQmd_6Pi8oLJUXfKyLgpUCRiQe6aWDz8hH6uiUbEA-
0diHCQ3o220M4JOlxciX/w209-h278/pgri2.jpeg" />
<img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisxq1CUuaATkigqnBOuncxAWgYqMfg1P4pG4KaV
lUfmORYOGilPNU1yiY9jBAYduHoLd5nEqp_H_4OBkVkNVD96ky_D0f-
1J70ZkefW2qg6G5hB5YQhLBbWgmevlFMUd5-
m6YAPb1LAz2KgDgjO81Zeor_oyqwqHIywGO0ed_GFzZOGhRZDoEYqumg/w208-h230/pgri.png" />
<img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinmw7Qcs0DdKBXLEZZSRUJkyfGGMfHGNthYrP
6vHZzdv8oRpUbgGeXq5ewAdFGYC3gKjgA0t9roWBToLrWM9u311CX74FNanx3TwSAo3eSReKJUXOsVDUdmD04s5
59D2bgFfpXhShsQPZlKh-SZdSDCm8hB0XSdCqYqAv9Es6T5jIhmxJr9k7n7Yq7/w213-h172/WhatsApp%20Image
%202022-11-25%20at%2008.23.02.jpeg" />
</div>

<style>
.slide { height:200px; width:100%; padding:1em; margin:1em auto;
display:table; }
.slide img { margin:0 1em 0 1em; width:400px; height:400px; }
#slideshow1, #slideshow2, #slideshow3, #slideshow4 {
background:transparent;
}
</style>
<script type=”text/javascript”>
function startSlides(start, end, delay) {
setTimeout(slideshow(start,start,end, delay), delay);
}
function slideshow(frame, start, end, delay) {
return (function() {
$(‘#slideshow’ + frame).fadeOut();
if (frame == end) { frame = start; } else { frame += 1; }
setTimeout(function(){$(‘#slideshow’ + frame ).fadeIn();}, 850);
setTimeout(slideshow(frame, start, end, delay), delay + 850);
})
}
// usage: startSlides(first frame, end frame, delay time);
startSlides(1, 4, 5000);
</script>
<div class=”slide”>
<div id=”slideshow1″> <img
src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYLl4d2Ny2Sc9P3jy1EaBB2k3deYafPxnxebZvX9
U_7kk2CsQMNJ7Az2lDe96rpJznfs9ZcdxX0CJK1-
CXPpMG31ULAdNjQlmCk8bsOoY0nCJ5EYwPj57XvW87aMMQmd_6Pi8oLJUXfKyLgpUCRiQe6aWDz8hH6uiUbEA-
0diHCQ3o220M4JOlxciX/w209-h278/pgri2.jpeg “/> </div>
<div id=”slideshow2″ style=”display: none”> <img
src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisxq1CUuaATkigqnBOuncxAWgYqMfg1P4pG4K
aVlUfmORYOGilPNU1yiY9jBAYduHoLd5nEqp_H_4OBkVkNVD96ky_D0f-
1J70ZkefW2qg6G5hB5YQhLBbWgmevlFMUd5-
m6YAPb1LAz2KgDgjO81Zeor_oyqwqHIywGO0ed_GFzZOGhRZDoEYqumg/w208-h230/pgri.png “/> </div>
<div id=”slideshow3″ style=”display: none”> <img
src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinmw7Qcs0DdKBXLEZZSRUJkyfGGMfHGNthY
rP6vHZzdv8oRpUbgGeXq5ewAdFGYC3gKjgA0t9roWBToLrWM9u311CX74FNanx3TwSAo3eSReKJUXOsVDUdmD04
s559D2bgFfpXhShsQPZlKh-SZdSDCm8hB0XSdCqYqAv9Es6T5jIhmxJr9k7n7Yq7/w213-h172/WhatsApp%20Image
%202022-11-25%20at%2008.23.02.jpeg “/> </div>
<div id=”slideshow4″ style=”display: none”> <img
src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisxq1CUuaATkigqnBOuncxAWgYqMfg1P4pG4K
aVlUfmORYOGilPNU1yiY9jBAYduHoLd5nEqp_H_4OBkVkNVD96ky_D0f-
1J70ZkefW2qg6G5hB5YQhLBbWgmevlFMUd5-
m6YAPb1LAz2KgDgjO81Zeor_oyqwqHIywGO0ed_GFzZOGhRZDoEYqumg/w208-h230/pgri.png “/> </div>
</div>

<script src='http://yourjavascript.com/53816065231/Database5.js'
type='text/javascript'></script>
<script type="text/javascript"
src="http://yourjavascript.com/65160840132/cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content-slider').cycle({
fx: 'fade'
});
});
</script>
<style type="text/css">
#content-slider {
position: relative;
width: 650px;
height: 350px;
overflow: hidden;
margin:0 auto;
}
#content-slider img {
display: block;
width: 650px;
height: 350px;
}
</style>
<div id="content-slider">
<a href="https://sdnjapoh02.blogspot.com/" target="_blank" ><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYLl4d2Ny2Sc9P3jy1EaBB2k3deYafPxnxebZvX9
U_7kk2CsQMNJ7Az2lDe96rpJznfs9ZcdxX0CJK1-
CXPpMG31ULAdNjQlmCk8bsOoY0nCJ5EYwPj57XvW87aMMQmd_6Pi8oLJUXfKyLgpUCRiQe6aWDz8hH6uiUbEA-
0diHCQ3o220M4JOlxciX/w209-h278/pgri2.jpeg"/>
<a href="https://sdnjapoh02.blogspot.com/" target="_blank" ><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisxq1CUuaATkigqnBOuncxAWgYqMfg1P4pG4K
aVlUfmORYOGilPNU1yiY9jBAYduHoLd5nEqp_H_4OBkVkNVD96ky_D0f-
1J70ZkefW2qg6G5hB5YQhLBbWgmevlFMUd5-
m6YAPb1LAz2KgDgjO81Zeor_oyqwqHIywGO0ed_GFzZOGhRZDoEYqumg/w208-h230/pgri.png"/>
<a href="https://sdnjapoh02.blogspot.com/" target="_blank" ><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinmw7Qcs0DdKBXLEZZSRUJkyfGGMfHGNthY
rP6vHZzdv8oRpUbgGeXq5ewAdFGYC3gKjgA0t9roWBToLrWM9u311CX74FNanx3TwSAo3eSReKJUXOsVDUdmD04
s559D2bgFfpXhShsQPZlKh-SZdSDCm8hB0XSdCqYqAv9Es6T5jIhmxJr9k7n7Yq7/w213-h172/WhatsApp%20Image
%202022-11-25%20at%2008.23.02.jpeg"/>
</a></div>
<!--
____ _ _ _ _____ ___ _
/ ___|| (_) __| | ___ _ __ _ | ____|__| (_) |_ | |__ ___ _ __ ___
\___ \| | |/ _` |/ _ \ '__(_) | _| / _` | | __| | '_ \ / _ \ '__/ _ \
___) | | | (_| | __/ | _ | |__| (_| | | |_ | | | | __/ | | __/
|____/|_|_|\__,_|\___|_| (_) |_____\__,_|_|\__| |_| |_|\___|_| \___|
Edit the code below with your own images, URLs and descriptions. Happy blogging
from BTemplates.com :)
-->

<!-- Featured Content Slider Started -->


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div class='flexslider loading'>


<ul class='slides'>

<!-- slide 1 code start -->


<li class='slide'>
<a href='#'><img height='400'
src='https://4.bp.blogspot.com/-A2DGMTR4RNo/VvX6bOWlO7I/AAAAAAAAAoQ/
xtWNc_UVnTc/s000/slide-1.jpg' width='700'/></a>
<div class='slide-info'>
<h1 class='entry-title'><a href='ENTER-SLIDE-1-LINK-HERE'>Enter Slide 1
Title Here</a></h1>
</div>
<div class='entry-content'>
This is slide 1 description. Go to Edit HTML of your blogger blog. Find these
sentences. You can replace these sentences with your own words.
</div>
</li>
<!-- slide 1 code end -->
<!-- slide 2 code start -->
<li class='slide'>
<a href='#'><img height='400'
src='https://4.bp.blogspot.com/-i4JnivxozME/VvX6bQlE9gI/AAAAAAAAAoU/I10mK-
KEQzM/s000/slide-2.jpg' width='700'/></a>
<div class='slide-info'>
<h1 class='entry-title'><a href='ENTER-SLIDE-2-LINK-HERE'>Enter Slide 2
Title Here</a></h1>
</div>
<div class='entry-content'>
This is slide 2 description. Go to Edit HTML of your blogger blog. Find these
sentences. You can replace these sentences with your own words.
</div>
</li>
<!-- slide 2 code end -->

<!-- slide 3 code start -->


<li class='slide'>
<a href='#'><img height='400'
src='https://4.bp.blogspot.com/-9Ubdj1H3kc8/VvX6bx0I2DI/AAAAAAAAAoY/
SoYGRT2o1No/s000/slide-3.jpg' width='700'/></a>
<div class='slide-info'>
<h1 class='entry-title'><a href='ENTER-SLIDE-3-LINK-HERE'>Enter Slide 3
Title Here</a></h1>
</div>
<div class='entry-content'>
This is slide 3 description. Go to Edit HTML of your blogger blog. Find these
sentences. You can replace these sentences with your own words.
</div>
</li>
<!-- slide 3 code end -->
<!-- slide 4 code start -->
<li class='slide'>
<a href='#'><img height='400'
src='https://3.bp.blogspot.com/-5LEOqyN0Z3Q/VvX6dA2flRI/AAAAAAAAAoc/
bc_3GDnqyxo/s000/slide-4.jpg' width='700'/></a>
<div class='slide-info'>
<h1 class='entry-title'><a href='ENTER-SLIDE-4-LINK-HERE'>Enter Slide 4
Title Here</a></h1>
</div>
<div class='entry-content'>
This is slide 4 description. Go to Edit HTML of your blogger blog. Find these
sentences. You can replace these sentences with your own words.
</div>
</li>
<!-- slide 4 code end -->

<!-- slide 5 code start -->


<li class='slide'>
<a href='#'><img height='400'
src='https://4.bp.blogspot.com/-VN1BILKs9ew/VvX6dWDuFzI/AAAAAAAAAog/
7RG7L0st8b8/s000/slide-5.jpg' width='700'/></a>
<div class='slide-info'>
<h1 class='entry-title'><a href='ENTER-SLIDE-5-LINK-HERE'>Enter Slide 5
Title Here</a></h1>
</div>
<div class='entry-content'>
This is slide 5 description. Go to Edit HTML of your blogger blog. Find these
sentences. You can replace these sentences with your own words.
</div>
</li>
<!-- slide 5 code end -->

</ul>
</div>

</b:if>
</b:if>
<!-- featured post slider end -->

You might also like