I use codeigniter pagination class in my project it's works fine for me . But there is no option to tell class just show next and previous link ,
please see this image I want to show result paged plus I'd like to use to link for next and previous instead of numeric links and when the user click on the next button I'll use Ajax to retrieve request I don't have problem with Ajax calls in pagination in numeric links but I want to just show this to link :)
I don't think I can explain what I need very good so please see the image .
link text
Here is my view file :
<div style="height:200px; position:relative">
<div id="left_nav"></div>
<div id="right_nav"></div>
<div style="width:622px;margin:0 auto;">
<!-- Gallery Box1 -->
<?php foreach($last_profile as $l) : ?>
<div id="galleryBoxHolder">
<div id="galleryBoxContent">
<div id="ImageHolder">
<img src="dummy_data/1.gif" /> </div>
<br />
<p><?=$l->artname?> </p>
<br />
<p style="color:#1a4688">asdasd</p>
<p style="color:#1a4688 ; direction:ltr"><?=$l->length?> cm x <?=$l->width?> cm</p>
</div>
</div>
<?php endforeach ;?>
<div>
<?=$links?>
</div>
<!-- Gallery box1 :off -->
</div>
</div>
Please Check This url which is exactly what I need (#:title Customers Who Bought This Item Also Bought)
In version 2.0.3 Codeigniter - To show Next / Previous only you can add the following config settings:
$config['display_pages'] = FALSE;
$config['first_link'] = FALSE;
$config['last_link'] = FALSE;
You have a couple of options. The first is really simple, hide the thumbnails portion of the pagination module with CSS. The second options isn't too complex either: modify the pagination class to not include the thumbnails, and instead limit its output to the next/prev buttons. This should be somewhat trivial as well.
Line 199 of the System/Libraries/Pagination Library is where the "digits" are handled. This is where you will remove any appending to the $output variable:
if ($this->cur_page == $loop)
{
$output .= $this->cur_tag_open.$loop.$this->cur_tag_close; // Current page
}
else
{
$n = ($i == 0) ? '' : $i;
$output .= $this->num_tag_open.''.$loop.''.$this->num_tag_close;
}
Related
This is what i want to display as slider when it slides both the rows move left or right correspondingly
a b c
a b c
<>
but what i have got is given below
a b c
<>
While getting images from database can't get the logic to display it by two rows.How is it possible??
<?php if($sliderimages):?>
<div class="owl-carousel client-slider owl-theme">
<?php foreach($sliderimages as $sliderimage):?>
<div class="item">
<div class="product-box">
<div class="product-img">
<img src="<?php echo base_url('assets/sliders/'.$sliderimage->file_name)?>" class="img-full" alt="" />
</div>
</div>
</div>
<?php else: ?>
<h5 class="text-alter"> sliders are not available</h5>
<?php endif;?>
</div>
In static condition the html code be like
<div class="owl-carousel client-slider owl-theme">
<div class="item">
<div class="product-box">
<div class="product-img"><img src="images/logos/Acer.jpg" class="img-full" alt=""/> </div>
<div class="product-img"><img src="images/logos/Alfa.jpg" class="img-full" alt=""/> </div>
</div>
</div>
I have to display images in carousel in two rows dynamically from database as static condition i have given above.The images fetch from db are to be placed in two rows. How can i get the result as static condition .Can anyone help me to solve this
I have updated my answer. With a simple CSS and HTML hack you don't need to alter the Javascript code, but you need to set some margins in your CSS and at initiation of your owl-carousel. Start by creating a flat array with file names in the sort order you want. This could be done in a Codeigniter Controller method or in the View:
// CREATE A FLAT ARRAY WITH JUST THE FILE NAMES FROM YOUR ORIGINAL ARRAY OF PHP OBJECTS
foreach($sliderimages as $sliderimage){
$result[] = $sliderimage->file_name;
}
// YOU NOW HAVE A FLAT ARRAY WITH FILE NAMES IN THE SORT ORDER YOU WANT TO DISPLAY THEM
// FOR EXAMPLE: array('1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg');
// NOW WE NEED TO ALTERNATE THE SORT ORDER IN THE ARRAY.
// 1: SPLIT THE ARRAY IN THE MIDDLE AND CREATE TWO NEW...
list($array1, $array2) = array_chunk($result, ceil(count($result) / 2));
// 2: EMPTY THE RESULT ARRAY TO MAKE ROOM FOR THE NEW RESULT
$result = array();
// COMBINE THE TWO NEW ARRAYS INTO ONE ARRAY WITH AN ALTERNATE SORT ORDER
array_map(function($item1, $item2) use (&$result)
{
$result[] = $item1;
$result[] = $item2;
}, $array1, $array2);
// WE USE FILTER TO REMOVE ARRAY ITEMS WITH EMPTY STRINGS
$result = array_filter($result);
Now we got an array with alternate sort order that is needed to be able to display the images in the sort order that you want with this suggested solution.
Loop through your result array and print the HTML. Here you need to control the odd and even rows to get it right:
// CREATE A COUNTER TO CHECK ODD/EVEN ROWS
$counter = 1;
// NUMBER OF IMAGES TOTAL
$number_of_images = count($result);
// IF WE HAVE IMAGES...
if($number_of_images > 0){
//START OWL CAROUSEL DIV
echo '<div class="owl-carousel owl-theme">';
foreach($result as $img) {
if ($counter % 2 == 0){ // EVEN ROW
echo ' <div class="product-box"><div class="product-img"><img src="'.base_url('assets/sliders/'.$img).'" class="img-full" alt=""/></div></div>';
// CLOSE ITEM DIV ON ODD ROWS
echo '</div>';
} else { // ODD
//OPEN A NEW DIV ITEM ON ODD ROWS
echo '<div class="item">';
// ECHO THE DIV WITH THE IMAGE
echo ' <div class="product-box"><div class="product-img"><img src="'.base_url('assets/sliders/'.$img).'" class="img-full" alt=""/></div></div>';
// CHECK TO SEE IF THIS IS THE LAST ROW
if($counter==$number_of_images){
// CLOSE ITEM DIV ON LAST ROW
echo '</div>';
}
} // END ODD/EVEN CHECK
$counter++;
} // END FOREACH
//END OWL CAROUSEL DIV
echo '</div>';
// NO SLIDER IMAGES AVAILABLE
} else {
echo '<h5 class="text-alter"> sliders are not available</h5>';
}
Now you should have printed HTML looking something like this:
<div class="owl-carousel owl-theme">
<div class="item">
<div class="product-box"><div class="product-img"><img src="images/logos/1.jpg" class="img-full" alt=""/></div></div>
<div class="product-box"><div class="product-img"><img src="images/logos/4.jpg" class="img-full" alt=""/></div></div>
</div>
<div class="item">
<div class="product-box"><div class="product-img"><img src="images/logos/2.jpg" class="img-full" alt=""/></div></div>
<div class="product-box"><div class="product-img"><img src="images/logos/5.jpg" class="img-full" alt=""/></div></div>
</div>
<div class="item">
<div class="product-box"><div class="product-img"><img src="images/logos/3.jpg" class="img-full" alt=""/></div></div>
<div class="product-box"><div class="product-img"><img src="images/logos/6.jpg" class="img-full" alt=""/></div></div>
</div>
</div>
The only thing you then have left to do is to set the margins for the images in CSS:
.product-box { margin-bottom: 10px; }
And set the margin and the number of images to show per row upon initiation of you owl-carousel (change the item property to items:4 if you want to show four images/row):
$('.owl-carousel').owlCarousel({
margin:10,
items:3
});
And the results should become:
Codepen example
https://codepen.io/MicKri/pen/vYpjqPy
More reading and examples
Owl carousel multiple rows
https://w3codemasters.in/multiple-rows-carousel-by-owl-carousel/
I'm trying to get pagination into my view. I don't know where is the problem, the code doesn't show any errors.
Here is my controller function
public function apakskategorijas($id)
{
$apakskat = apakskategorijas::with('prece')->where('id',$id)->paginate(2);
return view ('kategorijas.apakskategorijas',compact('apakskat'));
}
View
#section('content')
#foreach($apakskat as $apk)
#foreach($apk->prece as $prec)
<div class="col-md-4 kat">
<a href="{{ url('kategorija/apakskategorija/preces/'.$prec->id) }}">
<div>
<img src="{{ URL::to($prec->path) }}">
</div>
<div class="nos">
<p>{{$prec->nosaukums}}</p>
</div></a>
<div class="price-box-new discount">
<div class="label">Cena</div>
<div class="price">{{ $prec->cena }} €</div>
</div>
<div><span>Ielikt grozā</span></div>
</div>
#endforeach
#endforeach
<center>{{$apakskat->links()}}</center> <--pagination
#endsection
dd($apakskat)
UPDATE
when i changed code in my controller to $apakskat = apakskategorijas::paginate(1); then it showed me pagination, but this doesn't work for me since i need to display items in each subcategory, with this code it just displays every item i have,it doesn't filter which subcategory is selected.
This is why i need this $apakskat = apakskategorijas::with('prece')->where('id',$id)->paginate(1); with is a function that i call which creates a relation between tables, so that it would display every item with its related subcategory.
That's the behavior of paginator in current Laravel version. When you have just one page, pagination links are not displayed.
To test this, just change the code to something like this to get more pages:
$apakskat = apakskategorijas::paginate(1);
If you want to show the first page if there is only one page, you need to customize pagination views. Just publish pagination views and remove this #if/#endif pair from the default.blade.php but keep the rest of the code as is:
#if ($paginator->hasPages())
....
#endif
On the Homepage I have called the content of Custpm Post Type with Ajax with this code
jQuery(document).ready(function($){
$.ajaxSetup({cache:false});
$(".sector_item a").click(function(){
var post_link = $(this).attr("href");
$(".sector_item_content").html("<div class='load' style='position:relative;margin-top:50px;padding-bottom:50px;'><img src='<?php bloginfo("template_url"); ?>/images/ajax-loader.gif'></div>");
$(".sector_item_content").load(post_link);
return false;
});
});
But In the single Page of this same Post Type I need to have another design with content so how I can detect the single page. I tried with Wordpess is_single() function but it doesnt work it displayed anyway in ajax.How Can I fix this?
Here is my single template.php
<?php if(is_singular('sector' )){
echo 'Single page' ;
}else{
while (have_posts() ) : the_post(); ?>
<div class="container single_page_inner">
<div class="row clearfix">
<div class="col-md-10 column" style="float:none;margin:auto;">
<div class="sector_single_title">
<?php the_title();?>
</div>
<div class="single_sector_contentmain"> <?php the_content();?></div>
<div class="single_sector_more">
<img src="<?php bloginfo(template_url);?>/images/single_secormoreline.png"/>
<div class="single_sector_button">
<span class="single_sec_leftline"></span>
<span class="single_sec_rightline"></span>
Click Here To Read More
<div class="more_line"></div>
</div>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
If you want to be able to do different things when your single.php files is loaded from Ajax, you need to tell it somehow when it is getting an Ajax request.
One approach would be to add a parameter to your call, like this:
var post_link = $(this).attr("href") + '?isajax=1';
Then in your single.php file, test for this parameter:
<?php if(!empty($_GET['isajax'])){
// This is Ajax - display in Ajax format
} else {
// This is not Ajax - display in standard single.php format
}
use this:
is_singular('YOUR_POST_TYPE' );
CODEX
Magento ver. 1.13
I'm trying to edit the code and layout of an existing Magento website.
From asking a question yesterday i had learned that when first landing on the website you are directed to the page tagged with the "home" URL key and you can find the pages by looking in the "CMS->Pages->Manage Content"
I then looked at what the page with the URL key "home" contains..
<div>{{block type="dip/dip" name="dip" template="dip/banner-home.phtml" }}</div>
<div class="content-home">
<div class="tab-text">{{block type="core/template" name="tabs_home" as="tabs_home" template="page/tabs.phtml"}}</div>
</div>
so i looked at the first line and decided that it was loading the banner that is at the top of the website.
I then looked at the third line that is loading a block from the template aswell and it appears to be loading the file tabs.phtml..
I then located the tabs.phtml hoping that the entire layout of the page would be located there, but i didn't find anything that seems of any use in there.
this is what the page contained..
<SCRIPT type="text/javascript" src="<?php echo $this->getSkinUrl('js/carousel.js') ;?>"></SCRIPT>
<div class="tabs">
<ul class="veiw-all-tab" id="navigation-links">
<li><a href="javascript:void(0);" class="slide-arrow-lft" ><img src="<?php echo $this->getSkinUrl()?>images/slide-left.gif" alt="" /></a></li>
<li>
<span id="newallproductspan"><img src="<?php echo $this->getSkinUrl()?>images/view-all-products.gif" alt="" /></span>
<span id="featuredallproductspan"><img src="<?php echo $this->getSkinUrl()?>images/View-All-Featured-Products.gif" alt="" /></span>
</li>
<li><a href="javascript:void(0);" class="slide-arrow-rgt" ><img src="<?php echo $this->getSkinUrl()?>images/slide-right.gif" alt="" /></a></li>
</ul>
<div class="product-details-new-tab-content">
<ul class="product-details-new-tabs-horiz">
<li id="product_new_products" class="selected"><span><?php echo $this->__('New Products'); ?></span></li>
<li id="product_feature_products"><a href="javascript:void(0)" ><span><?php echo $this->__('Featured Products'); ?></span></a></li>
</ul>
</div>
</div>
<?php echo Mage::getBlockSingleton('catalog/product_new')->setTemplate('catalog/product/new.phtml')->toHtml(); ?>
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('featured_block')->toHtml(); ?>
<script type="text/javascript">
var show_selector = new Array();
show_selector[0] = true
show_selector[1] = true;
//show_selector[2] = true;
function showNewProductGallery(counter){
selector = ".infiniteCarousel"+counter;
if(show_selector[counter])
{
jQuery(selector+" .jCarouselLite").jCarouselLite({
btnNext: "#navigation-links .slide-arrow-rgt",
btnPrev: "#navigation-links .slide-arrow-lft",
speed: 500,
easing: "easeinout"
});
show_selector[counter] = false;
}
};
</script>
<script type="text/javascript">
Varien.Tabs = Class.create();
Varien.Tabs.prototype = {
initialize: function(selector) {
var self=this;
$$(selector+' a').each(this.initTab.bind(this));
},
initTab: function(el) {
el.href = 'javascript:void(0)';
if ($(el.parentNode).hasClassName('selected')) {
this.showContent(el);
}
el.observe('click', this.showContent.bind(this, el));
},
showContent: function(a) {
var li = $(a.parentNode), ul = $(li.parentNode);
var counter = 0;
ul.getElementsBySelector('li', 'ol').each(function(el){
var contents = $(el.id+'_contents');
if (el==li) {
el.addClassName('selected');
// Added by Zeon
if (el.id == 'product_new_products') {
$('newallproductspan').show();
$('featuredallproductspan').hide();
}
if (el.id == 'product_feature_products') {
$('featuredallproductspan').show();
$('newallproductspan').hide();
}
// End
contents.show();
showNewProductGallery(counter);
} else {
el.removeClassName('selected');
contents.hide();
}
counter++
});
}
}
new Varien.Tabs('.product-details-new-tabs-horiz');
</script>
I'm starting to run out of leads to follow to find out how to actually change anything about this page at all.. i can't seem to find anything.. I'm starting to wonde if its even possible.
Any and all help is appreciated.. even if you don't know the answer.. even if you just have a few tips for me, that would be great!
Your question is extremely broad, but I'll try to get you started.
A page in Magento is made up of blocks pulled together using Magento's Layout XML and then rendered by a combination of block objects and php templates (phtml). Describing all of how that feature works is a bit beyond the scope of a simple Q&A, but there are some good guides out there.
I'm not going to talk much about Enterprise because it's not FOSS, but I will say that the default theme is "enterprise", which means that you want to look in app/design/frontend/enterprise/default/layout/page.xml for a fairly global example of layout xml. You can see here that layout xml consists of handles which contain blocks, references and removes, which can contain actions or recur to blocks.
A block in layout xml corresponds to a block class in php, which can be identified by its type. Block type names are fully resolved to their block classpaths in Mage_Core_Model_Layout*.
An action in layout xml calls a method on the containing block. Its children are arguments (the xml node names are ignored for immediate children, but are array keys for grandchildren of the action node.)
A remove lets you ignore an existing block.
A reference allows you to update an existing block by firing off one of its actions or by attaching or removing child blocks.
If you just want to tweak layout, you can do that by dropping a local.xml file in the current theme package. That's a good way to get some practice with layout xml without a lot of the headaches of massive theming. If you want to create your own theme with extensive changes, read the Designer's Guide.
I have created a wordpress blog for images. While publishing all the posts, I didn't use wordpress editor to upload images. Instead, I used FillaZilla to upload the images. Then, in the wordpress editor, I manually wrote only the image tag (below) in all the posts and published it. All posts contain no text, but only images. Like this,
<img alt="" title="" src=""></img>
Now what I want to ask you is that I want the images in all the posts to get auto hyperlink address same as the image src. I have more than 200 blog posts in my wordpress blog. I don't want to edit all of them one by one. Here's the coding of the wordpress content area,
<div class="post-entry">
<p><img src='http://www.mywebsite.com/wp-content/uploads/2012/04/sun.jpg' title="sun" alt="sun" /></p>
</div>
Could anyone please help me on this? how can I add hyperlink to the images? Is there any code which I can put in the post-entry div in my wordpress theme page?
#chandu-vkm explained (in the comments) exactly what I was looking for. Now I have one more question. When I add a a span tag before img , the code #chandu-vkm mentioned doesn't let me add span tag right before img tag. Instead it places the place tag outside the p tag, like in the code below.
<div class="post_div">
<span class="entry"></span>
<p>
<img src='http://www.mywebsite.com/wp-content/uploads/2012/04/sun.jpg' title="Cute Teddy Bear" alt="Cute Teddy Bear" />
</p>
</div>
But I want span to be placed right after p, like this.
<div class="post_div">
<p>
<span class="entry"></span>
<img src='http://www.mywebsite.com/wp-content/uploads/2012/04/sun.jpg' title="Cute Teddy Bear" alt="Cute Teddy Bear" />
</p>
</div>
Somebody please help me out.
you can do it with some jquery
<div class="post_div">
<img src='http://www.mywebsite.com/wp-content/uploads/2012/04/sun.jpg' title="sun" alt="sun" />
</div>
like this
$('.post_div img').each(function(){
$(this).wrap(function() {
return '<a href="' + $(this).attr('src') + '" />';
})
});
here the sample http://jsfiddle.net/a4PYd/
If you are certain that all your post content contains only the <img> tag, you can add this snippet of code to your functions.php file:
function hyperlink_all_my_content( $content ) {
$link = "http://www.somelink.com";
return "<a href='$link'>$content</a>";
}
add_filter( 'the_content', 'hyperlink_all_my_content' );
Note that this will link all your content, even on your wordpress pages.
EDIT:
function hyperlink_all_my_content( $content ) {
$matches = array();
$nummatches = preg_match("/src=['|\"](.*)['|\"]/", $content, $matches);
return "<a href='" . $matches[1] . "'>$content</a>";
}
add_filter( 'the_content', 'hyperlink_all_my_content' );