Lightbox2 Image Repeats twice when used with TinyCarousel - javascript

I am currently having problems with Lightbox2 and TinyCarousel working together!
When i add the lightbox link onto an image within the carousel it shows 2 of that image within the lightbox.
I read a similar situation with bxSlider and the solution was to change the infinite variable to false - i have tried this within tiny carousel but it does not work.
You can see the problem here: http://www.elementintermedia.com/newsite/
Click on the first image in the Slider to start the lightbox and it displays that linked image twice within the lightbox. This is the only lightbox link on the current page also.
I know it's tiny carousel casuing the problem as if i remove that plugin the lightbox works correctly and olny shows the image once
Can anyone please help?? Thanks

Lightbox2 2.7.1 and the bootstrap carousel work well together
for the buttons :
<div class="btn-group">
<a class="btn" href="#scroller" data-slide="prev">previous</a>
<a class="btn" href="#scroller" data-slide="next">next</a>
</div>
And the carousel :
<div id="scroller" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
your content here
</div>
<div class="item">
your content here
</div>
</div>
</div>
I didn't use it exactly like you (1 image per step), but I'm sure you can find a lot of usage examples on the web.

Related

Angular 8 Carousel : Download Image button on each slide

I'm working with Angular 8 Carousel using Angular select plugin. I need to display some pictured in it with a download button to download the image directly. Can somebody help me with suggestions on how to do it? Carousel is working fine but I'm unable to add the download button.
w3 Carousel Example
And you can use angular click event some tag in *ngFor
<div class="item" *ngFor="let photo of photos">
<img [src]="photo?.url" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3 (click)="download(photo)">Download</h3>
</div>
</div>

Adding background color in TurnJS

I have experienced problem I have never faced before and even googling it did not help.
I have basic code from the official page of script TurnJS, which is the problem I have with.
<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div class="hard"></div>
<div class="hard"></div>
This works as it should but is has transparent background so when you have any text on pages it overlays themselves so you cannot read the text properly.
When I add
#flipbook div{
background: white;
}
It somehow breaks. Pages skew when hovered etc.
I cannot insert a jsfiddle example because the link for turnjs script is not https and I am not allowed to insert http links. And here it shows me error in code.
The skewed page is shown on image below.
Does someone know how to add a bg-colorto that flipbook?
I would aprreciate any comments.
You can add another class to your pages which specifies a background colour:
<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div class="pageStyle"> Page 1 </div>
<div class="pageStyle"> Page 2 </div>
<div class="pageStyle"> Page 3 </div>
...
And then specify everything you need in that class. The other method is to load background images for each page. This is generally how a magazine would be created in TurnJS as it's easier to automate.
Although I just went over their docs looking for this (I know it works, I've done it before) and couldn't find much about it.

Vertical Scrolling on Links with fullPage.js

I'm using the fullPage.js plugin to develop a project. The plugin works fine, but I have one question:
I have some sliders within a section so as to create vertical scrolling. However, within one slider I have different links that I also want to trigger vertical scrolling in the same way as the plugin does. Here's how my structure looks like:
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide">
Example
...
</div>
<div class="slide" id="example"> Slide 3 </div>
</div>
</div>
So, just like I click on the arrows and the different sliders appear, is it possible to click on a link and then a specific slider to appear? The idea is that the Slide 3 will contain content that will change depending on the link that is clicked.

imageScroll.js parallax background-image

I just implemented imageScroll.js on my website and for the images in between my paragraphs it works fine. When entering the website I would like to have the first image with the parallax effect as well. The images are either loaded via the data-image html tag or via image option (JS).
When I set the image as "background", I think the image is fix and the parallax effect can't be applied. But when I load the image into a div, as I do it with the other two images in between my paragraphs, it shifts the menu as well as the welcome text below.
I tried to realize it with z-index, but couldn't make it run yet.
Does anyone of you have an idea for me how I could make this happen?
Thanks a lot in advance!
Eric
I didn't see the wood for the trees. Just had to put everything inside the div from the parallax:
<div class="img-holder" data-image="../images/other/home-min.jpg" data-image-mobile="../images/other/home-min.jpg">
<!-- Home Page -->
<div id="home" class="container-fluid">
<div class="row">
<nav class="navigation">
<div class="col-md-3"><a class="navigation" href="#about">About</a></div>
<div class="col-md-3"><a class="navigation" href="#portfolio">Portfolio</a></div>
<div class="col-md-3"><a class="navigation" href="#contact">Contact</a></div>
<div class="col-md-3"><a class="navigation" href="#blog"></a></div>
</nav>
</div>
<div id="welcome" class="row">Welcome</div> <!--Welcome Text-->
</div>
</div>
maybe someone else is also confused and perceive this as helpful.
Cheers
Eric

Jquery scroller based on mouse position

So I have looked at jquery hover and this is all well and great but how can I use a list into this? The example that the previous user uses is all image backgrounds.
Im not sure if the is in the right place.
<div class="backdrop">
<ul id="year"></ul>
<div class="direction left"></div>
<div class="direction right"></div>
jsfiddle
Since I could not change background position on <ul><li> I decided to use margin here if my solution.

Categories