I am new to coding and playing around with the Bakery template in WebMatrix. I have implemented LightBox, and it seems to be working, however, it doesn't seem to be pulling the correct image. On my page, I have thumbnails displayed on the screen. When you click, I am trying to open the 'non-Thumbnail' sized pictures to you can see more detail. However, it still looks like the Thumbnail size. I have a File Directory structure for my pictures of ~\Images\Products This is where the large images reside. Then I have ~\Images\Products\Thumbnails for the small images. Here is my code where I am displaying the LightBox.
<a href="~/Images/Products/#p.ImageName" data-lightbox="Images" title="#p.Name">
<img class="product-image" src="~/Images/Products/#p.ImageName" />
</a>
Thanks in advance for your help
The correct code for the Bakery template, that I have suggested to you in the previous question deleted by you was
#foreach (var p in products) {
<li class="product">
<a href="~/Images/Products/#p.ImageName" data-lightbox="Images" title="#p.Name">
<img class="product-image" src="~/Images/Products/Thumbnails/#p.ImageName" />
</a>
</li>
}
It works fine for me.
In future don't erase your question with an answer, but add a comment.
Edited
Try this:
download from the Lightbox 2 site Lightbox v2.6
in Webmatrix 3 create a new site from the Bakery template
copy lightbox-2.6.min.js from the js folder of your Lightbox download into the Scripts folder of your new site
copy lightbox.css from the css folder of your Lightbox download into the Content folder of your new site
create a new img folder in the root of your new site and copy into it close.png, loading.gif, prev.png, and next.png from the img folder of your Lightbox download
modify as follows the head section of the _SiteLayout.cshtml of your new site
<head>
<meta charset="utf-8" />
<title>Fourth Coffee - #Page.Title</title>
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/lightbox.css" rel="stylesheet" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/lightbox-2.6.min.js"></script>
#RenderSection("Scripts", required: false)
</head>
replace the Default.cshtml content of your new site with
#{
Page.Title = "Home";
var db = Database.Open("bakery");
var products = db.Query("SELECT * FROM PRODUCTS").ToList();
}
<h1>Welcome to Fourth Coffee!</h1>
<div id="productsWrapper">
<ul id="products" data-role="listview" data-inset="true">
#foreach (var p in products) {
<li class="product">
<a href="~/Images/Products/#p.ImageName" data-lightbox="Images" title="#p.Name">
<img class="product-image" src="~/Images/Products/Thumbnails/#p.ImageName" alt="Image of #p.Name" />
</a>
</li>
}
</ul>
</div>
Now, if you run your new site you should see something like this:
Related
I am doing my first steps in vapor 4 using leaf as view renderer. In my data i am pasting image urls but when I run the page the browser does not show them. The browser always shows the value of the "alt" tag.
So I tried to build a static leaf page which only shows an image from the internet but this is also not displaying the image. I can not figure out why. Do I have to set somewhere that the running test Webserver should render images? I am using macOS Big Sur 11.0.1
Here is my leaf code (it's simple html code but does not display the image)
<!DOCTYPE html>
<html>
<head>
<title>Image Test</title>
</head>
<body>
<a href="https://www.w3schools.com/tags/img_girl.jpg">
<img scr="https://www.w3schools.com/tags/img_girl.jpg" alt="test image" width="500" height="600">
</a>
</body>
</html>
As Nick said it was a speeling mistake .
I wrote „scr“, but it must be „src“
Correct:
<img src="https://www.w3schools.com/tags/img_girl.jpg" alt="test image" width="500" height="600">
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 tried since friday to install a playlist plugin to videojs but it dosent work for me.
i want this plugin : https://github.com/Belelros/videojs-playLists i red the documentation but i cant figured out what the problem is.
here are my Code snippets
<video class="video-js vjs-default-skin"
controls preload="auto" width="530" height="298"
data-setup='{"plugins":{"videojs-playlists"} } '>
<source src="../../../../../fileadmin/Film01.mp4" type='video/mp4' />
</video>
</div>
<div class="vt-video-player-playlist">
<ul>
<li data-videoplaylist="0">Critical Chain - in 5 Minuten erklärt</li>
<li data-videoplaylist="1">Critical Chain Multi Projektmanagement</li>
<li>Results of Critical Chain at von Ardenne..</li>
<li>Zuverlässige Projekte - Sichere Liquidität</li>
</ul>
</div>
</div>
and at the end of the site i load the js files
<script src="../../../Public/3rd/jquery-1.10.2/jquery-1.10.2.min.js"></script>
<script src="../../../Public/Js/common.js"></script>
<script src="../../../Public/Js/menuslider.js"></script>
<script src="../../../Public/3rd/video-js/video.js"></script>
<script src="../../../Public/3rd/videojs-playLists-master/dist/videojs-playlists.js"></script>
<script src="../../../Public/Js/videoplayer-settings.js"></script>
i hope you can help me. thanks in advance!
Well, there is currently an issue with the playlist which is basically this one:
https://github.com/Belelros/videojs-playLists/issues/6
The thing is that I was using some minified var name for getting videojs instance. I need to fix that ASAP. However, as a workaround, you can edit in Line 22 of videojs-playlist, and replace this:
player.pl.el = player.N;
By this:
player.pl.el = player.a;
Worked for me on another file... Not an optimal solution but should at least work.
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.