mtenklooster
Gebruiker
- Lid geworden
- 8 jul 2001
- Berichten
- 330
Hallo,
Wie helpt!?
Ik beheer voor onze buurtvereniging een blogpost. Dit is www.elshofbode.nl
Gemaakt met blogger maar nu heeft google besloten om een slideshow niet meer aan te bieden.
Echt lastig!!
Nu heb ik een js scriptje gevonden die vrijwel hetzelfde doet.
Ik heb het wel wat kunnen aanpassen maar het grootste probleem is dat de foto's allemaal een ander formaat hebben.
Is het mogelijk om deze automatisch te laten aanpassen, tis net de finishing touch, zo jammer
Dit is het scriptje:
<!---------------------------------------------
Blogger Slideshow Widget by
http://imagesliderforblogger.blogspot.com/
org. by dimpost.com
----------------------------------------------->
<!-- Camera_Slideshow Styles -->
<link rel='stylesheet' id='camera-css' href='http://project.dimpost.com/camera-slideshow/css/camera.css' type='text/css' media='all'>
<!-- Camera Slideshow Scripts -->
<script type='text/javascript' src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
<script type='text/javascript' src='http://project.dimpost.com/camera-slideshow/scripts/jquery.mobile.customized.min.js'></script>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<script type='text/javascript' src='http://project.dimpost.com/camera-slideshow/scripts/camera.min.js'></script>
<script type='text/javascript'>
jQuery(function() {
jQuery('#camera_wrap_1').camera({
time: 800, // milliseconds between the end of the sliding effect and the start of the nex one
transPeriod: 500, // length of the sliding effect in milliseconds
thumbnails: true, // thumnails & tooltip is controlled by it
pagination: false, // only when "pagination" is set to "false" thumbnails will be visible
fx: 'curtainTopLeft, curtainTopRight, curtainBottomLeft, curtainBottomRight, curtainSliceLeft, curtainSliceRight, blindCurtainTopLeft, blindCurtainTopRight, blindCurtainBottomLeft, blindCurtainBottomRight, blindCurtainSliceBottom, blindCurtainSliceTop, stampede, mosaic, mosaicReverse, mosaicRandom, mosaicSpiral, mosaicSpiralReverse, topLeftBottomRight, bottomRightTopLeft, bottomLeftTopRight, bottomLeftTopRight, scrollLeft, scrollRight, scrollHorz, scrollBottom, scrollTop', // transition effects
hover: false, // Pause on hover
height: '50%' // slideshow height (50% is default)
});
});
</script>
<style type="text/css">
.fluid_container {
margin: 0 auto;
/* aling centered */
width: 100%;
max-width: 900px;
overflow: hidden;
}
/* Blogger CSS Conflict Fix */
.camera_pag_ul {
border: none !important;
background: none !important;
}
.camera_pag_ul li {
float: inherit !important;
padding: inherit !important;
}
.camera_pag_ul {
margin: 0 !important;
border: 0 !important;
}
</style>
<div class="fluid_container">
<!-- camera_slideshow camera_wrap-->
<div class="camera_wrap" id="camera_wrap_1">
<div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/1.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/1.jpg">
<div class="camera_caption fadeFromBottom">
</div>
</div>
Wie helpt!?
Ik beheer voor onze buurtvereniging een blogpost. Dit is www.elshofbode.nl
Gemaakt met blogger maar nu heeft google besloten om een slideshow niet meer aan te bieden.
Echt lastig!!
Nu heb ik een js scriptje gevonden die vrijwel hetzelfde doet.
Ik heb het wel wat kunnen aanpassen maar het grootste probleem is dat de foto's allemaal een ander formaat hebben.
Is het mogelijk om deze automatisch te laten aanpassen, tis net de finishing touch, zo jammer
Dit is het scriptje:
<!---------------------------------------------
Blogger Slideshow Widget by
http://imagesliderforblogger.blogspot.com/
org. by dimpost.com
----------------------------------------------->
<!-- Camera_Slideshow Styles -->
<link rel='stylesheet' id='camera-css' href='http://project.dimpost.com/camera-slideshow/css/camera.css' type='text/css' media='all'>
<!-- Camera Slideshow Scripts -->
<script type='text/javascript' src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
<script type='text/javascript' src='http://project.dimpost.com/camera-slideshow/scripts/jquery.mobile.customized.min.js'></script>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<script type='text/javascript' src='http://project.dimpost.com/camera-slideshow/scripts/camera.min.js'></script>
<script type='text/javascript'>
jQuery(function() {
jQuery('#camera_wrap_1').camera({
time: 800, // milliseconds between the end of the sliding effect and the start of the nex one
transPeriod: 500, // length of the sliding effect in milliseconds
thumbnails: true, // thumnails & tooltip is controlled by it
pagination: false, // only when "pagination" is set to "false" thumbnails will be visible
fx: 'curtainTopLeft, curtainTopRight, curtainBottomLeft, curtainBottomRight, curtainSliceLeft, curtainSliceRight, blindCurtainTopLeft, blindCurtainTopRight, blindCurtainBottomLeft, blindCurtainBottomRight, blindCurtainSliceBottom, blindCurtainSliceTop, stampede, mosaic, mosaicReverse, mosaicRandom, mosaicSpiral, mosaicSpiralReverse, topLeftBottomRight, bottomRightTopLeft, bottomLeftTopRight, bottomLeftTopRight, scrollLeft, scrollRight, scrollHorz, scrollBottom, scrollTop', // transition effects
hover: false, // Pause on hover
height: '50%' // slideshow height (50% is default)
});
});
</script>
<style type="text/css">
.fluid_container {
margin: 0 auto;
/* aling centered */
width: 100%;
max-width: 900px;
overflow: hidden;
}
/* Blogger CSS Conflict Fix */
.camera_pag_ul {
border: none !important;
background: none !important;
}
.camera_pag_ul li {
float: inherit !important;
padding: inherit !important;
}
.camera_pag_ul {
margin: 0 !important;
border: 0 !important;
}
</style>
<div class="fluid_container">
<!-- camera_slideshow camera_wrap-->
<div class="camera_wrap" id="camera_wrap_1">
<div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/1.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/1.jpg">
<div class="camera_caption fadeFromBottom">
</div>
</div>