I am using blade and laravel to create an image gallery. I can loop through an album and get the pictures to appear which is great, and got a bootstrap carousel to work. However I would like to use flexslider2 instead; however it is populated correctly, but it seems to have no height, it appears as a rounded line, with no images.
I have tried force setting the height by changing the css for flexslider 2, and I have also tried using no dynamic loops in the blade template, both of which didn't work. The Flexslider css file and the js file are both there and loading in right.
<div id="slider" class="flexslider">
<ul class="slides">
#foreach ($album->photos as $photo)
<li data-thumb="slide{{$loop->index}}-thumb.jpg">
<img src="/storage/photos/{{$photo->album_id}}/{{$photo->photo}}"/>
</li>
#endforeach
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
#foreach ($album->photos as $photo)
<li data-thumb="slide{{$loop->index}}-thumb.jpg">
<img src="/storage/photos/{{$photo->album_id}}/{{$photo->photo}}"/>
</li>
#endforeach
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
<script>
$(window).load(function() {
// The slider being synced must be initialized first
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
});
</script>
I would have expected the image carousel, populated with my images from the loop, and have the thumbnail slider, however they fail to show:
https://gyazo.com/1ff832be8c53e506351ba9f5dd634add
Related
I've made a site with laravel and have a page where there are pictures that can be seen in hi-resolution via fancybox or downloaded. In the database i have counters for each action. and I do already have GET routes set up for the counting since they are used in other situations too.
for example: www.mysiste.com/somecode/someothercode/image/viewed
the simplified structure of each image is this.. This is called inside a for each loop.. i removed all styling and classes for better reading...
<div >
<div class="card" style="background-color: lightgray">
<div >
<a data-fancybox="gallery" href="/images/......../{{$photo->filename}}">
<img class="card-img" src="/images/......../thumb/thumb_{{$photo->filename}}">
</a>
</div>
<div class="card-footer">
<div>
<div>
<a download="{{$photo->filename}}" href="/images/......../{{$photo->filename}}">
<span>Download (Hi-Res)</span>
</a>
</div>
<div>
<a download="social_{{$photo->filename}}" href="/images/......../social_{{$photo->filename}}">
<span>Download (Social-Res)</span>
</a>
</div>
</div>
</div>
</div>
</div>
I would need that when they hit the download button it calls a certain URL in the background for upcounting.. (most important)
If possible I would like to hit another URL when the images are viewed fullscreen through fancybox.
how can this be done?
You can do something in the lines of:
<a data-fancybox="gallery" href="{{ route('photo.fancybox', ['photo' => $photo])}}">
<img class="card-img" src="/images/......../thumb/thumb_{{$photo->filename}}">
</a>
...
<a href="{{ route('photo.download', ['photo' => $photo])}}">
<span>Download (Hi-Res)</span>
</a>
PhotoController
public function download(Photo $photo){
$photo->downloadCount->increment();
return redirect('/images/......../'. $photo->filename);
}
public function fancybox(Photo $photo){
$photo->fancyboxCount->increment();
return redirect('/images/......../social_'. $photo->filename);
}
And make sure to register your new routes accordingly:
Route::get('photo/download', 'PhotoController#download')->name('photo.download');
Route::get('photo/fancybox', 'PhotoController#fancybox')->name('photo.fancybox');
I'm trying to add two filtered galleries duplicating the portfolio section of this template:
http://www.free-css.com/free-css-templates/page221/helios
I've tried to:
modify the data-filter attribute
<ul class="cat">
<li>
<ol class="type">
<li>All</li>
<li>Web Design</li>
<li>App Development</li>
<li>Branding</li>
</ol>
</li>
</ul>
Change the rel="prettyPhoto" attribute to prettyPhoto1 for gallery 1 and prettyPhoto2 for the second gallery:
<div class="portfolio-item">
<div class="hover-bg"> <a href="img/portfolio/01.jpg" rel="prettyPhoto">
<div class="hover-text">
<h4>Project Title</h4>
<small>Web Design</small>
<div class="clearfix"></div>
</div>
<img src="img/portfolio/01.jpg" class="img-responsive" alt="Project Title"> </a> </div>
</div>
Editing the main.js in isotope section changing the value of data-filter:
/*====================================
Portfolio Isotope Filter
======================================*/
$(window).load(function() {
var $container = $('.portfolio-items');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
$('.cat a').click(function() {
$('.cat .active').removeClass('active');
$(this).addClass('active');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
return false;
});
});
But I can't separate the action of the filters from the two galleries, I can't make them independent.
I finally found the solutuion:
I've made two copies of the entire isotope section, in the second
one i've changed the selectors: .portfolio-items in
.portfolio-items2, cat in cat2 and data-filter in data-filter2
Then i've replaced in the HTML file the .portfolio-itmes and cat
classes of the second gallery and the data-filter attribute with the
new names.
I was wondering if there is a way to specify an area within a form that has been initialzed as a dropzone element.
I have this markup
<form class="vertical-flow vertical-flow--mini" id="new-support-ticket-form" method="post" enctype="multipart/form-data">
//Have removed all other mark up for brevity
<div class="catalogue__upload">
<div class="file-upload placeholder">
<label class="is-hidden--text">#BackendText.Global_UploadFiles</label>
<div class="file-upload__inner" aria-hidden="true" role="presentation">
<div class="file-upload__icon" aria-hidden="true" role="presentation">
<svgicon iconid="page-upload"></svgicon>
</div>
<div class="file-upload__content">
<h3 class="heading heading--quaternary file-upload__heading">#BackendText.Global_DragAndDropFile</h3>
<p class="file-upload__sub-heading">
#BackendText.Global_Or_Lowercase <label id="file-upload-browse" class="file-upload__label">#BackendText.Global_Browse_Lowercase</label>
</p>
</div>
</div>
</div>
</div>
<br/>
<div class="button-group button-group--right">
<button class="button button--color-orange button--medium" type="submit">Create ticket</button>
</div>
</form>
I create the dropzone programmically via.
var dz = $("#new-support-ticket-form").dropzone({
// The configuration we've talked about above
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,
previewTemplate: '<div style="display:none"></div>',
url: "#Url.Action("NewTicket")",
clickable: "#file-upload-browse",
// The setting up of the dropzone
init: function() {
var myDropzone = this;
}
});
I know the clickable option allows to have multiple elements or single one to bring up the file browser. However im wondering if there is a way to specify an element that is the "droppable" for files instead of the whole form. The element I would like is the div with the class catalogue__upload
The reason I have the whole form as the dropzone is that I want to upload additional data along with the file(s). The mark up for this is removed for the question, but its basically a bunch of selects and textboxes.
Instead of using whole form as the dropzone, it would be better to make just the element as dropzone and add additional data to the request using a sending event handler.
SUMMARY:
I need to insert a "Back to Top" links after every <div class="wrapSection">. I've been successful using the following:
<script>
$('.wrapSection').after('
<div class="backToTop clearfix">
Back To Top
</div>
');
</script>
However, I want to use a smooth scroll when clicking 'Back to Top.' With that in mind, I tried the following:
<script>
$('.wrapSection').after('
<div class="backToTop clearfix">
<a href="javascript:void(0)" onclick="goToByScroll('top')" class="up">
Back To Top
</a>
</div>
');
</script>
That does not work. Being a jQuery rookie, I did what seemed logical, which seems to never be the correct answer.
IN A NUTSHELL
More or less, I need this to appear, dynamically, after every <div class="wrapSection">:
<div class="backToTop">
<a class="top" href="javascript:void(0)" onclick="goToByScroll('top')">
Back to Top
</a>
</div>
This is the solution I came up with:
$(document).ready(function() {
// Markup to add each time - just give the element a class to attach an event to
var top_html = '<div class="backToTop">Back To Top</div>';
$(".wrapSection").after(top_html);
// Use event delegation (see http://api.jquery.com/on/)
$("body").on("click", ".top", function(e) {
e.preventDefault();
$("html,body").animate({ scrollTop: 0 }, "slow");
});
});
You can try a jsFiddle here: http://jsfiddle.net/F9pDw/
It is a single image within a grid that comes on top of all others, I honestly do not know why and need some help.
It is something that only happens while loading the page.
I'm using Zurb Foundation Orbit slider and my page hold a section like this:
<section class="container">
<div class="row">
<div class="two columns">
</div>
<div class="eight columns">
<div id="featured">
<div class="content">
<ul class="block-grid four-up">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="content">
<ul class="block-grid four-up">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<div class="two columns">
</div>
</div>
</section>
The javascript responsible for setting up the sliding part is this:
jQuery(document).ready(function ($) {
$("#featured").orbit({
animation: 'horizontal-push', // fade, horizontal-slide, vertical-slide, horizontal-push
animationSpeed: 800, // how fast animtions are
timer: false, // true or false to have the timer
advanceSpeed: 4000, // if timer is enabled, time between transitions
pauseOnHover: false, // if you hover pauses the slider
startClockOnMouseOut: false, // if clock should start on MouseOut
startClockOnMouseOutAfter: 1000, // how long after MouseOut should the timer start again
directionalNav: true, // manual advancing directional navs
captions: true, // do you want captions?
captionAnimation: 'fade', // fade, slideOpen, none
captionAnimationSpeed: 800, // if so how quickly should they animate in
bullets: false, // true or false to activate the bullet navigation
bulletThumbs: false, // thumbnails for the bullets
bulletThumbLocation: '', // location from this file where thumbs will be
afterSlideChange: function(){}, // empty function
fluid: '640x320' // or set a aspect ratio for content slides (ex: '4x3')
});
});
All the time what I get is the second image on the first grid being replaced by the second image on the second grid.
Meaning, when I load the page the nAppIcon doesn't show, instead the tooltip icon shows.
Then, if I click the arrows on the slider to navigate, all this disappears and all the icons are forever in proper place not overlapping anymore.
Ok, here is the answer I found.
Don't like it that much, but it worked.
By default I set the lower slide to hidden, and then do something like this:
$(".right").click(function(){
if ($("#infoPanel").is(':hidden')){
$("#appsPanel").hide();
$("#infoPanel").show();
}
else{
$("#infoPanel").hide();
$("#appsPanel").show();
}
});
$(".left").click(function(){
if ($("#infoPanel").is(':hidden')){
$("#appsPanel").hide();
$("#infoPanel").show();
}
else{
$("#infoPanel").hide();
$("#appsPanel").show();
}
});