I cannot seem to get the href to trigger the image url. I feel I am almost there but missing something, this worked great in v6 with CropUp. this is V7.1.1.
<div class="Photo">
@{
// Get all child items based on the document type 'Gallery' and group them is 3
<div class="photoGrid clearfix">
@foreach (var group in Model.Content.Children.InGroupsOf(3))
{
foreach (var item in group)
{
// find you whether is the first item of the group and set through css class
var itemClass = item.IsFirst("first item left", "item left");
// tell images and links where to find sources of datatypes
var src = @item.GetCropUrl("cropper", "thumbnail");
var photosrc = @item.GetCropUrl("cropper", "photo");
<div class="@itemClass">
<a class="fancybox" data-fancybox-group="gallery" href="@photosrc"><img src="@src" alt="@item.Name"/>@item.Name</a>
<span>@item.GetPropertyValue("PhotoText")</span>
</div>
}
// Clear after each group of 3
<div class="clearBoth"> </div>
}
</div>
}
</div>
When I look in the DOM I can't see the class="fancybox" on the <a> tag. Neither the data-fancybox-group="" attribute. Those missing is probably why - the interesting thing is to figure out why they're missing then :)
If you take a look at the source code from your page you can see that the rendered <a> looks like this
<a id="gallery" rel="gal" href="">image</a>
So perhaps you need to change your script for initialzing fancybox or just double check that you're using the right razor-snippet in your installation.
Happy to hear you managed to get it all working - I know the feeling where you're modifying the wrong file and can figure out why things are not working. It happens to all of us :)
Fancybox Intergration with v7.1.1 Image cropper
I cannot seem to get the href to trigger the image url. I feel I am almost there but missing something, this worked great in v6 with CropUp. this is V7.1.1.
Hi Keith
Is it possible to see this in action somewhere?
And are you using the same jquery and fancybox version on this installation as you did previously?
/Jan
the development site is http://dev.concretefloorcoatingsva.com and I am using the same fancybox version 2.1.4 click on our work.
Hi Keith
Is it the above code you're using on this site?
When I look in the DOM I can't see the class="fancybox" on the
<a>tag. Neither the data-fancybox-group="" attribute. Those missing is probably why - the interesting thing is to figure out why they're missing then :)/Jan
Yes this is the code on the site. when you go to the our work page and select a gallery the link just points to the root. any ideas
Hi Keith
Just to be clear - this page is where you can't get fancybox to play nice, right? http://dev.concretefloorcoatingsva.com/our-work/concrete-coatings/
I see rel="gal" here but still no data-fancybox-grupt="" attribute?
/Jan
yes we are clear and i see the same you are asking.
yes we are clear and i see the same you are asking. should i change the location of the fancybox files?
Hi Keith...
Well I'm a bit puzzled that this line of code from your above example does not seem to render the same way in the source of the page I mentioned above
If you take a look at the source code from your page you can see that the rendered
<a>looks like thisSo perhaps you need to change your script for initialzing fancybox or just double check that you're using the right razor-snippet in your installation.
Hope this helps.
/Jan
I resolved it and you are correct that i was modifying the wrong script.
Hi Keith
Happy to hear you managed to get it all working - I know the feeling where you're modifying the wrong file and can figure out why things are not working. It happens to all of us :)
Happy umbracoing mate.
/Jan
Awesome it's all working now!
One little extra suggestion, when you have code blocks you shouldn't use the
@within theme.g.
should be
It will save you from potential problems later
Jeavon
is working on a reply...