I have a cover flow style carousel with 7 images:
<!-- ===== FLOW ===== -->
<div id="contentFlow" class="ContentFlow">
<!-- should be place before flow so that contained images will be loaded first -->
<div class="flow">
<a class="item" href="javascript:void(0);" id="toggle_value1"><img class="content" src="image1.png"/></a>
<a class="item" href="javascript:void(0);" id="toggle_value2"><img class="content" src="image2.png"/></a>
<a class="item" href="javascript:void(0);" id="toggle_value3"><img class="content" src="image3.png"/></a>
<a class="item" href="javascript:void(0);" id="toggle_value4"><img class="content" src="image4.png"/></a>
<a class="item" href="javascript:void(0);" id="toggle_value5"><img class="content" src="image5.png"/></a>
<a class="item" href="javascript:void(0);" id="toggle_value6"><img class="content" src="image6.png"/></a>
<a class="item" href="javascript:void(0);" id="toggle_value4"><img class="content" src="image7.png"/></a>
</div>
</div>
It utilizes this carousel cover flow: http://jacksasylum.eu/ContentFlow/docu.php
I want to have a separate div completely separate from the carousel that changes with the current content (clicks on each image). Current content being the one in the middle that is the biggest (see website referenced above). The following would be the divs that show up and disappear according to which item is active in the carousel.
<div id="div1" style="display:none;"></div>
<div id="div2" style="display:none;"></div>
<div id="div3" style="display:none;"></div>
Need help with conceptualizing how I would do this.
One place to start is to put your divs (div1, div2, div3) inside a div with the class caption. contentflow shows the unique caption with each active item, so the caption with your divs will change on each change in the active item ( no need to display:none):
<div class="item"> <img class="content" src="someImageFile.jpg"/>
<div class="caption">
<div id="div1">Content1</div>
<div id="div2">Content2</div>
<div id="div3">Content3</div>
</div> </div>
Related
I am working with semantic ui and got stuck with Notification menu implementation in menu bar.
I am able to setup the popup with a list but i am getting small list item squeezed vertically , i need them to be horizontally relaxed .
Below is the html i am working with .
<div class="ui fixed stackable menu">
<a class="item" href="index.php"> <img src="logo.png" class="image"></a>
<a class="item">My Project</a>
<div class="right menu">
<div class="item">
<i class="bell outline icon"></i>
<div class="ui teal circular mini label">4</div>
<div class="ui wide notification popup bottom transition ">
<div class="ui link celled selection list">
<div class='item'>
<div class='content'>
<a class='header'>Millan kumar</a>
<span class='time'>2 hrs ago</span>
<div class='description'>Commented on <a><b>Your Post </b></a> with <a><b>Following content</b></a></div>
<div class='extra'>Thanks you for your support</div>
</div>
</div>
</div>
</div>
</div>
<a class="item" href="profile.php">Profile</a>
<a class="item" href="logout.php">Logout</a>
</div>
</div>
Javascript:
$('.teal.label')
.popup({
on: 'click'
});
JS Fiddle :
https://jsfiddle.net/jfk4wkb1/2/
I have tried putting up the things on JS Fiddle , but In there popup is not coming up even , but on my local environment popup is ok but it is vertically squeezed.
Like this: Fiddle link
You did not add jquery in your fiddle external resource . Also i add some padding and width to looks good .
<div class="ui link celled selection list" style ="padding: 20px;width: 300px;">
HTML:
<div class="ui fixed stackable menu">
<a class="item" href="index.php"> <img src="logo.png" class="image"></a>
<a class="item">My Project</a>
<div class="right menu">
<div class="item">
<i class="bell outline icon"></i>
<div class="ui teal circular mini label">4</div>
<div class="ui wide notification popup bottom right transition ">
<div class="ui link celled selection list" style ="padding: 20px;width: 300px;">
<div class='item'>
<div class='content'>
<a class='header'>Millan kumar</a>
<span class='time'>2 hrs ago</span>
<div class='description'>Commented on <a><b>Your Post </b></a> with <a><b>Following content</b></a></div>
<div class='extra'>Thanks you for your support</div>
</div>
</div>
</div>
</div>
</div>
JS:
$('.teal.label')
.popup({
on: 'click'
});
I have a html code similar to this:
<div class="col-md-7">
<div class="row launch">
<img class="img-responsive" alt=""><br/>
</div>
<ul class="row gallery">
<a href="" class="light-link col-xs-6 col-sm-4 col-md-3 ">
<img src=""/>
</a>
</ul>
</div>
<div class="col-md-7">
<div class="row launch">
<img class="img-responsive" alt=""><br/>
</div>
<ul class="row gallery">
<a href="" class="light-link col-xs-6 col-sm-4 col-md-3 ">
<img src=""/>
</a>
</ul>
</div>
What i am trying to do (with JQuery) is when the user is clicking on the first div "row launch" to do something with the link "light-link" inside next siblings ul "row gallery". I want the same thing with the second div "row launch", and the link inside the bellow sibling and so on...What i am dooing wrong?
my code looks like this:
$('.launch').click(function(){
$('.launch').next().children("a:first").trigger('click');
});
But it does not work, it always attach the event to the first ul a "light-link" from the list, even when i click on the second div "row launch" from the list, or the third...
Note: needed for a lightgallery example (multiple galleries using classes), i wanted to trigger a clic on a thumbnail, when the user clic on a default large image, and activate the related gallery.
You can use the siblings and children. note that to trigger a native click you should use the get and then use the click function to trigger it.
$('.launch').click(function(){
$(this).siblings('ul').children(".light-link").get(0).click();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-7">
<div class="row launch">
<img class="img-responsive" alt="pic1"><br/>
</div>
<ul class="row gallery">
<a href="" class="light-link col-xs-6 col-sm-4 col-md-3 ">
<img src="google.com" alt="pic link1"/>
</a>
</ul>
</div>
<div class="col-md-7">
<div class="row launch">
<img class="img-responsive" alt="pic2"><br/>
</div>
<ul class="row gallery">
<a href="" class="light-link col-xs-6 col-sm-4 col-md-3 ">
<img src="" alt="pic link2"/>
</a>
</ul>
</div>
Try the .find() function combined with the selector this:
$('.launch').click(function(){
$(this).next().find("a:first-of-type").trigger('click');
});
Thank you. Both this 2 answers works,
So my problem was related to lightgallery
http://sachinchoolur.github.io/lightGallery/demos/
I have all this thumbnails, and when clic some of this you activate the lightgallery. But, i needed also, that when the user clic on a bigger default image(not thumbnails) it will activate the gallery related by triggering a clic on the first thumb lightgallery with big picture activating the gallery
I have a horizontal grid consisting of 3 image squares - The action that I am trying to produce is when any grid section is clicked, the user will be anchored down to a slideshow box that is being displayed below the grid. the first bit of HTML that I have pasted below is one grid (there will be 3) - and the section section of HTML is the slideshow section. Since I cant use the same ID tag multiple times in HTML, I believe I will need to use some for of Javascript or jQuery to take the user from the grid on click to the . Could anyone help me figure out how to do that?
<div id="grid-item" class="grid-item grid-item-1">
<div class="grid-project">
<img class="profile-image" src="img/image1.png">
</div>
<div class="grid-overlay">
<div class="project-info">
<a href="#project-link" id="toggle">
<h4 class="project-name">Headline 1</h4>
<p class="project-categories">description 1</p>
</a>
</div>
</div>
</div>
<div id="grid-item" class="grid-item grid-item-2">
<div class="grid-project">
<img class="profile-image" src="img/image.png">
</div>
<div class="grid-overlay">
<div class="project-info">
<a href="#project-link" id="toggle">
<h4 class="project-name">Headline 2</h4>
<p class="project-categories">description 2</p>
</a>
</div>
</div>
</div>
<div id="slideshow" class="slideshow">
<div class="slideshow_inner">
<a name="project-link" class="anchor">
<img src="img/slide_img_1.png">
</div>
</div>
If you're using id="" you can't use same id twice... Each element should have different id name. Change this in the second grid:
<a href="#project-link" id="toggle">
to this:
<a href="#project-link" id="toggle2">
and don't use same id twice...
Also, you have used name="" in the second section of your html, instead of id:
<a name="project-link" class="anchor">
VERY new to js but here it goes.
I want to be able to click on one of the images in the Portfolio section and have it change the text of the h3 in the Text section with a fade transition as well as select the corresponding slide in the slider.
Code:
<!-- 960 Container -->
<div class="container">
<!-- Description -->
<div class="sixteen columns">
<!-- Text -->
<h3 class="page_headline">Why Do You Need Manage+ For Your Business?</h3>
<div class="flexslider">
<ul class="slides">
<li>
<div id="details">Tier-1 Tech Support</div>
</li>
<li>
<div id="details">Off-site Backups</div>
</li>
<li>
<div id="details">Loaner Computer</div>
</li>
</ul>
</div>
</div><!-- End Description-->
<!-- Portfolio Content -->
<div id="portfolio-wrapper">
<!-- 1/4 Column -->
<div class="four columns portfolio-item">
<div class="item-img"><a href="support.html"><img src="img/support.jpg" alt=""/>
<div class="overlay link"></div></a></div>
<div class="portfolio-item-meta">
<h4>Tier-1 Tech Support</h4>
</div>
</div>
<!-- 1/4 Column -->
<div class="four columns portfolio-item">
<div class="item-img"><a href="backup.html"><img src="img/backup.jpg" alt=""/>
<div class="overlay link"></div></a></div>
<div class="portfolio-item-meta">
<h4>Off-site Backups</h4>
</div>
</div>
<!-- 1/4 Column -->
<div class="four columns portfolio-item">
<div class="item-img"><a href="loaner.html"><img src="img/loaner.jpg" alt=""/>
<div class="overlay link"></div></a></div>
<div class="portfolio-item-meta">
<h4>Loaner Computer</h4>
</div>
</div>
</div><!-- End Portfolio Content -->
</div><!-- End 960 Container -->
all you need is plane javascript or for lesser code, jquery.
just place your img and your div in the markup and bind the click event of the img to function in which you toggle your division display
you can have multiple images, referring to multiple containers(or same containers), which are hidden by default, but as you click on the relative image, it would appear.
see the code below
create your markup like:
<div class="wrapper">
<div class="image">
<img src='../images/actions_button_ok.png' data-target="one" />
<img src='../images/actions_button_ok.png' data-target="two" />
<img src='../images/actions_button_ok.png' data-target="three" />
</div>
<div class="target" id="one" >
this is text A
</div>
<div class="target" id="two" >
this is text B
</div>
<div class="target" id="three" >
this is text C
</div>
</div>
and your jquery code as:
$(document).ready(function(){
$('img').on("click",function(){
$('.target').hide();
$('#'+$(this).data('target')).toggle(1000);
});
});
basically, your html structure can be of your choice, but that's how you should go about it.
explore more about jquery.
see this fiddle.
instead of binding click to img, you can bind it to your li aswell.
I'd like to use the ContentFlow Javascript tool to display TEXT and other types of HTML rather than images. The documentation says it's possible but I have yet to discover how it works. Check out my test page which just doesn't load when the content is something other than images. Code from this page follows. Any thoughts?
<Html>
<script language="JavaScript" type="text/javascript" src="contentflow.js"></script>
<div class="ContentFlow">
<div class="loadIndicator"><div class="indicator"></div></div>
<div class="flow">
<div class="item" src="" title="">test content</div>
<img class="item" src="http://jquery.bassistance.de/plugins/thickbox/images/plant4.jpg" title="Your_Image_Title"/>
<img class="item" src="http://www.wired.com/images/article/magazine/1705/st_alphageek_f.jpg" title="Your_Image_Title"/>
<img class="item" src="http://jquery.bassistance.de/plugins/thickbox/images/plant4.jpg" title="Your_Image_Title"/>
<img class="item" src="http://www.wired.com/images/article/magazine/1705/st_alphageek_f.jpg" title="Your_Image_Title"/>
<img class="item" src="http://jquery.bassistance.de/plugins/thickbox/images/plant4.jpg" title="Your_Image_Title"/>
</div>
<div class="globalCaption"></div>
<div class="scrollbar"><div class="slider"><div class="position"></div></div></div>
</div>
I had the same problem. What you have to do is put an inner div inside the ".item" div like this:
<div class="item"><div class="content">Text content to display</div></div>
As a caution, the docs say that the ".item" container itself will be scaled to be a particular size, but the text will NOT be scaled...sometimes leads to funny-looking stuff if you don't watch it carefully.
I think it should be as simple as the following:
<div class="ContentFlow">
<div class="loadIndicator"><div class="indicator"></div></div>
<div class="flow">
<div class="item">test content</div>
<div class="item">test content2</div>
<div class="item">test content3</div>
<div class="item">test content4</div>
<div class="item">
<a href="http://stackoverflow.com">
<span>this is also test content</span>
</a>
</div>
</div>
<div class="globalCaption"></div>
<div class="scrollbar"><div class="slider"><div class="position"></div></div></div>
</div>