Файл: cobisja/BootHelp/Guide/content/carousel.php
Строк: 351
<?php
/**
* The MIT License
*
* Copyright 2015 cobisja.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
use cobisjaBootHelpBootHelp;
use cobisjaBootHelpGuideSample;
$carousels = [
'title'=>'Carousel',
'samples'=>[
[
'name'=> 'Basic carousel',
'description'=>'Use <code>carousel</code> without options, passing just an array of elements
to display them in a cycle, like a carousel.',
'php_code'=> "echo BootHelp::carousel([
BootHelp::image(['src'=>'pet1.jpg']),
BootHelp::image(['src'=>'pet2.jpg']),
BootHelp::image(['src'=>'pet3.jpg']),
BootHelp::image(['src'=>'pet4.jpg'])
]);",
'result'=> BootHelp::carousel([
BootHelp::image(['src'=>'Guide/img/pet1.jpg']),
BootHelp::image(['src'=>'Guide/img/pet2.jpg']),
BootHelp::image(['src'=>'Guide/img/pet3.jpg']),
BootHelp::image(['src'=>'Guide/img/pet4.jpg'])
]),
'html_code'=>'<div data-ride="carousel" id="carousel-4921368" class="carousel slide">
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#carousel-4921368" class="active"></li>
<li data-slide-to="1" data-target="#carousel-4921368"></li>
<li data-slide-to="2" data-target="#carousel-4921368"></li>
<li data-slide-to="3" data-target="#carousel-4921368"></li>
</ol>
<div role="listbox" class="carousel-inner">
<div class="item active">
<img alt="pet1" src="pet1.jpg">
</div>
<div class="item">
<img alt="pet2" src="pet2.jpg">
</div>
<div class="item">
<img alt="pet3" src="pet3.jpg">
</div>
<div class="item">
<img alt="pet4" src="pet4.jpg">
</div>
</div>
<a data-slide="prev" role="button" href="#carousel-4921368" class="left carousel-control">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a data-slide="next" role="button" href="#carousel-4921368" class="right carousel-control">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>'
],
[
'name'=> 'Hiding navigation controls and/or indicators',
'description'=>'With a standard <code>carousel</code> both default navigation controls and indicators
are displayed. Howerver, you can hide any of them, even both. Just pass <code>["show_indicators"=>false]</code>
or <code>["show_controls"=>false]</code> to avoid displaying the scpecific control.'
,
'php_code'=> "echo BootHelp::carousel(
[
BootHelp::image(['src'=>'pet1.jpg']),
BootHelp::image(['src'=>'pet2.jpg']),
BootHelp::image(['src'=>'pet3.jpg']),
BootHelp::image(['src'=>'pet4.jpg'])
],
['show_controls'=>false]
);",
'result'=> BootHelp::carousel(
[
BootHelp::image(['src'=>'Guide/img/pet1.jpg']),
BootHelp::image(['src'=>'Guide/img/pet2.jpg']),
BootHelp::image(['src'=>'Guide/img/pet3.jpg']),
BootHelp::image(['src'=>'Guide/img/pet4.jpg'])
],
['show_controls'=>false]
),
'html_code'=>'<div data-ride="carousel" id="carousel-8368734" class="carousel slide">
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#carousel-8368734" class="active"></li>
<li data-slide-to="1" data-target="#carousel-8368734"></li>
<li data-slide-to="2" data-target="#carousel-8368734"></li>
<li data-slide-to="3" data-target="#carousel-8368734"></li>
</ol>
<div role="listbox" class="carousel-inner">
<div class="item active">
<img alt="pet1" src="pet1.jpg">
</div>
<div class="item">
<img alt="pet2" src="pet2.jpg">
</div>
<div class="item">
<img alt="pet3" src="pet3.jpg">
</div>
<div class="item">
<img alt="pet4" src="pet4.jpg">
</div>
</div>
</div>'
],
[
'name'=> 'Optional captions',
'description'=>'Add captions to your slides turning the element into an array leaving the slide
(the element) as first array item (index 0) and then add
<code>["caption"=>["title"=>"...", "content"=>"..."]]</code>. By default caption title is surrounding by
<code>h3</code> tags and the content by <code>p</code> tags. Both keys <code>title</code> and
<code>content</code> are optionals. Even you can pass <code>["caption"=>"..."]</code> to indicate that
the string should be used as a caption with no title. If you need a greater level on how the slide caption
must be generated, you can pass <code>["caption"=>Closure]</code>. This way you can generate fully
customized caption elements.'
,
'php_code'=> "echo BootHelp::carousel(
[ // Items array.
[ // First item array.
BootHelp::image(['src'=>'pet1.jpg']),
'caption'=>['title'=>'First slide label']
],
[ // Second item array.
BootHelp::image(['src'=>'pet2.jpg']),
'caption'=>['content'=>'Lorem ipsum dolor sit amet, consectetur adipiscing elit.']
],
[ // Third item array.
BootHelp::image(['src'=>'pet3.jpg']),
'caption'=>['title'=>'Third slide label', 'content'=>'Praesent commodo cursus magna.']
],
[ // Fourth item array.
BootHelp::image(['src'=>'pet4.jpg']),
'caption'=>'Nulla vitae elit libero, a pharetra augue mollis interdum.'
]
]
);",
'result'=> BootHelp::carousel(
[
[BootHelp::image(['src'=>'Guide/img/pet1.jpg']), 'caption'=>['title'=>'First slide label']],
[BootHelp::image(['src'=>'Guide/img/pet2.jpg']), 'caption'=>['content'=>'Lorem ipsum dolor sit amet, consectetur adipiscing elit.']],
[BootHelp::image(['src'=>'Guide/img/pet3.jpg']), 'caption'=>['title'=>'Third slide label', 'content'=>'Praesent commodo cursus magna, vel scelerisque nisl consectetur.']],
[BootHelp::image(['src'=>'Guide/img/pet4.jpg']), 'caption'=>'Nulla vitae elit libero, a pharetra augue mollis interdum.']
]
),
'html_code'=>'<div data-ride="carousel" id="carousel-4889461" class="carousel slide">
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#carousel-4889461" class="active"></li>
<li data-slide-to="1" data-target="#carousel-4889461"></li>
<li data-slide-to="2" data-target="#carousel-4889461"></li>
<li data-slide-to="3" data-target="#carousel-4889461"></li>
</ol>
<div role="listbox" class="carousel-inner">
<div class="item active">
<img alt="pet1" src="Guide/img/pet1.jpg">
<div class="carousel-caption">
<h3>First slide label</h3>
</div>
</div>
<div class="item">
<img alt="pet2" src="Guide/img/pet2.jpg">
<div class="carousel-caption">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<img alt="pet3" src="Guide/img/pet3.jpg">
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
<div class="item">
<img alt="pet4" src="Guide/img/pet4.jpg">
<div class="carousel-caption">
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
</div>
<a data-slide="prev" role="button" href="#carousel-4889461" class="left carousel-control">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a data-slide="next" role="button" href="#carousel-4889461" class="right carousel-control">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>'
],
[
'name'=> 'Customizing Carousel containers',
'description'=>'As you can see, a standard carousel have 3 major components: indicators container,
(represented by <code>ol</code> tags), items container (represented by <code>inner div</code> tag) and
navigations controls (represented by <code>a</code> tags). In those cases you want to customize the
carousel through css styling, maybe you'll need to use custom classes to be applied to any of the components
above mentioned. In such cases, you can use <code>["indicators_options"=>options]</code>,
<code>["content_options"=>options]</code> and/or <code>["controls_options"=>options]</code> to pass the items you
want to the respective container. However navigation
controls represent an special case because actually they are not into any container, so to pass
any element to them, you have to specify <code>["controls_options"=>["left"=>...]]</code> and/or <code>
["controls_options"=>["right"=>...]]</code> to indicate wich nav control will be affected by the options specified.
Also, be aware that if you want to pass any element to <code>carousel main div</code> just put them outside of any
of the options array mentioned above.'
,
'php_code'=> "echo BootHelp::carousel(
[ // Carousel items.
BootHelp::image(['src'=>'pet1.jpg']),
BootHelp::image(['src'=>'pet2.jpg']),
BootHelp::image(['src'=>'pet3.jpg']),
BootHelp::image(['src'=>'pet4.jpg'])
],
['id'=>'my-carousel', 'class'=>'en', // These options will be only in carousel main div.
'indicators_options'=>['class'=>'en-indicator', 'data-js'=>1],
'content_options'=>['class'=>'en-content', 'id'=>'my-items'],
'controls_options'=>['left'=>['class'=>'en-control']] // This class only applies to left nav control.
]
);",
'result'=> BootHelp::carousel(
[
BootHelp::image(['src'=>'Guide/img/pet1.jpg']),
BootHelp::image(['src'=>'Guide/img/pet2.jpg']),
BootHelp::image(['src'=>'Guide/img/pet3.jpg']),
BootHelp::image(['src'=>'Guide/img/pet4.jpg'])
],
['id'=>'my-carousel', 'class'=>'en',
'indicators_options'=>['class'=>'en-indicator', 'data-js'=>1],
'content_options'=>['class'=>'en-content', 'id'=>'my-items'],
'controls_options'=>['left'=>['class'=>'en-control']]
]
),
'html_code'=>'<div data-ride="carousel" id="my-carousel" class="en carousel slide">
<ol data-js="1" class="en-indicator carousel-indicators">
<li class="active" data-slide-to="0" data-target="#my-carousel"></li>
<li data-slide-to="1" data-target="#my-carousel" class=""></li>
<li data-slide-to="2" data-target="#my-carousel" class=""></li>
<li data-slide-to="3" data-target="#my-carousel" class=""></li>
</ol>
<div role="listbox" id="my-items" class="en-content carousel-inner">
<div class="item active">
<img alt="pet1" src="pet1.jpg">
</div>
<div class="item">
<img alt="pet2" src="pet2.jpg">
</div>
<div class="item">
<img alt="pet3" src="pet3.jpg">
</div>
<div class="item">
<img alt="pet4" src="pet4.jpg">
</div>
</div>
<a data-slide="prev" role="button" href="#my-carousel" class="en-control left carousel-control">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a data-slide="next" role="button" href="#my-carousel" class="right carousel-control">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>'
]
]
];
/**
* Carousel samples.
*/
echo new Sample($carousels);