1
General Support / Looking for custom Bootstrap Carousel slideshow blocks
« on: July 23, 2015, 10:17:41 AM »
Looking for someone to create two custom blocks for me. Willing to pay. Please private message me. Once done the module is yours and you can sell it in the marketplace if so desired.
User-Defined Bootstrap Carousel Slideshow
1. Creates a user-defined folder in the current template folder structure (ie; default/carousel)
2. Offer DropZone-like image uploads with thumbnail list of all current images, and X removal capabilities
3. Use filename as alt and caption, removing ".jpg" and replacing dashes "-" with spaces
4. Image sortorder is alphabetical. If the first element in the name is a numeric, remove that from the alt and caption as well.
5. Offer text input to add inline-styles to the div tag: class="carousel slide" data-ride="carousel" style="[user-defined]"
6. Two textarea fields to allow for inserting HTML before and after the carousel code is rendered.
Carousel code is provided below...
Featured Product Bootstrap Carousel Slideshow
1. Creates slideshow of all "featured" products in the database
2. Alt and caption tags pull item name
3. Images link to product
4. Two textarea fields to allow for inserting HTML before and after the carousel code is rendered.
Having written custom tags like this in ColdFusion I imagine each should take about an hour, though I don't know about the custom content block aspect of AbanteCart.
Sample code, below, of the user-defined carousel:
User-Defined Bootstrap Carousel Slideshow
1. Creates a user-defined folder in the current template folder structure (ie; default/carousel)
2. Offer DropZone-like image uploads with thumbnail list of all current images, and X removal capabilities
3. Use filename as alt and caption, removing ".jpg" and replacing dashes "-" with spaces
4. Image sortorder is alphabetical. If the first element in the name is a numeric, remove that from the alt and caption as well.
5. Offer text input to add inline-styles to the div tag: class="carousel slide" data-ride="carousel" style="[user-defined]"
6. Two textarea fields to allow for inserting HTML before and after the carousel code is rendered.
Carousel code is provided below...
Featured Product Bootstrap Carousel Slideshow
1. Creates slideshow of all "featured" products in the database
2. Alt and caption tags pull item name
3. Images link to product
4. Two textarea fields to allow for inserting HTML before and after the carousel code is rendered.
Having written custom tags like this in ColdFusion I imagine each should take about an hour, though I don't know about the custom content block aspect of AbanteCart.
Sample code, below, of the user-defined carousel:
Code: [Select]
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="float:right;width:450px;">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-interval="5000" data-pause="Hover" data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-interval="5000" data-pause="Hover" data-target="#carousel-example-generic" data-slide-to="1" ></li>
<li data-interval="5000" data-pause="Hover" data-target="#carousel-example-generic" data-slide-to="2" ></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="/storefront/view/default/carousel/Colorado-Can-Theme.jpg" alt="Colorado Can Theme">
<div class="carousel-caption">Colorado Can Theme</div>
</div>
<div class="item">
<img src="/storefront/view/default/carousel/Colorado-Can-Tower.jpg" alt="Colorado Can Tower">
<div class="carousel-caption">Colorado Can Tower</div>
</div>
<div class="item">
<img src="/storefront/view/default/carousel/Gemstone-Mining.jpg" alt="Gemstone Mining">
<div class="carousel-caption">Gemstone Mining</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>