Insert thumb image in List View in Intel XDK - intel-xdk

I am using List View Template in Intel XDK in my project i want to use thumbnail of images in each list. Is there any workaround? As I am new in HTML development

You can manually add code within the <li> element to create <img> element. Here is example code to create a custom list with image thumbnail + text: Custom ListView
<style>
#afui #listview .list li {padding:10px 20px 10px 10px}
.list-image {float:left;width:50px;height:50px}
.list-text {margin-left:60px;min-height:50px}
</style>
custom <li>:
<ul class="list">
<li>
<a href="#item1">
<img class="list-image" src="data/male_user_icon.svg" />
<div class="list-text"><b>username1</b><br>Placeholder text for this list item 1.</div>
</a>
</li>
</ul>

Related

Hide empty src in fancybox

I am using Fancybox gallery with cushyCMS for my client. It will be useful if I can create more main images as a series of photos for particular thumbnail, but in this case I want to hide empty src images so there are no white images when pictures are extended and client doesn`t fill it.
<li>
<div class="wrap">
<a class="fancybox" rel="group1" href="images/GaleryPicSixSM.png">
<img id="thumbnailSix" class="cushycms thumbnail" src="index_15_1769179488.png" caption="thumbnail 6" />
</a>
<img id="mainPicutureSix" class="cushycms main" src="" caption="main image 6">
</div>
</li>
Is there anyway how I can hide automatically empty src in case that client will not find relevant picture ? Unfortunately there is no possibility in cushyCMS for my client to add a more pictures under one thumbnail.
If you can use jQuery, the following code would do the trick:
$('img [src=""]').hide();

bxslider change 2 sliders at one click

I am using Bxslider on a tabbed gallery with thumbnails
and it works great. the arrows and the tabs are working perfectly.
this is the JS I am using:
jQuery('#learni-features .bxslider').bxSlider({
mode: 'fade',
useCSS: false,
moveSlides: 1,
pagerCustom: '.tabs-links'
});
and this is the HTML:
this is for the tabs:
<ul class="tabs-links">
<li class="active">Curriculum <br>Control</li>
<li>Interactive <br>Classes</li>
<li>Social <br>Layer</li>
<li>Parent<br> App</li>
<li>Teacher <br>Community</li>
</ul>
and this is for the gallery:
<ul class="bxslider clearfix">
<li>
<img src="uploads/curriculum-screen.png" alt="">
</li>
<li>
<img src="uploads/interactive-screen.png" alt="">
</li>
<li>
<img src="uploads/social-screen.png" alt="">
</li>
<li>
<img src="uploads/parent-screen.png" alt="">
</li>
<li>
<img src="uploads/teacher-community-screen.png" alt="">
</li>
</ul>
I have another floating div with text:
<div class="info">
<ul class="slider2">
<li>
<h3>All Your Learning Tools in One Place</h3>
<p>Access course books, Learnies, assignments and learning assets from one place. Review your past lesson plans and easily answer your students’ questions. Create and begin your new class sessions!</p>
</li>
<li>
<h3>Access course books, Learnies</h3>
<p>Access course books, Learnies, assignments and learning assets from one place. Review your past lesson plans and easily answer your students’ questions. Create and begin your new class sessions!</p>
</li>
<li>
<h3>Create and begin your new class sessions</h3>
<p>Access course books, Learnies, assignments and learning assets from one place. Review your past lesson plans and easily answer your students’ questions. Create and begin your new class sessions!</p>
</li>
</ul>
</div>
this text needs to be also dynamic so when I click either on the tabs or the arrows it will change the text in that box too which basically belongs to each slide (information box). the thing is that this box is outside the "loop" of the slider.
is there a way I can trigger 2 sliders? the main gallery with the images and at the same time the text in the box.
Here is a fiddle I created
Notice the slider is working but there is another div at the bottom with a class of "info" and I want that div to be controlled from the the same main slider and change the text there..
THe button "Schedule a Demo" by the way is a stand alone button and stays there fixed.
any help will be appreciated
Thanks!
Assign your bxSlider to a variable:
var slider = $('#learni-features .bxslider').bxSlider({
mode: 'fade',
useCSS: false,
moveSlides: 1,
pagerCustom: '.tabs-links'
});
Then you can use onSlideNext and onSlidePrev as:
slider.onSlideNext(new function($slideElement, $oldIndex, $newIndex) {
//Your code here.
});
You can find out more information in the bxSlider documents founder here.

Background image in LI not showing up

I'm wanting to put a background image from a class as a list item:
<ul>
<li> Stuff </li>
<li> More Stuff </li>
<li class= "horizdotted" </li>
</ul>
Here's the CSS
.horizdotted {
background-image: url("images/horizdotted.png");
background-repeat:no-repeat;}
This doesn't work in any browser...it appears I have to have at least some info (other than a background image) in the LI. So, I made a png of a white pixel and tried another way:
<ul>
<li> Stuff </li>
<li> More Stuff </li>
<li class= "horizdotted"><img src="images/pixel.png" alt="teeny pixel" /> </li>
</ul>
Same CSS. This worked in Chrome and Firefox, but not in IE. I can't, for the LIFE of me, get it to work in IE. Please help if you can!! Here's an image in Chrome of the second way (with the teeny pixel).
[Stuff, more stuff, dotted line in unordered list] http://www.flickr.com/photos/77703125#N07/8321020892/in/photostream/
set width and height in css
.horizdotted {
background-image: url("images/horizdotted.png");
background-repeat:no-repeat;
width:50px;
height:50px;
}
set this property according to your image size, that you want.
jsFiddle for IE
You need to add content into your li so that it has something to show. Also, you have a syntax error for li in your Question. It is missing a closing bracket > symbol. You also have a blank space after the equal sign for class name too.
HTML:
<ul>
<li> Stuff </li>
<li> More Stuff </li>
<li class="horizdotted">Some stuff to view background.</li>
</ul>
CSS:
.horizdotted {
background-image:url(http://placehold.it/500x17/00ff00);
background-repeat: no-repeat;
}
jsFiddle for IE: No CSS
Also, since it's just a dashed line you want to show, then no CSS is necessary:
HTML:
<ul>
<li> Stuff </li>
<li> More Stuff </li>
<li>-----------------</li>
</ul>

HTML5 - Drag N Drop with divs and inner-images

I have this type of element:
<div draggable="true" id="item" style="margin:20px;background:red;height:400px;width:400px;">
<a href="#" target="_blank">
<img style="margin:40px;" src="http://www.placekitten.com/100/100" alt="">
</a>
</div>
I want to be able to:
Drag the whole div, even if I click on the /anchorimage (before dragging).
Still respond normally to an anchor/image click (without a drag).
Right now, only the image is dragged when I click on it.
Here's a fiddle: http://jsfiddle.net/M5tBd/
As per the HTML5 Editor's Draft spec, Images and Anchors with a href element are both elements that are, by default draggable. Your anchor is probably capturing the dragstart event, preventing the div from ever getting it. Try setting draggable="false" on your <img> and <a> elements.
<div draggable="true" id="item" style="margin:20px;background:red;height:400px;width:400px;">
<a href="#" target="_blank" draggable="false">
<img style="margin:40px;" src="http://www.placekitten.com/100/100" alt="" draggable="false">
</a>
Your fiddle doesn't even work dragging the img element for me in Chrome under Ubuntu, so you may have other issues besides this.

expression-engine : Fancybox + EE?

I am having a problem using fancybox with expression engine.
Basically I have different galleries set-up using matrix plugin. Each gallery has around 10 images. Basically I want the thumbnail to open up fancybox and fancybox to be able to scroll through the images in that matrix entry/gallery.
Sounds simple but I can’t seem to get fancybox to scroll through the images, it just stays on the first image.
This is my code for the thumbnails:
<ul id="image_gallery">
{exp:channel:entries channel="gallery_images"}
<li>
<a class="grouped_elements" href="{title_permalink='gallery/view'}" rel="{title}">
{gallery_image limit="1"}
{exp:imgsizer:size src="{image}" width="200px" height="180px"}
<img src="{sized}" width="{width}" height="{height}" alt="" />
{/exp:imgsizer:size}
{/gallery_image}
</a>
<h1>{title}</h1>
</li>
{/exp:channel:entries}
</ul>
This is my code for the fancybox template:
{exp:channel:entries channel="gallery_images"}
<ul id="img_gallery">
{gallery_image}
<li>
{exp:imgsizer:size src="{image}" width="650px" height="500px"}
<img src="{sized}" width="{width}" height="{height}" alt=""/>
{/exp:imgsizer:size}
</li>
{/gallery_image}
</ul>{/exp:channel:entries}
Everything works fine except for the image scrolling.
I’d appreciate any help!
Without seeing the output of your ExpressionEngine tags, it's difficult to understand where the problem is. However, your problem may be as simple as making sure all of the images in a gallery share the same HTML relationship attribute.
Fancybox Galleries are created from elements who share the same rel="" attribute:
<a class="gallery" rel="set_1" href="#"><img src="1.jpg" alt=""/></a>
<a class="gallery" rel="set_1" href="#"><img src="2.jpg" alt=""/></a>
<a class="gallery" rel="set_1" href="#"><img src="3.jpg" alt=""/></a>
<script>
$('a.gallery').fancybox();
</script>
In looking over your code, you're using the ExpressionEngine {title} tag as the rel="" attribute.
Since the title of your channel entry likely contains spaces and other special characters, a better choice would be to use the URL Title field, {title_permalink}.
The {title_permalink} tag converts the channel entry title to be URL-safe using either hyphens or underscores as character separators (using the Word Separator for URL Titles setting in the Global Channel Preferences).
Your updated thumbnail code would then be:
<a class="grouped_elements" href="{title_permalink='gallery/view'}" rel="{title_permalink}">
<img src="{sized}" width="{width}" height="{height}" alt="" />
</a>
If this doesn't work, perhaps you can provide a more complete code sample such as a jsFiddle or Pastie to help us understand where the problem may be.