How to always show thumbnails in fotorama? Got a gallery with only one image and I want to show the thumbnail too and they are only shown when there are two pics or more.
Use enableifsingleframe flag:
<div class="fotorama" data-enableifsingleframe="true">
<img src="1.jpg"> <img src="2.jpg">
</div>
Related
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();
I have an appgyver app that I've tried to display images via
<img src="app/common/assets/pic.jpg"/>
<img src="common/assets/pic.jpg"/>
<img src="assets/pic.jpg"/>
<img src="pic.jpg"/>
<img src="http://www.somegoogleimage.com/pic.jpg"/>
Nothing shows. I'm confused out of my wits! I've also tried ng-src directive as source. Help !
create a folder in your supersonic project
app/common/assets/images
Put your images in app/common/assets/images
src =/images/yourimage.jpg
So I have a gallery of images, and a few links to it. Something like that
title
link to first image
link to second image
link to third image
This is cause first image to duplicate in fancybox. Like this:
http://filebeam.com/2dec41a1820f2525f040424578c4421c.jpg
How can I make a multiple links to the same object without duplications?
If all links are visible and clickable, then you could create a custom click handler for the first one that opens fancyBox gallery from the rest -
<a data-trigger-rel="gallery" class="fancybox-trigger" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>
<br />
<br />
<a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>
<a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>
$(".fancybox-trigger").click(function() {
$("a[rel='" + $(this).data('trigger-rel') + "']").eq(0).trigger('click');
return false;
});
$(".fancybox").fancybox();
See in action - http://jsfiddle.net/g9R4H/
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.
I'm working on a site, where I have 3 images of an item displayed, but there are can be more than 3 images of an item. I want to use fancybox to display them, but I couldn't figure out how it could be done.
I know how to create a gallery "manually", but I don't know how to add images manually to an existing gallery which is identified by a class.
Thanks.
It doesn't look like there are any methods in Fancybox for programatically adding an image to a gallery. Perhaps you could contact the author and request it, or you could modify the script.
You will need to recreate the fancybox gallery each time you add a new image. As simshaun said, there is no method for adding new images to an existing fancybox gallery.
From the Fancybox example page, you need to have the same ref parameter on each image in order to create the gallery.
<div style="display: none;"> <a class="fancybox-effects-c"
href="images/test.jpg" data-fancybox-group="groupname" ><img
src="test.jpg" alt="" /></a> </div>
This should work as the image will be there and added to the fancybox but just not shown.