2016-02-09, 20:25:58
(2015-12-30, 06:27:51)Oleg06 Wrote: mvlcek, there is a new script for the gallery, it allows you to use YouTube and Google maps http://sachinchoolur.github.io/lightGallery/demos/
Hi (new to getsimple, and of course i18gallery)
Would be great to have that, for it looks great, and is responsive.
In the meantime, if you are using bootstrap you could add this
http://get-simple.info/extend/plugin/pho...llery/988/
and with some css tweaking you could get that.
That said my problem is to have a responsive slider, not being a coder I copied s3slider file, changed all instances of s3slider with "carousel" (bootstrap's slider), changed some html, and got to show "carousel" in the slider's option editing of i18gallery, and to have images on the page, but problem is they are stacked, and not sliding, since I don't know how to finish (edit) the code to do make it work; following is the code I changed, if it is not asking too much I'd really appreciate if you could please correct it with working code.
Thank you
Original s3slider code snip
PHP Code:
function i18n_gallery_s3slider_content($gallery) {
$id = 's3slider-'.i18n_gallery_id($gallery);
?>
<div id="<?php echo $id; ?>">
<ul id="<?php echo $id; ?>Content">
<?php
foreach ($gallery['items'] as $item) {
?>
<li class="<?php echo $id; ?>Image">
<img src="<?php i18n_gallery_image_link($gallery,$item); ?>" />
<span><strong><?php echo htmlspecialchars(@$item['_title']); ?></strong><br/><?php echo htmlspecialchars(@$item['_description']); ?></span>
</li>
<?php
}
?>
<div class="clear <?php echo $id; ?>Image"></div>
</ul>
</div>
What I have changed (besides the s3slider instances)
PHP Code:
function i18n_gallery_carousel_content($gallery) {
$id = 'carousel-'.i18n_gallery_id($gallery);
?>
<div id="fz-gallery-slider" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#fz-gallery-slider" data-slide-to="0" class="active"></li>
<li data-target="#fz-gallery-slider" data-slide-to="1"></li>
<li data-target="#fz-gallery-slider" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php
foreach ($gallery['items'] as $item) {
?>
<div class="item active <?php echo $id; ?>Image">
<img src="<?php i18n_gallery_image_link($gallery,$item); ?>" />
<span><strong><?php echo htmlspecialchars(@$item['_title']); ?></strong><br/><?php echo htmlspecialchars(@$item['_description']); ?></span>
</div>
<?php
}
?>
<div class="clear <?php echo $id; ?>Image"></div>
</div>
</div>
Some notes about carousel's snip:
id="fz-gallery-slider" is the id for bootstrap to be given to the slider
<div class="item active"> should be given to the first image only, and the others should have <div class="item">