I'm using the Perch CMS to pull through some captions for a bxslider. I currently have 4 taglines. Because I'm using a different image on each bxslider list item I'm wondering if there's a way to pull out a specific index of the array itself.
<ul class="bxslider">
<li> <img src="assets/img/banners/hay-banner.jpg"/> </li>
<li> <img src="assets/img/banners/final-farmhouse-banner.jpg"/> </li>
<li> <img src="assets/img/banners/final-tractor-banner.jpg"/> </li>
<li> <img src="assets/img/banners/property-owners.jpg"/> </li>
</ul>
That's my HTML code currently. And I want to be able to pull the taglines out using
<?php perch_content('Taglines');?>
But obvioulsy that will pull all of the taglines into the title and not just the first tagline for the first <li>, the second tagline for the second <li> tag.
Is there a way to do this within perch? (Ideal output below).
<li> <img src="assets/img/banners/hay-banner.jpg" title="perch_content('Taglines (1))"
Create a template for that region in perch/templates/content/bxslider.html
Assuming you want the images to be rendered to 1000x400 on upload:
<perch:before>
<ul class="bxslider">
</perch:before>
<li> <img src="<perch:content id="image" label="Image" type="image" width="1000" height="400" crop="true" />" title="<perch:content id="tagline" label="Tagline" type="text" />" /> </li>
<perch:after>
</ul>
</perch:after>
On your page, create the region with <?php perch_content('Slider'); ?>, reload the page in the browser, go to perch backend, set the now appeared region "Slider" on that page to allow multiple items and use the template "Bxslider" - Done.
Many more options for images are to be found on http://docs.grabaperch.com/docs/templates/attributes/type/image/
Related
I am trying to change an image from an old to new using jquery or javascript only. It is the second picture out of three total that has a common parent element and is not separated by any specific parameters.
I believe I need to use a DOM navigation of some sort to get to the exact picture in the common class but haven't had any luck.
As I mentioned the 'make' class is shared between all three images as is 'make-image'. I need to simply swap the image for another updated version, facebook1.jpg.
<li class="make ">
<a href="#">
<img class="make-image" src="facebook.jpg">
<div class="make-info">
<img class="make-logo" src="facebook.jpg">
<div class="clearall"></div>
</div>
</a>
</li>
It should simply swap the existing image for another.
You can query for the image tags inside the list-item and iterate with each over the returned array. Inside that loop you can check if the src of that image-element is what you are looking for and replace it.
$('li.make img').each(function(index){
if ($(this).attr('src') == 'facebook.jpg') {
$(this).attr('src', 'facebook1.jpg');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="make">
<a href="#">
<img class="make-image" src="facebook.jpg">
<div class="make-info">
<img class="make-logo" src="facebook.jpg">
<div class="clearall"></div>
</div>
</a>
</li>
i am developing a smart tv application. i am having a trouble to add navigation on the list items. List items contains
<div class="work">
<img alt="" src="./images/img_title_work.png" class="title" />
<ul>
<li>
<img alt="" src="./images/1_1.png" class="title" />
<label>What is killer contents?
<p>2012.06</p>
</label>
</li>
<li>
<img alt="" src="./images/1_2.png" class="title" />
<label>Handmade application
<p>2012.05</p>
</label>
</li>
</ul>
</div>
I want whenever user press right nav button from remote a focus class is added to the next item and removed from the first. similarly if user again press right the focus class should be added to third item. and similar case with left navigation. This project is in html css js. Thanks
I'm doing some work and still fairly new to CSS,
I have some code here,
<div id='ninja-slider'>
<ul>
<li>
<div data-image="images/md/1.jpg" </div> </li>
<li>
<div data-image="images/md/2.jpg"> </div>
</li>
<li>
<div data-image="images/md/3.jpg"></div>
</li>
<li>
<div data-image="images/md/4.jpg"></div>
</li>
</ul>
</div>
I want to know how can i add a hyperlink to each of these images? I've tried however it hasn't worked for me unfortunately.
Please help, I even tried Javascript from a google search. Something to do with onclick
Cheers
wrap the div in <a> tag
<ul>
<li>
<div data-image="images/md/1.jpg"></div>
</li>
</ul>
Use <a></a> tag.
you can do this
<img src="your_image.jpg" width="" height="">
href will contain the page or wherever you want user to redirect.
This approach is better and more widely used than the one's you showed
I edited a template that I found online and had a jquery for thumbnails..
<ul class="ff-items">
<li class="ff-item-type-1">
<a href="#" title="" >
<div><span>Title 1 ABC</span></div>
<img src="images/w_abc1.jpg" alt=""/>
</a>
</li>
<li class="ff-item-type-3">
<a href="#" target="_blank" >
<div><span>TITLE 2 ABC</span></div>
<img src="images/w_abc1.jpg" alt="" />
</a>
</li>
</ul>
Link to this jquery plugin: [ ::Link:: ]
This plugin groups a list of images and on hover displays an animation with spanned text for info. Basically a transition on hover.
Now, I'm trying to change the hover effect to another effect via another jquery plugin which uses the following syntax:
<ul id="da-thumbs" class="da-thumbs">
<li>
<a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning">
<img src="images/7.jpg" />
<div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
</a>
</li>
<li>
<!-- ... -->
</li>
<!-- ... -->
</ul>
Link to this Jquery/CSS3 plugin: [ :::link::: ]
Now, my problem is that I want to keep the radio button selection but don't want the transition effects on hover.. instead I want the second jquery listed above which displays the info in a direction-aware way.
Class for ul is already described as class="ff-items". How can I add another class to it? I tried giving a space between the classes but that didn't function at all. Images froze without any transition or hover effect at all! I tried this:
<ul id="da-thumbs" class="ff-items da-thumbs">
( added da-thumbs id and gave 2 classes to the UL.)
Any help would be great! Thanks.
I can't seem to get multiple JQuery LightBox galleries to work on on HTML page. I have already tried all the suggestions on a similar post someone did a while back but I still can't get it to work!
Here is a bit of background info...
I have developed a static HTML page which contains three separate Lightbox galleries. The first gallery loads and works perfectly, but the second and third galleries fail to load; neither displaying the hyperlinked image (that triggers the lightbox gallery) or the images within that one gallery, I just get the 'loading' animation.
I am calling the Lightbox javascript in the of the HTML and have duplicated the Javascript calling function for the second and third galleries, calling them "#gallery1 a", "#gallery2 a", "#gallery3 a" etc, but it still doesn't work.
I know the three galleries work together because if I duplicate the first gallery (including all of images that are for gallery 1) and paste it again below, all three galleries work. The problem comes when I change the filename of the photo's that I want in the second and third galleries.
I have attached below an extract from <head> the and also the html from the static page so you can see everything I have done so far.
It would be greatly appreciated if someone could please point out where I am going wrong to get all three of these galleries to work.
Many thanks in advance...
Here is the HEAD of the HTML:
<head>
$(function() {
$('#gallery a').lightBox();
});
$(function() {
$('#gallery1 a').lightBox();
});
$(function() {
$('#gallery2 a').lightBox();
});
$(function() {
$('#gallery3 a').lightBox();
});
</head>
Now for the HTML:
<div id="gallery">
<ul>
<li>
<a href="portfolio/Bathroom install 2 watermarked/ian work photos 089.jpg">
<img src="portfolio/Bathroom install 2 watermarked/ian work photos 112.jpg"/>
</a>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<div id="gallery1">
<ul>
<li>
<a href="portfolio/Bathroom install 3 watermarked/ian work photos 089.jpg">
<img src="portfolio/Bathroom install 3 watermarked/ian work photos 182.jpg"/>
</a>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>