Diavoorstelling maar de foto wordt niet autmatisch aangepast

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>

Lastig denk ik omdat de foto (data-src) en thumb (data-thumb) een attribuut van een <div> zijn.
Je zou elke "foto div" een class="div-responsive" kunnen geven en boven in je <style> wat css erbij kunnen zetten.
Het proberen waard, of het werkt weet ik niet want normaal wordt dit bij een <img> gebruikt.
Suc6 met de slider.

Ik ga het zeker proberen!
Ik ben blij met alle suggesties.
Zeer bedankt

Mvrgroet,
Marianne

bron zei:

Lastig denk ik omdat de foto (data-src) en thumb (data-thumb) een attribuut van een <div> zijn.

Klik om te vergroten...

Moet ik dit lezen zoiets als voor elke foto een unieke regel (data-src) ?

bron zei:

Lastig denk ik omdat de foto (data-src) en thumb (data-thumb) een attribuut van een <div> zijn.
Je zou elke "foto div" een class="div-responsive" kunnen geven en boven in je <style> wat css erbij kunnen zetten.
Het proberen waard, of het werkt weet ik niet want normaal wordt dit bij een <img> gebruikt.

Code:

*** html ***
<div class="div-responsive" 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">
*** css ***
.div-responsive {
   max-width: 100%;
   /* volgende regel proberen */
   /* width: 100%; */
   height: auto;
}

Suc6 met de slider.

Klik om te vergroten...

Ik vrees dat mijn kennis van js mij de das omdoet, want ik weet niet exact wat ik moet vervangen.
Heb wel van alles geprobeerd maar helaas

Vereenvoudigd zet je dit bovenaan, vlak boven </style>
maar de kans is groot dat deze oplossing niet werkt omdat dit voor <img> is en niet voor <div>